/* ============================================================================
   iziwerk — tokens.css  ·  Direction: "Terminal, warmed" (warm-dark)
   ----------------------------------------------------------------------------
   Single source of visual truth. Every component reads var(--token); there are
   NO one-off colors/sizes outside this file. Fonts are self-hosted (woff2) —
   see @font-face in main.css §0.
     Space Grotesk  — display + body + wordmark   (400/500/600/700)
     JetBrains Mono — labels / eyebrows / meta / terminal   (400/500/700)
   ========================================================================== */
:root{

  /* — COLOR (roles) — */
  --bg:#16130f;             /* page background; also = ink-on-accent + ::selection text  */
  --surface:#211c16;        /* raised panels: hero terminal, fix bg, cards               */
  --surface-2:#2b2418;      /* deepest insets: thread rows, stat tiles, chaos chips      */
  --surface-3:#3a3226;      /* decorative only: terminal traffic-light dots              */
  --ink:#f2ede3;            /* primary text, wordmark                                    */
  --muted:#8f8578;          /* secondary text, eyebrow bodies, meta                      */
  --border:#342b20;         /* 1px borders, dashed dividers                              */
  --accent:#efab5f;         /* amber — cursor-bar, CTAs, eyebrows, glows                 */
  --accent-strong:#f4913a;  /* amber hover (buttons, links)                              */
  --success:#8fc79a;        /* 100%, accepted/paid, positive terminal values            */
  --danger:#e8765a;         /* the "x", error math, "12 tabs open"                       */
  --on-accent:#16130f;      /* text on amber (= --bg)                                    */
  --focus:#efab5f;          /* :focus-visible ring                                       */

  /* derived tints / scrims (kept here so nothing hardcodes an alpha) */
  --accent-ring:rgba(239,171,95,.08);       /* 4px emphasis ring on accent cards        */
  --accent-glow:rgba(239,171,95,.16);       /* hero radial glow                         */
  --accent-glow-soft:rgba(239,171,95,.22);  /* icon/app corner glow                     */
  --accent-underline:rgba(239,171,95,.35);  /* .ln link underline                       */
  --nav-bg:rgba(22,19,15,.82);              /* sticky nav (= --bg @ 82%) + blur          */
  --scrim:rgba(15,13,10,.6);                /* mobile-menu scrim (#0f0d0a @ 60%)         */
  --pile-fade:rgba(22,19,15,.35);           /* chaos-pile bottom fade                    */
  --shadow-chip:0 8px 20px -12px rgba(0,0,0,.6);
  --shadow-card:0 30px 70px -30px rgba(0,0,0,.7);
  --shadow-hero:0 40px 80px -40px rgba(0,0,0,.7);

  /* — TYPE — families */
  --font-display:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; /* headings + body + wordmark */
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* labels/eyebrows/meta/terminal */

  /* scale — floors: body >=14 · button >=16 · title >=28 · hero >=22 (all satisfied) */
  --fs-hero:clamp(34px,5.6vw,60px);       /* h1                                         */
  --fs-display:clamp(34px,6.2vw,72px);    /* no-cut hero-scale h2                        */
  --fs-cta-title:clamp(30px,5.2vw,56px);  /* closing CTA heading                        */
  --fs-h2:clamp(28px,4.4vw,44px);         /* section titles                             */
  --fs-h2-lg:clamp(28px,4.6vw,46px);      /* problem title                              */
  --fs-lead:clamp(16px,2vw,19px);         /* hero subcopy                               */
  --fs-body:clamp(16px,1.8vw,19px);       /* body copy                                  */
  --fs-body-sm:15px;                      /* feature/tier body                          */
  --fs-h3:20px;                           /* feature-card title                         */
  --fs-h3-sm:18px;                        /* step title                                 */
  --fs-price:40px;                        /* pricing tier price                         */
  --fs-eyebrow:13px;                      /* mono section eyebrow                        */
  --fs-label:13px;                        /* mono labels                                */
  --fs-meta:13px;                         /* mono meta                                  */
  --fs-small:12px;                        /* mono small (>=12 floor)                    */
  --fs-terminal:13.5px;                   /* terminal body rows                         */
  --fs-btn:17px;                          /* hero/primary CTA                           */
  --fs-btn-sm:16px;                       /* nav CTA (>=16 button floor)                */
  --fs-nav:15px;                          /* nav links (>=14 body floor)                */

  /* weights */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* line-heights */
  --lh-tight:1.02; --lh-display:.98; --lh-snug:1.4; --lh-body:1.6; --lh-terminal:1.7;
  --lh-hero:1.02; --lh-lead:1.55;

  /* tracking */
  --track-tight:-.03em; --track-snug:-.02em; --track-loose:-.01em;
  --track-eyebrow:.1em; --track-eyebrow-hero:.06em; --track-label:.08em;

  /* — SPACE — */
  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;   --space-8:3rem;   --space-10:4rem; --space-12:6rem;
  --section-y:clamp(64px,9vw,120px);      /* section vertical rhythm                    */
  --gutter:clamp(24px,5vw,64px);          /* horizontal container padding               */
  --grid-gap:clamp(40px,5vw,72px);        /* 2-column section gap                       */
  --card-gap:16px;                        /* feature/step/pricing grid gap              */

  /* — RADII — */
  --radius-chip:9px; --radius-inset:10px; --radius-btn-sm:11px; --radius-btn:12px;
  --radius-tile:12px; --radius-card:16px; --radius-card-lg:18px; --radius-pill:20px;

  /* — MOTION (transform/opacity only; "precise & quiet — nothing bounces") — */
  --ease:cubic-bezier(.2,.6,.2,1);        /* the one easing                             */
  --dur-hover:180ms;                      /* hovers                                      */
  --dur-reveal:600ms;                     /* scroll reveals + hero entrance             */
  --dur-blink:1.05s;                      /* cursor-bar blink period                    */

  /* — LAYOUT — */
  --maxw:1200px; --maxw-narrow:1000px; --maxw-tight:900px;
  --nav-h:68px; --touch-min:44px; --z-nav:60; --z-drawer:80;
}

/* Reduced-motion keystone — collapse every duration to 0 so token-driven
   transitions self-neutralize. Entrance/keyframe motion is ALSO wrapped in
   @media (prefers-reduced-motion: no-preference) in main.css (belt + braces). */
@media (prefers-reduced-motion:reduce){
  :root{ --dur-hover:0ms; --dur-reveal:0ms; --dur-blink:0ms; }
}