/* ==========================================================================
   Design tokens
   Values mirror the shipped app's palette (popcue-app/src/theme/colors.ts)
   so the marketing site and the product read as one thing.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --indigo:        #654CF4;
  --indigo-deep:   #4B3AC0;
  --indigo-lift:   #8B77FF;
  --indigo-tint:   #ECE8FD;
  --charcoal:      #0E0A20;
  --charcoal-2:    #171130;
  --charcoal-3:    #241B47;
  --amber:         #F4CB3D;
  --amber-soft:    #FFE9A8;
  /* Amber is far too light to carry text on a pale surface (it measured
     1.5:1 on the tint). This is the same hue, dark enough to be legible. */
  --amber-deep:    #8A6A00;
  /* Text on the amber-soft tint. --amber-deep measures 4.2:1 there, which
     misses AA for the small bold labels that sit on it; this is 5.6:1. */
  --amber-ink:     #735800;
  --sage:          #66C79E;
  --sage-strong:   #2F6B52;
  --sage-tint:     #DFF3EA;

  /* The interrupt overlay's own gradient (popcue-app InterruptScreen), used
     for every charcoal stage on the site so they read as one surface. */
  --stage: linear-gradient(160deg, #241A54 0%, #150F3A 45%, #0E0A20 80%);

  /* --- Neutrals (warm, never clinical) ---------------------------------- */
  --bg:            #F5F4F0;
  --bg-warm:       #FAF9F5;
  --surface:       #FFFFFF;
  --ink:           #14101F;
  --ink-soft:      #5B5568;
  /* 4.96:1 on --bg-warm. The previous #8E8799 measured 3.29:1 and failed WCAG
     AA on nineteen elements — every eyebrow, table header and small-print
     line on the page. Secondary text still has to be readable. */
  --ink-faint:     #6F6A7C;
  --line:          #E5E1DC;
  --line-strong:   #D3CDC4;

  --on-dark:       #F3F1FA;
  --on-dark-soft:  #ADA6C6;
  /* 5.5:1 on --charcoal. The previous #6E6689 measured 3.62:1 and failed
     WCAG AA for the footer and the demo's status line, both of which carry
     real content rather than decoration. */
  --on-dark-faint: #8F88AB;

  /* --- Type ------------------------------------------------------------- */
  --font-sans: 'Plus Jakarta Sans', 'Jakarta Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Lora', 'Lora Fallback', ui-serif, Georgia, 'Times New Roman', serif;

  /* Fluid scale — clamp(min, preferred, max). `vw` only below 1200px so the
     largest sizes stop growing on ultrawide monitors. */
  /* Sized so "Start remembering." fits on ONE line beside the visual.
     "remembering." is a single unbreakable word, and at a 1320px hero wrap
     the copy column is ~640px — anything above ~4.35rem overflows it, and
     `overflow-wrap` then breaks the word mid-syllable, which is worse than
     a slightly smaller headline. */
  --fs-display: clamp(2.4rem, 0.9rem + 3.6vw, 4.35rem);
  --fs-h2:      clamp(2rem, 1.05rem + 3.5vw, 3.75rem);
  --fs-h3:      clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-lede:    clamp(1.0625rem, 0.99rem + 0.42vw, 1.3125rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;
  --fs-eyebrow: 0.6875rem;

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-normal:1.55;
  --lh-loose: 1.7;

  --tracking-eyebrow: 0.16em;
  --tracking-tight:  -0.028em;
  --tracking-display:-0.038em;

  /* --- Space ------------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;
  --sp-10: 7rem;
  /* Section rhythm. Was 11rem, applied as padding-block on every act, which
     is 352px of empty space per section and 4,576px across thirteen of them:
     22% of the page. 6.5rem still reads as a considered break between acts
     without the reader wondering whether something failed to load. */
  --sp-11: clamp(3.5rem, 1.9rem + 4vw, 6.5rem);

  /* --- Layout ----------------------------------------------------------- */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);
  --header-h: 68px;
  /* The header's rendered height including any notch inset. Anything that
     has to clear the header — scroll-padding, the hero's top padding, the
     scenes' height caps — uses this, not --header-h. */
  --header-total: calc(var(--header-h) + env(safe-area-inset-top));

  /* --- Shape ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(20, 16, 31, 0.05), 0 2px 6px rgba(20, 16, 31, 0.04);
  --sh-md: 0 2px 4px rgba(20, 16, 31, 0.05), 0 8px 24px rgba(20, 16, 31, 0.07);
  --sh-lg: 0 4px 8px rgba(20, 16, 31, 0.05), 0 24px 56px rgba(20, 16, 31, 0.11);
  --sh-glow: 0 0 0 1px rgba(101, 76, 244, 0.18), 0 20px 60px rgba(101, 76, 244, 0.24);
  --sh-dark: 0 2px 6px rgba(0, 0, 0, 0.3), 0 20px 60px rgba(0, 0, 0, 0.42);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;

  /* --- Layers ----------------------------------------------------------- */
  --z-canvas: 0;
  --z-content: 1;
  --z-header: 100;
  --z-skip: 200;
}