/* Macko — design tokens */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Neutrals */
  --neutral-0: #FFFFFF;
  --neutral-50: #F7F8FA;
  --neutral-100: #EEF0F3;
  --neutral-200: #DDE1E7;
  --neutral-300: #C2C8D1;
  --neutral-400: #9098A4;
  --neutral-500: #6C7480;
  --neutral-600: #4D545E;
  --neutral-700: #363B43;
  --neutral-800: #1F232A;
  --neutral-900: #0F1216;

  /* Accent — Blueprint Blue */
  --accent-50: #EAF1FB;
  --accent-100: #CFE0F5;
  --accent-500: #1F5BC4;
  --accent-600: #1A4FAB;
  --accent-700: #143E89;

  /* Status */
  --success-50: #E6F4EC;
  --success-500: #1E8F5A;
  --warning-50: #FAF1DF;
  --warning-500: #C77A0A;
  --danger-50: #FAE6E2;
  --danger-500: #C7341F;
  --info-500: #1F5BC4;

  /* Roles */
  --role-architect: #1F5BC4;
  --role-engineer: #5B4DBD;
  --role-contractor: #C77A0A;
  --role-client: #1E8F5A;
  --role-owner: #363B43;

  /* Markup */
  --pin-comment: #1F5BC4;
  --pin-task: #C77A0A;
  --pin-resolved: #9098A4;

  /* Radii */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* Elevation */
  --elev-1: 0 1px 2px rgba(15, 18, 22, 0.06);
  --elev-2: 0 4px 12px rgba(15, 18, 22, 0.08);
  --elev-3: 0 12px 32px rgba(15, 18, 22, 0.12);

  /* Fonts */
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', Menlo, Consolas, monospace;
}

/* Macko base — applied inside each artboard root */
.mk {
  font-family: var(--font-sans);
  color: var(--neutral-700);
  background: var(--neutral-0);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.mk *,
.mk *::before,
.mk *::after { box-sizing: border-box; }

.mk .mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; }

/* Status dot */
.mk .dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.mk .dot.success { background: var(--success-500); }
.mk .dot.warning { background: var(--warning-500); }
.mk .dot.danger { background: var(--danger-500); }
.mk .dot.info { background: var(--info-500); }
.mk .dot.neutral { background: var(--neutral-400); }

/* Pills */
.mk .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}
.mk .pill.rev {
  font-family: var(--font-mono); font-weight: 500;
  background: var(--accent-50); color: var(--accent-700);
  padding: 1px 7px;
}
.mk .pill.success { background: var(--success-50); color: #0F5A38; }
.mk .pill.warning { background: var(--warning-50); color: #7A4A05; }
.mk .pill.danger { background: var(--danger-50); color: #841F10; }
.mk .pill.info { background: var(--accent-50); color: var(--accent-700); }
.mk .pill.neutral { background: var(--neutral-100); color: var(--neutral-600); }

/* Avatar */
.mk .av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--neutral-200);
  color: var(--neutral-700);
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-sans);
  border: 1.5px solid var(--neutral-0);
  box-shadow: 0 0 0 1.5px transparent;
}
.mk .av.lg { width: 32px; height: 32px; font-size: 12px; }
.mk .av.architect { box-shadow: 0 0 0 1.5px var(--role-architect); background: #E5EDFA; color: var(--role-architect); }
.mk .av.engineer  { box-shadow: 0 0 0 1.5px var(--role-engineer);  background: #EBE8F8; color: var(--role-engineer); }
.mk .av.contractor{ box-shadow: 0 0 0 1.5px var(--role-contractor); background: #FAEDD8; color: var(--role-contractor); }
.mk .av.client    { box-shadow: 0 0 0 1.5px var(--role-client);    background: #E0F1E8; color: var(--role-client); }
.mk .av.owner     { box-shadow: 0 0 0 1.5px var(--role-owner);     background: var(--neutral-100); color: var(--role-owner); }

/* Buttons */
.mk .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  cursor: pointer;
  background: var(--neutral-0); color: var(--neutral-700);
  transition: background .1s ease-out, border-color .1s;
  white-space: nowrap;
}
.mk .btn.primary { background: var(--accent-500); color: white; border-color: var(--accent-500); }
.mk .btn.primary:hover { background: var(--accent-600); border-color: var(--accent-600); }
.mk .btn.secondary { border-color: var(--neutral-200); }
.mk .btn.secondary:hover { background: var(--neutral-50); }
.mk .btn.tertiary { border-color: transparent; color: var(--neutral-600); }
.mk .btn.tertiary:hover { background: var(--neutral-100); }
.mk .btn.danger { color: var(--danger-500); border-color: var(--neutral-200); }
.mk .btn.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.mk .btn.lg { height: 38px; padding: 0 18px; font-size: 14px; }
.mk .btn.icon { width: 32px; padding: 0; }
.mk .btn.full { width: 100%; }

/* Card */
.mk .card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--r-md);
}

/* Inputs */
.mk .input {
  height: 32px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--r-md);
  padding: 0 10px;
  font-family: var(--font-sans); font-size: 13px;
  background: var(--neutral-0); color: var(--neutral-800);
  width: 100%;
}
.mk .input:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 2px var(--accent-50); }

/* Chip */
.mk .chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500;
  background: var(--neutral-0); color: var(--neutral-600);
  cursor: pointer;
  white-space: nowrap;
}
.mk .chip.active {
  background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-100);
}

/* Typography helpers */
.mk .display-lg { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; color: var(--neutral-800); }
.mk .display-md { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.005em; color: var(--neutral-800); }
.mk .display-sm { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--neutral-800); }
.mk .label-sm { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-500); }
.mk .label-md { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--neutral-700); }
.mk .muted { color: var(--neutral-500); }
.mk .strong { color: var(--neutral-800); font-weight: 600; }

/* Icon (Lucide-style, line) */
.mk .ico {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.mk .ico.sm { width: 14px; height: 14px; }
.mk .ico.lg { width: 20px; height: 20px; }
.mk .ico.xl { width: 24px; height: 24px; }

/* Scrollbar removal inside artboards (canvas already does this — belt + braces) */
.mk ::-webkit-scrollbar { display: none; }
.mk { scrollbar-width: none; }