/* ============================================================================
   LOOP — Design Tokens · "Last Light / Poster Cinema" (v2.5, 2026-07-09)
   The single source of truth for every LOOP front-end surface.
   Import this first; build page-specific CSS on top of it. Never hard-code a
   brand hex in a page — reach for a token so one edit re-skins everything.

   v2.5 — type correction, per David: the editorial serif (Fraunces) read as
   "wedding invitation" site-wide and was retired the same day it shipped.
   Display voice is ANTON again — the wordmark face, uppercase, weight 400 —
   over the unchanged cinema structure (ink grounds, gold thread, letterbox
   motion). Rule of thumb: the motion is luxury, the lettering is poster.
   No italic display anywhere. Serif stack kept below for print use only —
   do NOT load or use it on web surfaces.
   Mirrored in workspace-root DESIGN.md — update both when a value changes.
   ============================================================================ */

:root {
  /* ---- Grounds — deep cinema ink (cool, never warm brown) ----------------- */
  --ink:      #0F1013;   /* page ground — the dark after the sun goes          */
  --ink-2:    #16181D;   /* raised surfaces: cards, tiers, inputs, quotes      */
  --ink-3:    #23262D;   /* hairline borders, inactive chrome                  */

  /* ---- Accents ------------------------------------------------------------ */
  --gold:        #CF9A4A;  /* THE sun, gone low — CTAs, rules, the one thread  */
  --gold-bright: #E4B665;  /* hover / small-text gold on dark                  */
  --rose:        #C96A78;  /* rare secondary (quote marks) — use sparingly     */
  --juniper:     #5E8F84;  /* quiet confirmations, badge fills                 */
  --juniper-text:#7FB3A6;  /* AA-safe juniper for SMALL text on dark           */

  /* ---- Text ---------------------------------------------------------------- */
  --chalk:     #F3EDE0;  /* primary light text / paper — warm screen chalk     */
  --chalk-dim: #BFB7A8;  /* secondary text — AA on ink and ink-2               */

  /* ---- Paper (the "paper moment", playbook §4) -----------------------------
     A section may invert to a light paper ground — a bright band between the ink
     ones (e.g. the site's "practice" band). Cool chalk family, NOT the retired
     warm "fresh coast"; same family as the SETUP-TONIGHT light theme. */
  --paper:            #D4CBB5;  /* light ground for a paper-band section — top of the band gradient (David: darker again; bands add a tiny gradient to #C6BCA4) */
  --ink-on-paper:     #16181D;  /* primary text on paper                        */
  --ink-on-paper-dim: #6B6357;  /* secondary text on paper (AA on paper)        */
  --gold-on-paper:    #986A1A;  /* the gold thread on paper (AA-safe on cream)  */

  /* ---- Semantic aliases (role > colour in page CSS) ------------------------ */
  --bg:       var(--ink);
  --surface:  var(--ink-2);
  --text:     var(--chalk);
  --text-dim: var(--chalk-dim);
  --accent:   var(--gold);
  --apricot:  var(--gold);        /* legacy alias — older surfaces keep working */
  --line:     rgba(243, 237, 224, 0.13);   /* chalk hairline — default border  */
  --line-strong: rgba(243, 237, 224, 0.28);
  --ink-veil: rgba(15, 16, 19, 0.55);      /* scrim over photos                */

  /* ---- Type (all free on Google Fonts) ------------------------------------- */
  --wordmark:'Anton', 'Arial Narrow', 'Oswald', sans-serif;   /* THE brand face */
  --display: var(--wordmark);     /* site display voice = Anton (v2.5)         */
  --serif:   'Fraunces', 'Playfair Display', Georgia, serif;  /* print only — never on web */
  --body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --step-hero:     clamp(5.2rem, 20vw, 15rem);   /* the hero LOOP only         */
  --step-wordmark: var(--step-hero);             /* legacy alias               */
  --step-h2:       clamp(2.3rem, 5.4vw, 4rem);
  --step-h3:       1.5rem;
  --step-body:     17.5px;
  --step-label:    0.74rem;
  --track-label:   0.22em;        /* mono eyebrow tracking                     */

  /* ---- Edges: hard, quiet ---------------------------------------------------*/
  --radius:        0;      /* buttons, cards, inputs — everything UI           */
  --radius-stamp:  26px;   /* app-icon / avatar mask ONLY (matches favicon)    */

  /* ---- Depth: hairlines and light, never blur-glow -------------------------- */
  --shadow-stamp:       4px 4px 0 var(--ink);    /* legacy (asset surfaces)    */
  --shadow-stamp-chalk: 4px 4px 0 var(--chalk);  /* legacy (asset surfaces)    */

  /* ---- Space scale — widescreen air ----------------------------------------- */
  --s-xs: 0.4rem;
  --s-sm: 0.8rem;
  --s-md: 1.2rem;
  --s-lg: 2rem;
  --s-xl: 3.2rem;
  --s-section: clamp(5.5rem, 12vh, 9rem);

  /* ---- Motion: slow reveals, decisive micro --------------------------------- */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);  /* expo-out                 */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur:           0.18s;   /* micro-interactions                              */
  --dur-reveal:    0.95s;   /* scroll reveals                                  */
  --dur-cinema:    1.15s;   /* the letterbox open                              */
}

/* Honour reduced-motion at the system level; pages must also guard their own
   transforms, parallax, and autoplaying movement. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; --dur-reveal: 0.001s; --dur-cinema: 0.001s; }
}