/* Wind Tunnel: the token layer.

   The names of docs/design/instrument-spec.md, section 2, pointed at the
   base palette styles.css declares: dark by default since 2 October
   2026, light under data-theme="light". Every alias here is theme-free;
   the base tokens change under it. The type scale sits one notch below
   a web page's (the ask of 2 October: a tool looked at all day, at arm's
   length), on the Wind Tunnel Design System's steps. Spacing, radius,
   heights, motion and layering are stated here and nowhere else.

   Loaded before styles.css. Nothing here collides with a name the
   stylesheet declares: the DS's --border-strong and --font-mono serve
   as they are, and this file does not restate them.

   Measured, not assumed: tests/house.js reads both roots and holds every
   text role to 4.5:1 on every ground it is used on. No em dashes in
   here: the house suite reads this file. */

:root {
  --ds-simple-column: 360px;
  /* ── 2.1 Colour roles ─────────────────────────────────────────────
     Grounds. */
  --bg-page: var(--color-bg);                     /* the content: dark #171616, light #fafafa */
  --bg-surface: var(--color-surface);             /* a card, a tile, an input, a chip: one step above the page */
  --bg-raised: var(--color-surface-raised);       /* what floats: a menu, a toast, the floating toolbar */
  --bg-sunken: var(--color-sunken);               /* a trough: the bed under a segmented control, a dropzone, the canvas */
  --bg-rail: var(--color-bar);                    /* the chrome: title bar, rail, sidebar */

  /* Lines. The DS's --border-strong is declared in styles.css and not
     restated here. */
  --border-hairline: var(--color-border);         /* a table's rows, a document's sections */
  --border-soft: var(--tint-4);                   /* a line lighter than the hairline, for rows inside a group */

  /* Text. */
  --text-primary: var(--color-text);              /* names and values */
  --text-secondary: var(--neutral-700);           /* running copy */
  --text-muted: var(--neutral-600);               /* captions and meta: the floor, 4.5:1 on every ground it is used on */
  --text-inverse: var(--color-primary-fg);        /* on the one filled button, and on a settled or live disc */

  /* The one filled button. */
  --action-primary-bg: var(--color-primary);
  --action-primary-hover: var(--color-primary-hover);

  /* The needle. Rule 1: reserved for running, waiting on you, the current
     step, the active nav edge, a gate's eyebrow, a selection outline in
     the design surface. Never a fill, a link or a hover. It shares the
     brand blue with the primary, the DS's convention; on dark it is the
     lighter glyph blue, so it reads on the ground. */
  --signal-run-mark: var(--color-text);           /* the working mark in the title bar's run pill: the ink on the dark ground (the brand blue on the light, below) */
  --signal-live: var(--brand-text);
  --signal-live-soft: var(--color-primary-subtle);
  --signal-live-line: var(--brand-border);

  /* Settled: signed, done, passed, carried. */
  --status-settled: var(--green-text);
  --status-settled-soft: var(--color-success-subtle);
  --status-settled-line: var(--green-border);

  /* Chosen, not a state: the row picked in a list beside its detail, the
     default brain's tag. The primary's tint, never an action's fill. */
  --chosen-bg: var(--color-primary-subtle);
  --chosen-line: var(--brand-border);
  --chosen-fg: var(--brand-text);

  /* Caution: left with a reason, below AA, attention but not blocking. */
  --status-caution: var(--warning-text);
  --status-caution-soft: var(--color-warning-subtle);
  --status-caution-line: rgba(var(--rgb-warning), 0.3);

  /* The alignment guide on the canvas: a hairline while a board is
     dragged onto another's edge or centre, gone on the drop. Red is
     what every canvas tool draws its snap lines in; it is never a
     state here, so it takes nothing from the needle or a fault. */
  --signal-guide: var(--color-error);

  /* Focus. Rule 3: structural, never the needle. */
  --focus-ring: var(--color-focus);

  /* ── 2.2 Spacing: an 8px rhythm, 4px half-steps, a 2px hairline step ── */
  --sp-05: 2px;
  --sp-1: 4px;
  --sp-15: 6px;
  --sp-2: 8px;
  --sp-25: 10px;
  --sp-3: 12px;
  --sp-35: 14px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;    /* the page gutter, on every full-width screen, whatever the viewport */
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── 2.3 Radius: about height over four, capped at --r-4xl ─────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 7px;
  --r-lg: 8px;
  --r-xl: 9px;
  --r-2xl: 10px;
  --r-3xl: 11px;
  --r-4xl: 12px;
  --r-5xl: 14px;
  --r-pill: 20px;
  --r-full: 9999px;
  /* The phone frame's corner on the canvas: a device drawn around a
     page, not a control, so it is off the control scale on purpose. */
  --r-phone: 54px;

  /* ── 2.4 Type: the app's one face, one notch below a web page's. ────
     The sizes are the Wind Tunnel Design System's (2 October 2026): a
     screen's title at 26, a section at 15, copy and rows at 13, meta at
     11, the mono labels at 11 and 10; the roles keep their names and
     their relative order.
     The direction's serif display becomes the display face and its sans
     the body face; both, and the mono role, are SF Pro Display since
     2026-09-21 (--font-body, --font-display and --font-mono, declared in
     styles.css and not restated here). The display roles carry 600,
     not 700: the serif read at 400 because a serif does, and a sans at
     400 reads as unfinished beside every other title, but SF Pro
     Display at 700 read as shouting on every header (the ask of
     2026-09-21). The mono roles are 400, not the spec's 500: three
     weights (400, 600, 700) and the house suite counts them. */
  --font-serif: var(--font-display);
  --font-sans: var(--font-body);

  /* Each role as four values: size, weight, line height, letter spacing.
     A rule reads them as font: var(--t-x-w) var(--t-x-s) / var(--t-x-lh) var(--font-...);
     letter-spacing: var(--t-x-ls). The family is named beside each. */
  --t-display-xl-s: 26px;  --t-display-xl-w: 600; --t-display-xl-lh: 1.20; --t-display-xl-ls: -0.015em; /* display: page title on Workflows and Made */
  --t-display-lg-s: 22px;  --t-display-lg-w: 600; --t-display-lg-lh: 1.20; --t-display-lg-ls: -0.01em;  /* display: the gate question; Made's headline */
  --t-display-md-s: 20px;  --t-display-md-w: 600; --t-display-md-lh: 1.20; --t-display-md-ls: -0.01em;  /* display: the step name; the Output headline */
  --t-display-sm-s: 18px;  --t-display-sm-w: 600; --t-display-sm-lh: 1.20; --t-display-sm-ls: -0.01em;  /* display: the workflow name in the header */
  --t-display-xs-s: 17px;  --t-display-xs-w: 600; --t-display-xs-lh: 1.25; --t-display-xs-ls: -0.01em;  /* display: compact step name; stopped-banner title */
  --t-title-lg-s: 15px;    --t-title-lg-w: 600;   --t-title-lg-lh: 1.25;   --t-title-lg-ls: 0;         /* sans: section headings inside a screen */
  --t-title-md-s: 14px;    --t-title-md-w: 600;   --t-title-md-lh: 1.35;   --t-title-md-ls: 0;         /* sans: card titles, gate option titles, panel titles */
  --t-title-sm-s: 13px;  --t-title-sm-w: 600;   --t-title-sm-lh: 1.30;   --t-title-sm-ls: 0;         /* sans: workflow card names, step names in Made */
  --t-body-lg-s: 14px;   --t-body-lg-w: 400;    --t-body-lg-lh: 1.60;    --t-body-lg-ls: 0;          /* sans: input values; streamed model text */
  --t-body-md-s: 13px;     --t-body-md-w: 400;    --t-body-md-lh: 1.55;    --t-body-md-ls: 0;          /* sans: default body */
  --t-body-sm-s: 13px;   --t-body-sm-w: 400;    --t-body-sm-lh: 1.50;    --t-body-sm-ls: 0;          /* sans: descriptions inside cards and panels */
  --t-body-xs-s: 12px;     --t-body-xs-w: 400;    --t-body-xs-lh: 1.50;    --t-body-xs-ls: 0;          /* sans: ledger rows, table cells, menu rows */
  --t-label-md-s: 13px;  --t-label-md-w: 600;   --t-label-md-lh: 1.30;   --t-label-md-ls: 0;         /* sans: form field labels */
  --t-label-sm-s: 12px;    --t-label-sm-w: 600;   --t-label-sm-lh: 1.30;   --t-label-sm-ls: 0;         /* sans: sub-labels inside a Refine group */
  --t-caption-s: 11px;   --t-caption-w: 400;    --t-caption-lh: 1.45;    --t-caption-ls: 0;          /* sans: hints under a label; card meta */
  --t-micro-s: 11px;       --t-micro-w: 400;      --t-micro-lh: 1.40;      --t-micro-ls: 0;            /* sans: chip labels; the smallest sans allowed */
  --t-mono-md-s: 12px;     --t-mono-md-w: 400;    --t-mono-md-lh: 1.40;    --t-mono-md-ls: 0;          /* mono: file names in body flow */
  --t-mono-sm-s: 11px;   --t-mono-sm-w: 400;    --t-mono-sm-lh: 1.40;    --t-mono-sm-ls: 0.02em;     /* mono: the dock's cost line, card file names */
  --t-mono-xs-s: 11px;     --t-mono-xs-w: 400;    --t-mono-xs-lh: 1.30;    --t-mono-xs-ls: 0.08em;     /* mono, uppercase: counts in chips, WCAG criteria, state pills */
  --t-mono-2xs-s: 10px;  --t-mono-2xs-w: 400;   --t-mono-2xs-lh: 1.30;   --t-mono-2xs-ls: 0.10em;    /* mono, uppercase: section eyebrows, panel kind labels; the smallest mono */
  --t-num-xl-s: 24px;      --t-num-xl-w: 400;     --t-num-xl-lh: 1.00;     --t-num-xl-ls: 0;           /* mono: headline numbers on the flow map */
  --t-num-lg-s: 20px;      --t-num-lg-w: 400;     --t-num-lg-lh: 1.00;     --t-num-lg-ls: 0;           /* mono: receipt numbers in the ledger rail */
  --t-num-md-s: 18px;      --t-num-md-w: 400;     --t-num-md-lh: 1.00;     --t-num-md-ls: 0;           /* mono: count strips in panels */
  /* Two sizes outside the roles, both named by section 3.1: the rail's
     persistent nav label, the one sans under 12px, and the wordmark. */
  --t-nav-label-s: 10px;   --t-nav-label-w: 400;  --t-nav-label-lh: 1.20;  --t-nav-label-ls: 0.02em;   /* sans: the rail's labels; 600 on the active item */
  --t-wordmark-s: 15px;    --t-wordmark-w: 600;   --t-wordmark-lh: 1.00;   --t-wordmark-ls: -0.02em;   /* display: "Wind Tunnel" in the top bar */

  /* ── 2.5 Control heights ──────────────────────────────────────────── */
  --h-chip: 26px;        /* chips inside a dropdown or a panel toolbar */
  --h-meta: 28px;        /* header meta chips, the design-system pill, small icon buttons */
  --h-control: 30px;     /* step-rail chips, header icon buttons, view-switch buttons */
  --h-control-lg: 32px;  /* panel header buttons, card overflow buttons */
  --h-action: 34px;      /* a card's Open, filter chips, section actions */
  --h-field-sm: 38px;    /* list-screen search and sort */
  --h-field: 44px;       /* the dock's buttons; any row action a finger uses */
  --h-input: 46px;       /* text inputs in a Set up or Brief form */
  --h-cta: 50px;         /* a primary CTA inside a generated mockup, never app chrome */
  --h-row: 36px;         /* a row in a side list: a step, a project */
  --w-side: 268px;       /* the workflow's side, in the ChatGPT desktop app's proportion */
  --w-projside: 236px;   /* the project sidebar, the same for a workflow and a craft (Workflows redesign, batch 1) */

  /* ── 2.6 Elevation, motion, focus, layering ───────────────────────────
     Cards have no shadow: a hairline on --bg-surface. Shadow is for what
     floats: the dock, the panel, menus, device previews. The rgb is the
     PS ink's, so a shadow is the page's own colour thinned. */
  --rgb-ink: 24,22,22;       /* the ink of the one dark sheet the app draws itself, the player, in both themes */
  --rgb-page: 250,250,250;   /* a wash of light on that sheet (the player's head) */
  /* Shadows on the dark ground: black, and deeper than on light, where
     a shadow is the ink thinned; the light theme restates them at the
     foot of this file. A menu also takes a 1px line of its own, since
     a shadow alone does not draw an edge on a dark ground. */
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.40);     /* the active button in a segmented control */
  --shadow-float: 0 3px 10px rgba(0,0,0,0.45);     /* device previews on a sunken bed */
  --shadow-page: 0 6px 24px rgba(0,0,0,0.50);      /* the rendered page in the design surface */
  --shadow-dock: 0 -8px 24px rgba(0,0,0,0.30);     /* the action dock */
  --shadow-panel: -14px 0 36px rgba(0,0,0,0.50);   /* the detail panel */
  --shadow-menu: 0 16px 44px rgba(0,0,0,0.60), 0 0 0 1px var(--color-line);     /* dropdowns and menus */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-panel: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-hover: 120ms;
  --dur-state: 160ms;
  --dur-panel: 220ms;
  --dur-menu: 140ms;
  --dur-flow: 520ms;     /* the run mark's smoke, one dot along; it stands still for people who ask for less motion */

  /* Layering. The app's screens are fixed layers at 700 (a workflow, the
     brief), the shell at 780 and 800, its menus at 900, toasts at 1000:
     a menu or a panel has to sit above the screen it opens over, so the
     spec's ladder is placed on the app's. Inside a screen the dock is 30. */
  --z-rail: 780;
  --z-head: 800;
  --z-dock: 30;
  --z-panel: 850;
  --z-menu: 900;
  --z-toast: 1000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 0ms;
    --dur-menu: var(--dur-state);    /* menus and the panel fade over --dur-state instead of sliding; everything else is instant */
    --dur-panel: var(--dur-state);
  }
}

/* The light theme's shadows: the ink thinned, as they were. And the run
   mark in the brand blue, one colour as on the dark ground. */
:root[data-theme="light"] {
  --signal-run-mark: var(--brand-500);
  --shadow-raised: 0 1px 2px rgba(24,22,22,0.07);
  --shadow-float: 0 3px 10px rgba(24,22,22,0.09);
  --shadow-page: 0 6px 24px rgba(24,22,22,0.08);
  --shadow-dock: 0 -8px 24px rgba(24,22,22,0.04);
  --shadow-panel: -14px 0 36px rgba(24,22,22,0.10);
  --shadow-menu: 0 16px 44px rgba(24,22,22,0.16);
}

:root {
  --ds-book-rail: 240px;
  --ds-book-stage: 320px;
  --ds-book-chrome: 240px;
  --ds-book-control: 120px;
}
:root { --ds-book-preview: 220px; }
:root { --ds-book-measure:72ch; }