/* tokens.css — GENERATED from Figma. Do not hand-edit.
 * Source: ToMKzhnKI5sPwCXAYCKPHA · regenerate with: node scripts/tokens-pull.mjs
 * Values flow one way: Figma variables -> tokens.json -> tokens.css -> the page.
 */

:root{
  /* ---- primitives. Never reference these directly in page CSS. ---- */
  --p-white-pure:#ffffff; --p-white-warm:#fafaf6; --p-white-paper:#edece5;
  --p-ink-900:#04050a; --p-ink-800:#2a2a24; --p-ink-700:#524f43;
  --p-line-200:#dedad0;
  --p-yellow-500:#ffd923; --p-yellow-600:#e6b400; --p-yellow-100:#fff1c2;
  --p-blue-500:#4a8bf5;   --p-blue-600:#1a5fcc;  --p-blue-100:#dce8fd;
  --p-purple-500:#8a5af0; --p-purple-600:#7546dc;--p-purple-100:#e7dcfd;
  --p-ribbon-900:#481878; --p-ribbon-800:#3a1160;--p-ribbon-300:#a860c0;
  --p-grad-cyan:#33dbe0; --p-grad-sky:#17a9da; --p-grad-violet:#8a6cf0; --p-grad-magenta:#d84a98;
  --p-neutral-0:#ffffff;  --p-neutral-50:#fafaf6; --p-neutral-100:#edece5;
  --p-neutral-200:#dedad0;--p-neutral-300:#c7c2b4;--p-neutral-400:#a8a395;
  --p-neutral-500:#6e695e;--p-neutral-600:#524f43;--p-neutral-700:#3d3a33;
  --p-neutral-800:#2a2a24;--p-neutral-900:#04050a;
  --p-success-600:#1e7a4b; --p-success-100:#dcf0e5;
  --p-warning-600:#96591b; --p-warning-100:#fbebd8;
  --p-danger-600:#b5322a;  --p-danger-100:#fbe3e1;

  /* ---- semantic colour ---- */
  --color-canvas:var(--p-white-warm);
  --color-surface:var(--p-white-paper);
  --color-ink:var(--p-ink-900);
  --color-ink-soft:var(--p-ink-700);
  --color-ink-hover:var(--p-ink-800);
  --color-ink-inverse:var(--p-white-pure);
  --color-line:var(--p-line-200);
  --color-line-strong:var(--p-neutral-300);
  --color-focus:var(--p-purple-500);
  --color-link:var(--p-blue-600);
  --color-disabled-surface:var(--p-line-200);
  --color-disabled-ink:var(--p-neutral-400);
  --color-success:var(--p-success-600);
  --color-warning:var(--p-warning-600);
  --color-danger:var(--p-danger-600);

  /* ---- accent: default mode is Yellow. Set data-accent on a section to change it. ---- */
  --accent-fill:var(--p-yellow-500);
  --accent-ink:var(--p-ink-900);
  --accent-soft:var(--p-yellow-100);
  --accent-pressed:var(--p-yellow-600);
  --color-accent:var(--accent-fill);
  --color-accent-ink:var(--accent-ink);
  --color-accent-soft:var(--accent-soft);
  --color-accent-pressed:var(--accent-pressed);

  /* ---- spacing ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px; --space-11:192px;

  /* ---- grid ---- */
  --grid-columns:12;
  --grid-gutter-lg:32px; --grid-gutter-md:24px; --grid-gutter-sm:16px;
  --grid-margin-lg:80px; --grid-margin-md:48px; --grid-margin-sm:20px;

  /* ---- radius. Semantic, not sizes. Pick by what the thing IS. ---- */
  --radius-none:0px; --radius-sm:2px; --radius-md:4px; --radius-lg:8px;
  --radius-control:12px; --radius-media:14px; --radius-field:16px;
  --radius-card:20px; --radius-full:999px;

  --rule-hairline:1px;
  --focus-ring:2px; --focus-offset:3px;

  /* ---- control geometry ---- */
  --control-height-sm:32px; --control-height-md:40px; --control-height-lg:52px;
  --control-pad-x-sm:14px;  --control-pad-x-md:18px;  --control-pad-x-lg:26px;
  --control-gap-sm:6px;     --control-gap-md:8px;     --control-gap-lg:10px;
  --control-icon-sm:15px;   --control-icon-md:18px;   --control-icon-lg:22px;
  --field-height-sm:44px;   --field-height-md:54px;   --field-height-lg:212px;
  --field-radius-sm:12px;   --field-radius-md:16px;   --field-radius-lg:34px;
  --field-pad-l-sm:14px;    --field-pad-l-md:18px;    --field-pad-l-lg:48px;
  --send-size-sm:32px;      --send-size-md:40px;      --send-size-lg:94px;
  --send-radius-sm:10px;    --send-radius-md:12px;    --send-radius-lg:22px;
  --mic-size-sm:18px;       --mic-size-md:22px;       --mic-size-lg:34px;

  /* ---- type ---- */
  --type-family-display:"Oswald",sans-serif;
  --type-family-body:"Geist",system-ui,sans-serif;
  --type-family-pixel:"Geist Pixel",monospace;
  --type-family-mono:"Geist Mono",ui-monospace,monospace;
  --type-family-serif:"Fraunces",Georgia,serif;

  --type-size-display-0:112px; --type-size-display-1:76px; --type-size-display-2:56px;
  --type-size-display-3:38px;  --type-size-display-4:34px; --type-size-title:26px;
  --type-size-lead:21px;       --type-size-body-lg:19px;   --type-size-body:17px;
  --type-size-small:16px;      --type-size-label:13px;
  --type-size-hook:64px;       --type-size-stat:56px;
  --type-measure:62ch;

  --type-weight-display-0:400; --type-weight-display-1:500; --type-weight-display-2:400;
  --type-weight-display-3:400; --type-weight-display-4:200; --type-weight-title:400;
  --type-weight-lead:400;      --type-weight-body:400;      --type-weight-body-strong:500;
  --type-weight-small:400;     --type-weight-label:500;

  --type-ls-display-3:0.4px; --type-ls-title:0.4px; --type-ls-label:1.4px; --type-ls-stat:1px;

  /* ---- motion ---- */
  --motion-fast:160ms; --motion-base:240ms; --motion-slow:400ms; --motion-reveal:700ms;
  --motion-stagger:60ms;
  --motion-ease:cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-inout:cubic-bezier(0.65, 0, 0.35, 1);
}

/* Accent is a MODE, not a value. Never reach for a specific accent colour. */
[data-accent="yellow"]{
  --accent-fill:var(--p-yellow-500); --accent-ink:var(--p-ink-900);
  --accent-soft:var(--p-yellow-100); --accent-pressed:var(--p-yellow-600);
}
[data-accent="blue"]{
  --accent-fill:var(--p-blue-500);   --accent-ink:var(--p-ink-900);
  --accent-soft:var(--p-blue-100);   --accent-pressed:var(--p-blue-600);
}
[data-accent="purple"]{
  --accent-fill:var(--p-purple-600); --accent-ink:var(--p-white-pure);
  --accent-soft:var(--p-purple-100); --accent-pressed:var(--p-ribbon-900);
}

/* ---- PENDING FIGMA · added 2026-09-07 ------------------------------------------------
 * These values existed only inside built pages (TPL-02 reference / concept, TPL-01 reference)
 * and were flagged as token gaps (open-actions L4, and the 29 --gap-* properties in the
 * gate-passed TPL-01 build). They are bound here so the single-file spec reproduces without
 * the HTML. Mirror them into the Figma collections (Primitives / Color / Spacing / Motion),
 * then regenerate with tokens-pull.mjs and delete this block. Until then, tokens-pull.mjs
 * must re-emit it — see the PENDING section of tokens.json.
 * ------------------------------------------------------------------------------------ */
:root{
  /* reel primitives (TPL-02 Travelling Reel) */
  --p-reel-yellow:#ffe616; --p-lilac-300:#c6acff; --p-sky-200:#a9dcef; --p-rose-200:#f3b9d3;
  --p-plum-600:#8b4888;    --p-coral-400:#e8757a; --p-ink-warm-900:#1a1815;
  --p-grey-800:#343434;    --p-grey-500:#6d6d6d;

  /* reel semantics */
  --reel-field:var(--p-reel-yellow);          /* the yellow field the reel travels across */
  --reel-claim-ink:var(--p-ink-warm-900);
  --reel-block-purple:var(--p-lilac-300);     /* block grounds, cycling in this order */
  --reel-block-sky:var(--p-sky-200);
  --reel-block-paper:var(--p-white-pure);
  --reel-block-rose:var(--p-rose-200);
  --reel-lens:var(--p-plum-600);              /* the iris, flat — never the drawn gradient */
  --reel-lens-edge:var(--p-coral-400);
  --reel-menu-rule:var(--p-grey-800);         /* mega-menu hairlines on ink */
  --reel-menu-muted:var(--p-grey-500);
  --reel-column-w:37.27vw;                    /* rest width of the block column */
  --reel-block-w-max:66vw;                    /* taken-over width; never wider */
  --reel-lens-size:clamp(20px,1.97vw,34px);
  --reel-pad:clamp(20px,5.56vw,140px);

  /* rd-engine + NAV-01 geometry (formerly --gap-* in the TPL-01 build) */
  --rail-w:64px; --rail-pad:var(--space-7); --rail-pad-open:var(--space-6);
  --control-hit:40px; --control-icon:24px; --control-stroke:2; --control-menu-mid:0.636;
  --hdr-h-sm:76px; --hdr-h-md:84px; --hdr-h-lg:104px; --hdr-h-xl:124px; --hdr-h-xxl:140px;
  --sheet-row-size:64px; --sheet-row-ls:0.64px; --sheet-chip-w:92px; --sheet-chip-aspect:1.753;
  --agent-pill-h:46px; --agent-inset:5px; --agent-ring:1.5px;
  --agent-glow-blur:15px; --agent-glow-blur-hover:16px; --agent-pulse:3.6s;
  --ledger-figure-col:11rem; --measure-long:68ch;
  /* agent control (button-agent · nav-sheet spec): the ring and the glow are one gradient */
  --agent-gradient:linear-gradient(30.36deg, var(--p-grad-sky) 13.4%, var(--p-grad-violet) 50%, var(--p-grad-magenta) 86.6%);
  --agent-ring-edge:var(--p-grad-cyan); --agent-glow-opacity:0.15; --agent-glow-opacity-hover:0.30;
  --agent-send:var(--p-grad-sky);
  --reel-tail-w:34vw; --reel-scrub-h:2px;

  /* motion gaps (design.md §11 and the sheet ladder) */
  --rise-ladder:26px; --blur-ladder:6px; --blur-word:7px;
  --stagger-sheet:130ms; --hold-sheet:120ms;
  --stagger-word:115ms; --stagger-word-body:30ms; --stagger-word-claim:70ms;
  --word-resolve:800ms; --reveal-line:82vh;

  /* pause strip (design.md §11) */
  --strip-pad:clamp(26px,5.6vh,68px); --strip-size:clamp(20px,3.2vw,64px);
  --strip-ls:-0.028em; --strip-run:0.34;

  /* breakpoints have no token home in CSS (custom properties cannot be used in a media
     query condition); they are recorded here as the values the system uses: 40em · 64em · 1024 · 1080 */
  --bp-note:"40em 64em 1024px 1080px";
}