/* ═══════════════════════════════════════════ best-boyfriend — design tokens Palette: oxblood-gilt (EXTENSION: not in _shared/tokens/palettes.json; ground: dark) Typography: playfair-outfit-pinyon (_shared/tokens/typography.json) Easings: expo-out · breath · stage · snap · drift · silk · back-out (the No only) (_shared/tokens/easings.json) Mirrors _shared/css/tokens-base.css. The 15 palette tokens below are the one documented extension; they follow the same vocabulary and clear the same audits as every shared palette (__tests__/lib/palette-contrast.test.ts): ground dark; text-primary and text-secondary AA on bg-primary; accent-warm, accent-celestial and sage AA on bg-primary; spark lighter than bg-primary. Ratios are in concept.md. Every other colour below is a palette token or an rgba() of one; nothing else is invented. The world: oxblood ground, gold wax and foil, cream paper (text-primary doubles as the paper colour), claret (wine) for the envelope and rosette, blush (accent-rose) for the mischief only. ═══════════════════════════════════════════ */ :root { color-scheme: dark; /* ───── Palette: oxblood-gilt (extension) ───── */ --void: #160509; /* the room's edge, the dark under every object */ --bg-primary: #320d16; /* oxblood: the ground */ --bg-elevated: #461523; /* the lit pool at the room's centre; the certificate's face */ --accent-warm: #e2b155; /* gold: wax, foil, hairlines */ --accent-warm-bright: #f6dc9a; /* gold light: glints, bursts, ink glow */ --accent-warm-deep: #b8862f; /* gold in shadow: wax rim, foil shade */ --accent-rose: #e89aa8; /* blush: the No, the bokeh's flirt. Never body copy */ --accent-soft: #f3cdd2; /* contract only: not rendered */ --accent-celestial: #f5e3b4; /* champagne: envelope lining, stars */ --text-primary: #f9eedb; /* cream: copy on the ground, and the paper itself */ --text-secondary: #dcc8b0; /* quiet cream: hints, fine print */ --wine: #8e2438; /* claret: envelope body, rosette ribbons, redeemed stamp, script on paper */ --sage: #93c6a0; /* contract only: not rendered */ --ember: #ee6a45; /* the wax's heat as the seal warms */ --spark: #f6dc9a; /* motes and glints: lighter than the ground */ /* ───── Glow + glass (derived from this palette) ───── */ --accent-warm-glow: rgba(226, 177, 85, 0.45); /* accent-warm */ --accent-warm-glow-soft: rgba(226, 177, 85, 0.15); --glass: rgba(50, 13, 22, 0.58); /* bg-primary */ --glass-border: rgba(226, 177, 85, 0.16); --glass-border-hover: rgba(226, 177, 85, 0.40); /* ───── The room: a lit table in a deep red dark ───── */ --room-pool: var(--bg-elevated); /* centre of the stage's radial */ --room-mid: var(--bg-primary); --room-edge: var(--void); --room-gold-light: rgba(226, 177, 85, 0.14); /* warm light on the table */ --room-claret-haze: rgba(142, 36, 56, 0.30); /* wine, the far haze */ --lamp-cone: rgba(246, 220, 154, 0.16); /* accent-warm-bright: the lamp over the letter and the award */ --lamp-cone-narrow: rgba(246, 220, 154, 0.26); --scrim: rgba(22, 5, 9, 0.72); /* void */ /* aurora.css hard-codes a purple haze, a pink glow and a navy haze. main.css replaces all three blob gradients with these (same pattern as graduation-glow-v2). */ --aurora-gold: rgba(226, 177, 85, 0.30); /* blob-1: the key light */ --aurora-claret: rgba(142, 36, 56, 0.34); /* blob-3: the far haze */ --aurora-blush: rgba(232, 154, 168, 0.16); /* blob-2: a breath of flirt, low and right */ --aurora-deep: rgba(22, 5, 9, 0.30); /* the blobs' outer stop */ /* ───── Light: halo, name, flash ───── */ --light-core: rgba(249, 238, 219, 0.95); /* text-primary, the white-hot centre */ --halo: rgba(246, 220, 154, 0.22); --halo-far: rgba(226, 177, 85, 0.08); --name-shadow: 0 0 26px rgba(226, 177, 85, 0.55), 0 0 2px rgba(249, 238, 219, 0.9); --name-shadow-settled: 0 0 34px rgba(226, 177, 85, 0.7), 0 0 80px rgba(184, 134, 47, 0.32), 0 0 2px rgba(249, 238, 219, 1); --name-shadow-flare: 0 0 44px rgba(249, 238, 219, 1), 0 0 120px rgba(226, 177, 85, 0.7), 0 0 2px #f9eedb; --flash-core: rgba(249, 238, 219, 0.95); --flash-mid: rgba(226, 177, 85, 0.45); /* ───── Foil: hairlines, borders, the gold of lettering ───── */ --foil-line: rgba(226, 177, 85, 0.55); /* 1px foil border on envelope and certificate */ --foil-line-soft: rgba(226, 177, 85, 0.28); --foil-line-strong: rgba(246, 220, 154, 0.7); --foil-gradient: linear-gradient(100deg, #b8862f 0%, #f6dc9a 42%, #f9eedb 52%, #e2b155 100%); --plaque-fill: linear-gradient(180deg, rgba(70, 21, 35, 0.66), rgba(22, 5, 9, 0.62)); --plaque-inset: inset 0 1px 0 rgba(246, 220, 154, 0.2), 0 10px 30px rgba(22, 5, 9, 0.5); /* ───── The envelope (the-question exit, the-seal, three-gifts, the-letter, finale) ───── */ --envelope-body: linear-gradient(160deg, #8e2438 0%, #461523 100%); /* wine to bg-elevated */ --envelope-flap: linear-gradient(200deg, #8e2438 0%, #461523 100%); /* wine to bg-elevated, lit from the other side */ --envelope-lining: linear-gradient(180deg, #f5e3b4 0%, #e2b155 100%); /* accent-celestial to accent-warm */ --envelope-edge: rgba(246, 220, 154, 0.55); --envelope-shadow: 0 30px 60px rgba(22, 5, 9, 0.7), 0 0 60px rgba(226, 177, 85, 0.12); /* ───── Continuity geometry (orchestrator, Phase C) ───── The envelope, its seal and the three gifts appear in more than one beat, and each beat draws its own copy inside its own
. Every copy lays out from these values, as positions within its section, so a screen swap at a beat boundary is invisible. The camera moves every section together, so the same coordinates are the same place on screen. */ --env-w: min(76vw, 340px, 46svh); /* envelope width */ --env-h: calc(var(--env-w) * 0.66); /* envelope height */ --env-x: 50%; /* envelope centre, across the section */ --env-y: 60%; /* envelope centre, down the section */ --flap-depth: 56%; /* the closed flap's tip, down from the envelope's top edge */ --seal-d: calc(var(--env-w) * 0.24); /* seal diameter; its centre sits on the flap's tip */ --gift-w: calc(var(--env-w) * 0.34); /* each wrapped gift, square */ --gift-spread: calc(var(--env-w) * 0.38); /* the side gifts' centres sit this far left and right of --env-x */ --gift-rise: calc(var(--env-h) * 0.98); /* the side gifts' centres sit this far above --env-y */ --gift-rise-mid: calc(var(--env-h) * 1.18); /* the middle gift sits higher: a loose arc */ --letter-peek: calc(var(--env-h) * 0.14); /* the letter's cream edge showing above the open mouth */ /* ───── The wax seal: gold wax that warms to a coal, then cracks ───── */ --wax-gold: radial-gradient(circle at 36% 30%, #f6dc9a 0%, #e2b155 40%, #b8862f 100%); --wax-warm: radial-gradient(circle at 40% 34%, #f6dc9a 0%, #ee6a45 62%, #b8862f 100%); --wax-hot: radial-gradient(circle at 50% 50%, #f9eedb 0%, #f6dc9a 28%, #ee6a45 72%); --wax-rim: inset 0 -6px 10px rgba(22, 5, 9, 0.38), inset 0 3px 5px rgba(246, 220, 154, 0.55); --seal-glow: 0 0 40px rgba(238, 106, 69, 0.55); /* ember, as the hold warms it */ --crack-light: rgba(249, 238, 219, 0.95); /* light leaking through the cracks */ --ray: rgba(246, 220, 154, 0.55); /* the envelope's mouth, at the break */ --ring-track: rgba(226, 177, 85, 0.25); /* the hold ring's empty track */ --ring-fill: var(--accent-warm-bright); --chime-ring: rgba(249, 238, 219, 0.7); /* ───── Paper: the cream objects (letter, strips, coupons, reason cards) ───── */ --paper: var(--text-primary); --paper-shade: rgba(184, 134, 47, 0.20); /* accent-warm-deep, at the edges: aged, not glaring */ --paper-edge: rgba(184, 134, 47, 0.35); --paper-rule: rgba(184, 134, 47, 0.18); /* the letter's lines */ --paper-shadow: 0 30px 80px rgba(22, 5, 9, 0.7), 0 0 60px rgba(226, 177, 85, 0.10); --ink: var(--bg-primary); /* oxblood ink on cream: 15.2:1 */ --ink-soft: rgba(50, 13, 22, 0.78); --ink-script: var(--wine); /* salutation, signature, numerals: 7.4:1 on cream */ --nib-glow: rgba(226, 177, 85, 0.55); /* the pen's warm spot while the letter writes */ /* ───── Photo-booth strips (three-gifts) ───── */ --strip-frame: rgba(50, 13, 22, 0.92); /* bg-primary, behind each photo */ --strip-flash: rgba(249, 238, 219, 0.95); /* the booth's flash, per frame */ /* ───── Love coupons (three-gifts) ───── */ --coupon-perf: rgba(50, 13, 22, 0.35); /* the perforation */ --coupon-stamp: var(--wine); /* REDEEMED, in claret ink */ --coupon-stamp-ring: rgba(142, 36, 56, 0.8); --coupon-redeemed-glow: 0 0 24px rgba(226, 177, 85, 0.35); /* ───── Reasons garland (reasons, then the wreath) ───── */ --thread: rgba(246, 220, 154, 0.8); /* the gold line the cards hang from */ --peg: var(--accent-warm); --peg-glow: 0 0 12px 3px rgba(246, 220, 154, 0.6); /* ───── The certificate (the-award): oxblood and foil, so gold light reads on it ───── */ --cert-fill: linear-gradient(180deg, #461523 0%, #320d16 100%); /* bg-elevated to bg-primary */ --cert-border: var(--foil-line); --cert-ink: var(--text-secondary); --cert-shadow: 0 40px 90px rgba(22, 5, 9, 0.75), 0 0 70px rgba(226, 177, 85, 0.16); --rosette: radial-gradient(circle at 40% 34%, #f6dc9a 0%, #e2b155 46%, #b8862f 100%); --rosette-ribbon: linear-gradient(180deg, #8e2438, #461523); /* wine to bg-elevated */ /* ───── The No (the-question): blush, never gold ───── */ --no-ink: var(--accent-rose); /* 8.0:1 on the ground */ --no-outline: rgba(232, 154, 168, 0.7); --no-fill: rgba(232, 154, 168, 0.10); /* ───── Controls ───── */ --btn-fill: linear-gradient(135deg, #f6dc9a, #e2b155 50%, #b8862f); --btn-ink: var(--void); /* 10.1:1 on accent-warm */ --btn-shadow: 0 10px 34px rgba(226, 177, 85, 0.35), inset 0 1px 0 rgba(249, 238, 219, 0.5); --btn-ghost-border: rgba(226, 177, 85, 0.45); --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); /* the No's dodge landing ONLY; never on a pressable control */ --ease-breath: cubic-bezier(0.45, 0, 0.55, 1); --ease-snap: cubic-bezier(0.5, 0, 0.5, 1); /* stamps (the rosette, the coupon, the finale's seal) and the tear */ --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): GOLD (nameAssemble): [249,238,219] text-primary · [246,220,154] accent-warm-bright · [226,177,85] accent-warm · [184,134,47] accent-warm-deep BURST (goldBurst): GOLD + [238,106,69] ember (heat at the core) + [232,154,168] accent-rose (a pinch of blush: mischief) BOKEH (bokehField): [226,177,85] · [246,220,154] · [232,154,168] accent-rose · [220,200,176] text-secondary · [184,134,47] */