/* ═══════════════════════════════════════════
   graduation-glow-v2 — design tokens
   Palette:    midnight-rose            (_shared/tokens/palettes.json, ground: dark)
   Typography: playfair-outfit-pinyon   (_shared/tokens/typography.json)
   Easings:    expo-out · breath · stage · drift · silk (_shared/tokens/easings.json)

   Mirrors _shared/css/tokens-base.css. Every colour below is a palette
   token or an rgba() of one; nothing is invented. The "gold" of this film
   is the amber family (accent-warm-*) over midnight, with text-primary as
   the white-hot core of every light. Rose / celestial accents stay off
   copy surfaces (family register); they survive only as warm fringe.
   ═══════════════════════════════════════════ */

:root {
    color-scheme: dark;

    /* ───── Palette: midnight-rose, verbatim ───── */
    --void: #050511;
    --bg-primary: #0c1222;
    --bg-elevated: #101830;

    --accent-warm: #e8a87c;
    --accent-warm-bright: #f2c4a0;
    --accent-warm-deep: #c48a60;

    --accent-rose: #d4a0a0;
    --accent-soft: #e8c4c4;
    --accent-celestial: #f0b4c8;

    --text-primary: #faf0e6;
    --text-secondary: #d8cfc4;

    --wine: #4a1942;
    --sage: #7ec8a0;
    --ember: #e06050;
    --spark: #f2c4a0;

    /* ───── Glow + glass (derived from this palette) ───── */
    --accent-warm-glow: rgba(232, 168, 124, 0.45);      /* accent-warm */
    --accent-warm-glow-soft: rgba(232, 168, 124, 0.15);
    --glass: rgba(12, 18, 34, 0.58);                     /* bg-primary */
    --glass-border: rgba(232, 168, 124, 0.14);
    --glass-border-hover: rgba(232, 168, 124, 0.38);

    /* ───── The night sky (stage background) ───── */
    --sky-zenith: var(--void);
    --sky-mid: var(--bg-primary);
    --sky-horizon-glow: rgba(196, 138, 96, 0.16);        /* accent-warm-deep, low on the horizon */
    --sky-wine-haze: rgba(74, 25, 66, 0.26);             /* wine, the far upper haze */
    --aurora-horizon: rgba(196, 138, 96, 0.20);          /* main.css: replaces aurora-blob-2's rose gradient */
    --scrim: rgba(5, 5, 17, 0.72);                       /* void, behind the overture card */

    /* ───── Light: halo, name, flash ───── */
    --halo: rgba(242, 196, 160, 0.22);                   /* accent-warm-bright */
    --halo-far: rgba(232, 168, 124, 0.08);
    --light-core: rgba(250, 240, 230, 0.95);             /* text-primary, the white-hot centre */
    --name-shadow: 0 0 26px rgba(232, 168, 124, 0.55), 0 0 2px rgba(250, 240, 230, 0.9);
    --name-shadow-settled: 0 0 34px rgba(232, 168, 124, 0.7), 0 0 80px rgba(196, 138, 96, 0.3), 0 0 2px rgba(250, 240, 230, 1);
    --name-shadow-flare: 0 0 44px rgba(250, 240, 230, 1), 0 0 120px rgba(232, 168, 124, 0.7), 0 0 2px #faf0e6;
    --flash-core: rgba(250, 240, 230, 0.95);
    --flash-mid: rgba(232, 168, 124, 0.45);

    /* ───── Gilt: plaques, hairlines, the script gradient ───── */
    --gilt-line: rgba(232, 168, 124, 0.28);
    --gilt-line-strong: rgba(242, 196, 160, 0.6);
    --gilt-gradient: linear-gradient(100deg, #c48a60 0%, #f2c4a0 42%, #faf0e6 52%, #e8a87c 100%);
    --plaque-fill: linear-gradient(180deg, rgba(16, 24, 48, 0.62), rgba(5, 5, 17, 0.6));
    --plaque-inset: inset 0 1px 0 rgba(242, 196, 160, 0.18), 0 10px 30px rgba(5, 5, 17, 0.45);

    /* ───── Photos (the-years, years-in-order, finale mosaic) ───── */
    --frame: rgba(242, 196, 160, 0.55);                  /* 1px gilt hairline hugging the image's real ratio */
    --frame-shadow: 0 18px 40px rgba(5, 5, 17, 0.6), 0 0 28px rgba(232, 168, 124, 0.18);
    --photo-star-glow: 0 0 14px 3px rgba(242, 196, 160, 0.55);

    /* ───── The path (years-in-order) ───── */
    --slot-empty: rgba(216, 207, 196, 0.22);             /* text-secondary, an unlit star */
    --slot-lit: var(--accent-warm-bright);
    --thread: rgba(242, 196, 160, 0.75);                 /* the gold line between lit years */
    --chime-ring: rgba(250, 240, 230, 0.7);

    /* ───── The letter: gold ink on midnight stationery ───── */
    --paper: var(--bg-elevated);
    --paper-edge: rgba(232, 168, 124, 0.18);
    --paper-glow: 0 30px 80px rgba(5, 5, 17, 0.7), 0 0 60px rgba(232, 168, 124, 0.1);
    --ink: var(--accent-warm-bright);
    --ink-glow: rgba(242, 196, 160, 0.35);
    --nib: var(--text-primary);
    --seal: var(--accent-warm-deep);

    /* ───── Controls ───── */
    --btn-fill: linear-gradient(135deg, #f2c4a0, #e8a87c 50%, #c48a60);
    --btn-ink: var(--void);
    --btn-shadow: 0 10px 34px rgba(232, 168, 124, 0.35), inset 0 1px 0 rgba(250, 240, 230, 0.5);
    --focus-ring: var(--accent-warm-bright);

    /* ───── Typography: playfair-outfit-pinyon ───── */
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-body: 'Outfit', 'Segoe UI', sans-serif;
    --font-script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;

    /* ───── Easings ───── */
    --ease-silk: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);  /* declared for the contract; unused (no overshoot on chrome) */
    --ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-snap: cubic-bezier(0.5, 0, 0.5, 1);
    --ease-drift: cubic-bezier(0.4, 0, 0.6, 1);
    --ease-stage: cubic-bezier(0.83, 0, 0.17, 1);
}

/* ReveelHero palettes (0-255 triples, set in JS — listed here so they stay in step):
   LIGHT  (nameAssemble, lightDissolve): [250,240,230] [242,196,160] [232,168,124] [196,138,96]
   BURST  (goldBurst):                  LIGHT + [224,96,80]  (ember, for heat at the core)
   BOKEH  (bokehField):                 [232,168,124] [242,196,160] [216,207,196] [196,138,96]  */