/* =====================================================================
   Marquee · design tokens
   Kinetic type and colour blocking. Every section is one flat, saturated
   ground with its own ink; the type is the picture. Day is the default
   look. The [data-theme="dark"] "Night" block is opt-in (set it on <html>
   for after-dark brands); it never follows the system setting, because
   the colour blocks are the brand.
   Keep in sync with tokens.json (scripts/sync-tokens.mjs copies this file
   into template/css/tokens.css).
   ===================================================================== */
:root {
  color-scheme: light;

  /* ---- the four blocks, each with its own ink (measured AA pairs) ---- */
  --red: #ff3d2e;           /* hot block: hero, pricing. Always with --on-red */
  --on-red: #121013;        /* 5.4:1 on red. Never white (3.5:1) */
  --blue: #1d34ff;          /* cool block: counter, FAQ, cards */
  --on-blue: #f3efe6;       /* 6.1:1 on blue */
  --yellow: #ffe23d;        /* loud block: tapes, how it works, the close */
  --on-yellow: #121013;     /* 14.6:1 on yellow */
  --ink: #121013;           /* black block: intros, proof, footer */
  --on-ink: #f3efe6;        /* 16.5:1 on ink */

  /* ---- relief ---- */
  --chalk: #f3efe6;         /* the one quiet ground: FAQ, a stack card */
  --on-chalk: #121013;      /* 16.5:1 on chalk */

  /* ---- pops: a second colour used inside a block ---- */
  --pop-red: var(--yellow);    /* buttons and outlines on red */
  --pop-blue: var(--yellow);   /* yellow on blue 5.4:1 */
  --pop-yellow: var(--ink);
  --pop-ink: var(--yellow);    /* yellow on ink 14.6:1 */
  --pop-chalk: var(--red);     /* red on chalk 3.1:1: display type and fills only */

  /* ---- type ---- */
  --display: "Anybody", "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-h1: clamp(64px, 15.6vw, 236px);   /* fallback; js fits the widest line to the wrap */
  --fs-h2: clamp(48px, 9vw, 140px);
  --fs-mega: clamp(160px, 38vw, 560px);  /* the counter */
  --fs-ticker: clamp(56px, 9vw, 132px);
  --fs-card: clamp(44px, 8.2vw, 128px);
  --fs-lead: clamp(18px, 1.6vw, 22px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12.5px;
  --fs-wdth-rest: 118;      /* display width axis at rest (Anybody 50..150) */
  --fs-wdth-squash: 58;     /* width at full scroll speed or under the pointer */
  --fs-wght-rest: 860;      /* display weight at rest (100..900) */
  --fs-wght-squash: 380;    /* weight under the pointer */

  /* ---- space ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 72px; --s-9: 120px; --s-10: 168px;
  --wrap: 1360px;
  --gutter: 28px;

  /* ---- shape ---- */
  --r-0: 0px;               /* blocks and tapes: always square */
  --r-btn: 999px;           /* buttons, chips, stickers */
  --r-card: 28px;           /* stacked cards' top corners, plan cards */
  --r-sm: 14px;             /* FAQ rows, quote cards */
  --shadow-card: 0 -30px 60px -30px rgba(18, 16, 19, 0.45);  /* stacked card sliding over the last */
  --shadow-sticker: 0 10px 0 -2px rgba(18, 16, 19, 0.9);     /* stickers and featured plan: a hard drop */

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0.9, 0.1, 1);
  --spring: cubic-bezier(0.3, 1.8, 0.45, 0.85);     /* squishy buttons, stickers */
  --d-letter: 0.9s;         /* split-letter entrance, per letter */
  --d-stagger: 28ms;        /* between letters */
  --d-rise: 0.8s;           /* block reveals */
  --d-count: 1.6s;          /* the big number counting up */
}

/* Night: opt-in with <html data-theme="dark">. The quiet grounds go dark, blue
   deepens, red and yellow stay as the lights. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --blue: #1424c8;
  --on-blue: #f3efe6;
  --ink: #09080b;
  --chalk: #1a181e;
  --on-chalk: #f3efe6;
  --pop-chalk: var(--yellow);
}