/* ============================================================================
   01-TOKENS.CSS — Design tokens (single source of truth)
   TRU LEGAL · "Fable / Cinematic" landing
   ----------------------------------------------------------------------------
   Every magic number in the original inline stylesheet was promoted to a named
   token here. Components must consume these variables, never raw hex/px values.
   Brand colors are taken verbatim from the client's live site (trulegal.net)
   and its source CSS (#1F1F31 ink, #FBF9FE paper).
   ========================================================================== */

:root {

  /* ---- Brand palette (from client) ------------------------------------- */
  --c-navy:        #16284E;   /* header/footer institutional navy            */
  --c-navy-black:  #070D1D;   /* cinematic night — darkest stage             */
  --c-blue:        #2273B8;   /* mid blue, used for the giant ghost numerals */
  --c-gold:        #F2B01E;   /* brand gold — the "light" of the film        */
  --c-paper:       #FBF9FE;   /* brand light token (verbatim from source)    */
  --c-ink:         #1F1F31;   /* brand dark token (verbatim from source)     */
  --c-mist:        #9FB0CC;   /* muted body text on dark                     */
  --c-credit-dim:  #5E6E8C;   /* lowest-emphasis credits text                */
  --c-credits-bg:  #04070F;   /* near-black footer stage                     */

  /* ---- Functional / alpha derivations ---------------------------------- */
  --c-gold-line:        rgba(242, 176, 30, 0.50);  /* CTA underlines        */
  --c-gold-hairline:    rgba(242, 176, 30, 0.14);  /* act dividers          */
  --c-gold-glow:        rgba(242, 176, 30, 0.45);  /* button hover halo     */
  --c-blue-ghost:       rgba(34, 115, 184, 0.13);  /* watermark numerals    */
  --c-paper-border:     rgba(251, 249, 254, 0.35); /* outlined "call" pill  */
  --c-dot-line:         rgba(159, 176, 204, 0.20); /* credit row separators */

  /* Scene veil gradient stops (kept as tokens so scenes can re-tint) */
  --veil-top:    rgba(7, 13, 29, 0.86);
  --veil-mid:    rgba(22, 40, 78, 0.55);
  --veil-bottom: rgba(7, 13, 29, 0.92);

  /* ---- Typography families --------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Archivo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ---- Fluid type scale (clamp: min / preferred / max) ------------------ */
  /* Each step is a self-contained clamp() so it works without a JS resizer. */
  --fs-giant:       clamp(3rem, 11vw, 9.5rem);    /* opening title          */
  --fs-display-xl:  clamp(2.4rem, 8vw, 7rem);     /* finale headline        */
  --fs-display-lg:  clamp(2.2rem, 7vw, 6rem);     /* prologue headline      */
  --fs-act-head:    clamp(2.4rem, 6.5vw, 5rem);   /* act h3                 */
  --fs-quote:       clamp(1.8rem, 4.6vw, 3.6rem); /* intertitle blockquote  */
  --fs-finale-tel:  clamp(1.6rem, 4.6vw, 2.8rem); /* finale phone           */
  --fs-numeral:     clamp(14rem, 38vw, 30rem);    /* ghost act numerals     */
  --fs-sub:         clamp(0.95rem, 1.4vw, 1.12rem);
  --fs-body:        1.02rem;
  --fs-fin:         2rem;
  --fs-kicker:      0.72rem;
  --fs-eyebrow:     0.70rem;   /* "presents"                                */
  --fs-meta:        0.78rem;
  --fs-micro:       0.66rem;   /* credit labels, cast, copyright            */
  --fs-cue:         0.62rem;

  /* ---- Weights ---------------------------------------------------------- */
  --fw-regular: 400;
  --fw-semi:    600;   /* display serif "bold" reads at 600                  */
  --fw-bold:    700;
  --fw-black:   800;   /* Archivo headings / logo / CTA                      */

  /* ---- Letter-spacing scale (tracking) --------------------------------- */
  --ls-tight:  0.01em;   /* big serif display                              */
  --ls-body:   0.06em;
  --ls-meta:   0.10em;
  --ls-label:  0.16em;
  --ls-kicker: 0.20em;
  --ls-wide:   0.28em;
  --ls-xwide:  0.40em;
  --ls-cinematic: 0.50em;  /* kicker / "End Credits"                        */
  --ls-max:    0.60em;     /* "presents"                                    */

  /* ---- Spacing scale (8px-ish rhythm, expressed in rem) ----------------- */
  --space-3xs: 0.4rem;
  --space-2xs: 0.7rem;
  --space-xs:  1rem;
  --space-sm:  1.4rem;
  --space-md:  2rem;
  --space-lg:  2.8rem;
  --space-xl:  3.4rem;
  --space-2xl: 5rem;

  /* ---- Containers / measure -------------------------------------------- */
  --container-wide: min(1200px, 90%);  /* scene content                    */
  --container-act:  min(960px, 86%);   /* act inner column                 */
  --container-narrow: 560px;           /* credits roll                     */
  --measure-sub:   54ch;
  --measure-act:   50ch;
  --measure-quote: 26ch;
  --measure-legal: 86ch;
  --gutter: 4%;                        /* page edge padding (hud, credits) */

  /* ---- Radii ------------------------------------------------------------ */
  --radius-pill: 99px;

  /* ---- Borders ---------------------------------------------------------- */
  --border-hairline: 1px solid var(--c-gold-hairline);
  --border-pill:     1px solid var(--c-paper-border);

  /* ---- Shadows / glows -------------------------------------------------- */
  --glow-cta: 0 0 50px var(--c-gold-glow);

  /* ---- Cinematic chrome dimensions ------------------------------------- */
  --progress-h: 3px;
  --letterbox-h: 4.5vh;        /* final height of the top/bottom bars       */
  --grain-opacity: 0.05;

  /* ---- Motion ----------------------------------------------------------- */
  --t-fast:   0.30s;
  --t-med:    0.35s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Z-index layer system (named, never inline) ---------------------- */
  --z-scene-bg:      0;
  --z-scene-veil:    1;
  --z-scene-content: 2;
  --z-scroll-cue:    3;
  --z-grain:        70;
  --z-letterbox:    80;
  --z-hud:          85;
  --z-progress:     90;

  /* ---- Breakpoints (reference only; media queries can't read vars) ------
     --bp-mobile: 760px
     --bp-tablet: 1024px
     Documented here so every file uses the same numbers.                  */
}