/* 2MRW Labs design-system tokens, copied verbatim from the Claude Design project
   (_ds/2mrw-labs-design-system-e2cc556a/tokens/*.css). The Google Fonts @import from
   fonts.css is loaded by <link> in index.html instead, so it does not block on this file. */

/* ---- tokens/fonts.css ---- */
/* Webfonts. Archivo = UI + display (substitute for the source's Helvetica Neue logotype).
   IBM Plex Mono = labels, data, code. Newsreader = editorial pull-quotes only. */

:root{
  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
}

/* ---- tokens/colors.css ---- */
/* Base palette — lifted verbatim from the 3B Stacked Plate source.
   Accents were authored in oklch; hex equivalents given for SVG/canvas use. */
:root{
  /* Ink — the plate */
  --ink-900:#0B0E11;
  --ink-800:#161B20;
  --ink-700:#2A3238;
  --ink-500:#5C6469;
  --ink-400:#8A9296;

  /* Lines + surfaces */
  --line-300:#D2D7D8;
  --line-200:#E0E4E5;
  --surface-100:#F5F7F7;
  --surface-0:#FFFFFF;
  --canvas-200:#E7EAEA;

  /* Steel blue accent (oklch 248 hue family) */
  --accent-700:oklch(0.44 0.10 248);
  --accent-600:oklch(0.52 0.11 248);   /* #2D6DA5 — primary, on light */
  --accent-500:oklch(0.62 0.13 248);   /* #3C8BD0 — on dark */
  --accent-400:oklch(0.68 0.13 248);   /* #4F9EE4 — LABS rule, on plate */
  --accent-100:oklch(0.94 0.02 248);
  --accent-600-hex:#2D6DA5;
  --accent-500-hex:#3C8BD0;
  --accent-400-hex:#4F9EE4;

  /* Status — extrapolated from the accent's chroma discipline (see readme: Intentional additions) */
  --signal-ok:oklch(0.53 0.11 155);
  --signal-warn:oklch(0.66 0.13 75);
  --signal-alert:oklch(0.54 0.16 25);
  --signal-ok-100:oklch(0.95 0.03 155);
  --signal-warn-100:oklch(0.95 0.05 75);
  --signal-alert-100:oklch(0.95 0.04 25);

  /* Semantic aliases — always author against these */
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-500);
  --text-muted:var(--ink-400);
  --text-inverse:var(--surface-100);
  --text-accent:var(--accent-600);
  --text-link:var(--accent-600);
  --text-link-hover:var(--ink-900);

  --surface-page:var(--surface-100);
  --surface-card:var(--surface-0);
  --surface-sunken:var(--canvas-200);
  --surface-inverse:var(--ink-900);
  --surface-inverse-raised:var(--ink-800);

  --border-subtle:var(--line-200);
  --border-default:var(--line-300);
  --border-strong:var(--ink-900);
  --border-inverse:var(--ink-700);

  --accent-solid:var(--accent-600);
  --accent-solid-hover:var(--accent-700);
  --accent-on-dark:var(--accent-500);
  --accent-rule:var(--accent-400);
  --focus-ring:var(--accent-600);
}

/* Dark plate context: wrap any inverse region in .plate and semantics flip. */
.plate{
  --text-primary:var(--surface-100);
  --text-secondary:var(--ink-400);
  --text-muted:var(--ink-500);
  --text-inverse:var(--ink-900);
  --text-accent:var(--accent-500);
  --text-link:var(--accent-500);
  --text-link-hover:var(--surface-0);
  --surface-page:var(--ink-900);
  --surface-card:var(--ink-800);
  --surface-sunken:var(--ink-900);
  --surface-inverse:var(--surface-100);
  --border-subtle:var(--ink-800);
  --border-default:var(--ink-700);
  --border-strong:var(--surface-100);
  --accent-solid:var(--accent-500);
  --accent-solid-hover:var(--accent-400);
  --focus-ring:var(--accent-500);
  background:var(--ink-900);
  color:var(--surface-100);
}

/* ---- tokens/typography.css ---- */
/* Type scale — exact sizes observed in the source, not a snapped ratio. */
:root{
  --text-display-xl:40px;
  --text-display-l:36px;   /* wordmark size in the primary lockup */
  --text-display-m:32px;
  --text-display-s:30px;
  --text-title:24px;
  --text-heading:20px;
  --text-subheading:17px;
  --text-body-l:16px;
  --text-body:15px;
  --text-body-s:13px;
  --text-label:12px;
  --text-label-s:11px;
  --text-micro:10px;
  --text-micro-xs:9px;

  --leading-solid:0.95;    /* stacked wordmark */
  --leading-tight:1;
  --leading-snug:1.2;
  --leading-normal:1.45;
  --leading-body:1.55;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Tracking — the brand's tell: display is negative, mono labels are wide */
  --tracking-logotype:-0.045em;
  --tracking-display:-0.02em;
  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.08em;
  --tracking-label:0.14em;
  --tracking-eyebrow:0.18em;
  --tracking-labs:0.36em;   /* the LABS lock */

  /* Composed roles */
  --type-logotype:var(--weight-bold) var(--text-display-l)/var(--leading-solid) var(--font-display);
  --type-display:var(--weight-semibold) var(--text-display-xl)/var(--leading-snug) var(--font-display);
  --type-title:var(--weight-semibold) var(--text-title)/var(--leading-snug) var(--font-sans);
  --type-subheading:var(--weight-semibold) var(--text-subheading)/var(--leading-snug) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans);
  --type-body-s:var(--weight-regular) var(--text-body-s)/var(--leading-normal) var(--font-sans);
  --type-label:var(--weight-medium) var(--text-label)/var(--leading-tight) var(--font-mono);
  --type-eyebrow:var(--weight-regular) var(--text-micro)/var(--leading-tight) var(--font-mono);
}

/* ---- tokens/spacing.css ---- */
/* Spacing — the source works on a loose 2px-resolution scale, not a 4/8 grid.
   These are the literal step values it uses. */
:root{
  --space-2:2px;
  --space-3:3px;
  --space-4:4px;
  --space-5:5px;
  --space-8:8px;
  --space-10:10px;
  --space-12:12px;
  --space-14:14px;
  --space-16:16px;
  --space-18:18px;
  --space-20:20px;
  --space-22:22px;
  --space-26:26px;
  --space-28:28px;
  --space-32:32px;
  --space-40:40px;
  --space-44:44px;
  --space-48:48px;
  --space-56:56px;
  --space-64:64px;
  --space-72:72px;
  --space-96:96px;

  /* Semantic */
  --gutter-card:28px;
  --gutter-section:64px;
  --gutter-section-y:72px;
  --stack-tight:10px;
  --stack:20px;
  --stack-loose:44px;
  --pad-control-y:10px;
  --pad-control-x:16px;
  --pad-plate-y:16px;
  --pad-plate-x:18px;
  --measure:720px;      /* prose max-width */
  --shell-max:1240px;
}

/* ---- tokens/borders.css ---- */
/* Corners are square. Full stop — the plate is the brand.
   Only genuinely circular controls (radio, switch knob) use --radius-full. */
:root{
  --radius-0:0;
  --radius-full:999px;
  --border-hairline:1px;
  --border-mark:1.5px;   /* outlined-plate weight in the lockup */
  --border-heavy:2px;

  --rule-accent:3px;     /* the LABS rule under the icon mark */
  --rule-accent-s:2px;
  --tab-accent:12px;     /* indexed edge bar */

  /* Elevation is drawn with lines, not blur. Shadows are a last resort
     and only for true overlays (dialog, dropdown, toast). */
  --shadow-none:none;
  --shadow-overlay:0 18px 48px -12px rgb(11 14 17 / 0.28);
  --shadow-overlay-tight:0 8px 24px -8px rgb(11 14 17 / 0.22);
  --ring-focus:0 0 0 2px var(--surface-0),0 0 0 4px var(--focus-ring);
  --ring-focus-flush:0 0 0 2px var(--focus-ring);
}

/* ---- tokens/motion.css ---- */
/* Motion is mechanical: short, linear-ish, no bounce, no scale-up flourishes.
   Presses shift 1px or darken; they never spring. */
:root{
  --dur-instant:80ms;   /* @kind other */
  --dur-fast:120ms;     /* @kind other */
  --dur-base:180ms;     /* @kind other */
  --dur-slow:260ms;     /* @kind other */
  --ease-standard:cubic-bezier(0.2,0,0.2,1);  /* @kind other */
  --ease-out:cubic-bezier(0,0,0.2,1);         /* @kind other */
  --ease-in:cubic-bezier(0.4,0,1,1);          /* @kind other */
  --transition-control:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
  --transition-overlay:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-instant:0ms;  /* @kind other */
    --dur-fast:0ms;     /* @kind other */
    --dur-base:0ms;     /* @kind other */
    --dur-slow:0ms;     /* @kind other */
  }
}