/* PLAIT.tech — design tokens v3 (marketing/DESIGN_CONTRACT.md §1, S1.12 2026-09-27).
   ONE vocabulary with the app (src/styles/tokens.css): the same names, the same values at --unit: 1px. When the site needs a
   value the app lacks, add it to both files in the same commit. Identity values are FIXED — the site has no accent picker.

   THE SCALE LAW (§1.4). Every stage is composed once, on a 1280 × 618 canvas inside a 1600 × 875 window (the founder's frame),
   and keeps that composition at every desktop size: --unit is "one canvas pixel" — 1px at the reference window, smaller or
   larger in proportion to whichever side of the window binds first — so type, space, columns and the header scale together
   and nothing is ever stretched to fill a frame. Bounded (0.9 … 1.2) so browser zoom still enlarges text, and pinned to 1px
   below 900 px where the page flows instead. Hairlines (1px) and touch floors never scale. */

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/inter-latin-opsz-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ── The unit ── */
  --unit: clamp(0.9px, min(0.0625vw, 0.1142858vh), 1.2px);   /* 100vw/1600 · 100vh/875 (the vh side rounds up so 24-unit targets never measure 23.99) */

  /* ── Colour — Brand Guidelines v0.30 §04: five values, nothing else ── */
  --brand: #006D5B;            /* PLAIT Teal — identity, primary action, active state, links */
  --brand-dark: #005E4E;       /* hover / pressed of --brand */
  --brand-lifted: #00988E;     /* teal on dark grounds; the focus ring; the third strand in figures */
  --charcoal: #404549;         /* headings, body, wordmark */
  --black: #090B0C;            /* dark bands, prompt blocks, toast */
  --white: #FFFFFF;
  --context-white: #F6F8F7;    /* soft ground */

  --ink: var(--charcoal);
  --ink-muted: #5A6065;        /* ledes, descriptions, meta — 6.4:1 on white */
  --ink-faint: #63696E;        /* faint labels and meta — 5.6:1 on white, 5.2:1 on the soft ground, 4.9:1 on tint-8 (S5: every 12 px use clears WCAG AA) */

  --surface: var(--white);
  --surface-soft: var(--context-white);
  --line: #E3E7E6;
  --line-strong: #CDD3D1;      /* control borders */

  --tint-brand-4: rgba(0, 109, 91, 0.04);
  --tint-brand-8: rgba(0, 109, 91, 0.08);
  --tint-brand-12: rgba(0, 109, 91, 0.12);
  --tint-ink-6: rgba(64, 69, 73, 0.06);
  --scrim: rgba(9, 11, 12, 0.18);
  --scrim-strong: rgba(9, 11, 12, 0.50);
  --error: #B3261E;            /* form errors only — the one non-brand colour */

  /* the three strands wherever a figure draws them (Brand palette only) */
  --strand-flow: var(--brand);
  --strand-tribe: var(--charcoal);
  --strand-prosper: var(--brand-lifted);

  /* lockup colour hooks (docs/brand/assets/lockups/LOCKUP_SPEC.md) */
  --lockup-ink: var(--charcoal);
  --lockup-muted: var(--ink-muted);

  /* ── Type — MD-25 scale on the unit; floor 12 px ── */
  --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-display: calc(62 * var(--unit));          /* 62 · 600 · 1.0 · −.03em (S6.0: SemiBold display, the founder's home reference) */
  --text-hero: calc(92 * var(--unit));             /* the hero scale (the home): 92 · 600 · 0.98 · −.035em, one accent word in --brand */
  --text-hero-lede: calc(24 * var(--unit));        /* the hero scale: lede 24 · 400 · 1.4 */
  --text-hero-body: calc(18 * var(--unit));        /* the hero scale: body 18 · 400 · 1.55 */
  --text-h2: calc(48 * var(--unit));               /* 48 · 600 · 1.06 · −.015em (document titles) */
  --text-h3: calc(24 * var(--unit));               /* 24 · 600 · 1.2 */
  --text-h4: calc(18 * var(--unit));               /* 18 · 600 · 1.3 */
  --text-lede: calc(21 * var(--unit));             /* 21 · 400 · 1.45 · ink-muted */
  --text-body: calc(16 * var(--unit));             /* 16 · 400 · 1.6 */
  --text-body-compact: calc(15 * var(--unit));     /* 15 */
  --text-small: max(12.5px, calc(14 * var(--unit)));   /* 14 · 400/500 · 1.5 */
  --text-label: max(12px, calc(12 * var(--unit)));     /* 12 · 600 · uppercase · .08em */
  --leading-display: 1;
  --leading-heading: 1.06;
  --leading-body: 1.6;
  --leading-doc: 1.7;
  --tracking-display: -0.03em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.08em;

  /* legacy aliases (Phase-3 fragments) — removed at S6 */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;

  /* ── Space — the app's scale (4 px grid) on the unit ── */
  --space-0: 0;
  --space-1: calc(4 * var(--unit));
  --space-2: calc(8 * var(--unit));
  --space-3: calc(12 * var(--unit));
  --space-4: calc(16 * var(--unit));
  --space-5: calc(20 * var(--unit));
  --space-6: calc(24 * var(--unit));
  --space-8: calc(32 * var(--unit));
  --space-10: calc(40 * var(--unit));
  --space-12: calc(48 * var(--unit));
  --space-16: calc(64 * var(--unit));
  --space-20: calc(80 * var(--unit));
  --space-24: calc(96 * var(--unit));

  /* ── Radius ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --radius: var(--radius-md);          /* legacy alias */
  --radius-lg-legacy: var(--radius-xl);

  /* ── Elevation — surfaces are flat; only layers above the stage cast a shadow ── */
  --shadow-layer: 0 24px 60px rgba(9, 11, 12, 0.10);
  --shadow-object: 0 1px 2px rgba(9, 11, 12, 0.08), 0 8px 20px -10px rgba(9, 11, 12, 0.22), 0 0 0 1px rgba(9, 11, 12, 0.04);   /* a content object (a sheet, a page, an output) previewed on a stage: structure is flat, objects have depth (round thirty-four) */
  --shadow-soft: 0 4px 20px rgba(9, 11, 12, 0.06);      /* legacy fragments only */
  --shadow-brand: 0 4px 14px rgba(0, 109, 91, 0.25);    /* legacy fragments only */

  /* ── Layers (app names) ── */
  --z-header: 30;
  --z-content-overlay: 40;   /* viewer + sheet + scrim */
  --z-sheet: 50;
  --z-dialog: 70;            /* contact / support sheets */
  --z-popover: 80;           /* more menu */
  --z-toast: 90;

  /* ── Geometry — the canvas: 1280 wide, 12 columns, 32 gutters between them ── */
  --header-h: calc(72 * var(--unit));
  --nav-row-h: 48px;                              /* the second header row ≤ 899 */
  --control: max(40px, calc(44 * var(--unit)));
  --canvas-w: min(calc(1280 * var(--unit)), calc(100vw - 48px));   /* the content width at every desktop size; never wider than the window */
  --stage-col-gap: calc(32 * var(--unit));
  --gutter: max(24px, calc((100vw - var(--canvas-w)) / 2));
  --maxw-stage: calc(var(--canvas-w) + 2 * var(--gutter));   /* legacy name: the header bar's outer width */
  --measure-doc: calc(820 * var(--unit));         /* the document column */
  --maxw-prose: calc(736 * var(--unit));          /* ≈ 72ch at 16 px */
  --maxw: 1080px;                                 /* legacy MPA shell width */
  --drawer-w: min(calc(480 * var(--unit)), 92vw);
  --mark-stage-w: calc(240 * var(--unit));        /* the display mark on a stage — never below 180 px */

  /* ── Motion ── */
  --dur-fast: 120ms;
  --dur-hover: 150ms;
  --dur-stage: 160ms;
  --dur-drawer: 220ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* below the desktop breakpoint the page flows: the canvas pixel is a pixel and the header is the app's 64 + nav row */
@media (max-width: 899px) {
  :root { --unit: 1px; --header-h: calc(64px + var(--nav-row-h)); --gutter: clamp(20px, 5vw, 40px); --canvas-w: calc(100vw - 2 * var(--gutter)); }
}