/* ═══════════════════════════════════════════ birthday-scrapbook — design tokens Palette: gingham-cherry (EXTENSION: not in _shared/tokens/palettes.json; built on the sage-cream token vocabulary, ground: light) Typography: league-spartan-gaegu-great-vibes (_shared/tokens/typography.json, added for this template) Easings: expo-out · silk · snap · stage · breath · back-out (the caution sticker's slap ONLY) (_shared/tokens/easings.json) Mirrors _shared/css/tokens-base.css. The 15 palette tokens follow the same vocabulary as every shared palette, so gingham-cherry can be promoted into palettes.json later without changing a number. The ROOT block is the light scrapbook (pink gingham, blue gingham, cream and butter paper, ink): it is the palette that clears __tests__/lib/palette-contrast.test.ts as a light ground (bg-primary luminance 0.739 > 0.5; text-primary and text-secondary AA on bg-primary; accent-warm, accent-celestial and sage AA on bg-primary; spark lighter than the ground). The film alternates light grounds with deep-red ones, so the SAME 15 names are redefined under [data-ground="red"]. A beat's
(or the stage) sets data-ground="pink" | "blue" | "red" | "stripe". "pink" and "blue" use the root tokens; "red" (solid crimson) and "stripe" (cherry/pink knit stripes) use the red scope, whose bg-primary is crimson and whose text is cream-white. Ratios, which beat sits on which ground, and the rules for text on stripes are in concept.md. RULE for the stripe ground: its pink bands are too light for white text (2.95:1), so on "stripe" no text sits bare on the ground: every label and control sits on a --chip-crimson pill (white on it, 9.1:1), and card text sits on paper. ═══════════════════════════════════════════ */ :root { color-scheme: light; /* ───── Palette: gingham-cherry, light scope (pink and blue gingham beats) ───── */ --void: #fff8f4; /* the lightest paper white: tape, die-cut sticker borders */ --bg-primary: #f8d7df; /* blush: the mean of the pink gingham, the light ground */ --bg-elevated: #f0b6c6; /* the gingham's darker crossing */ --accent-warm: #b0102f; /* cherry: marks, sticker ink, links; 5.33:1 on bg-primary */ --accent-warm-bright: #bf1f3a; /* brighter cherry; 4.54:1 on bg-primary */ --accent-warm-deep: #7c0b22; /* oxblood: sticker shadow, halo, deep rim; 8.18:1 */ --accent-rose: #a8365a; /* raspberry: secondary ink mark; 4.72:1 */ --accent-soft: #e9a3b8; /* contract only / gingham band tint: never text */ --accent-celestial: #2b5fa8; /* denim blue: airmail blue, blue marks; 4.77:1 */ --text-primary: #2a1218; /* ink: 13.17:1 on bg-primary, 15.98:1 on cream paper */ --text-secondary: #6b2a3c; /* plum ink: hints, fine print; 7.80:1 on bg-primary */ --wine: #8a0f25; /* wine: ribbons, stamp ink; 7.25:1 on bg-primary */ --sage: #1f6a5a; /* teal: glitter-star teal, a mark; 4.83:1 */ --ember: #a63a14; /* burnt orange: glitter-star orange; 4.87:1 */ --spark: #fffaf5; /* glints and highlights: lighter than the ground (lum 0.962 vs 0.739) */ /* ───── Glow + glass (derived from this palette's accent-warm / paper) ───── */ --accent-warm-glow: rgba(176, 16, 47, 0.40); /* accent-warm */ --accent-warm-glow-soft: rgba(176, 16, 47, 0.14); --glass: rgba(253, 244, 220, 0.66); /* paper-cream */ --glass-border: rgba(176, 16, 47, 0.18); --glass-border-hover: rgba(176, 16, 47, 0.42); /* ───── Paper: the objects the copy sits on ───── */ --paper-cream: #fdf4dc; /* the envelope card, the airmail sheets, the label tape: ink 15.98:1 */ --paper-butter: #f1ecc0; /* the deckled love-note sheet: ink 14.61:1 */ --paper-white: #f4f3ee; /* polaroid and photo-booth frames */ --paper-edge: rgba(124, 11, 34, 0.18); --paper-shadow: 0 10px 24px rgba(70, 6, 24, 0.28), 0 2px 4px rgba(70, 6, 24, 0.22); --paper-shadow-lifted: 0 18px 36px rgba(70, 6, 24, 0.34), 0 4px 8px rgba(70, 6, 24, 0.24); --ink: var(--text-primary); --ink-soft: var(--text-secondary); --ink-marker: #1a0a0e; /* the felt-tip: "LOVE YOU MORE" */ --washi: #d9c39a; /* tan washi tape, at 88% opacity over the photo corner */ --washi-edge: rgba(124, 92, 40, 0.35); /* ───── Airmail (stationery borders) ───── */ --airmail-red: #d6303a; --airmail-blue: #2f6fd0; --airmail-stripe: repeating-linear-gradient(135deg, var(--airmail-red) 0 14px, var(--paper-cream) 14px 24px, var(--airmail-blue) 24px 38px, var(--paper-cream) 38px 48px); /* ───── Grounds ───── */ --gingham-cell: clamp(30px, 7.2vw, 92px); /* one gingham cell; phone ~30px, desktop ~92px */ --stripe-h: clamp(34px, 8.2vh, 92px); /* one knit stripe band */ /* pink gingham (special-delivery, caution): watercolour pink and white. Add a feTurbulence grain overlay in markup. */ --gingham-pink-base: #fbe3e9; --gingham-pink-band: rgba(238, 143, 168, 0.50); /* crossing of two bands reads ~#ee8fa8 darker square */ --ground-gingham-pink: repeating-linear-gradient(90deg, var(--gingham-pink-band) 0 var(--gingham-cell), transparent var(--gingham-cell) calc(var(--gingham-cell) * 2)), repeating-linear-gradient(0deg, var(--gingham-pink-band) 0 var(--gingham-cell), transparent var(--gingham-cell) calc(var(--gingham-cell) * 2)), var(--gingham-pink-base); /* blue gingham (love-note, photo-strips): denim blue and cream. Glitter stars sit on top. */ --gingham-blue-base: #f6f1e4; --gingham-blue-band: rgba(126, 165, 222, 0.62); --ground-gingham-blue: repeating-linear-gradient(90deg, var(--gingham-blue-band) 0 var(--gingham-cell), transparent var(--gingham-cell) calc(var(--gingham-cell) * 2)), repeating-linear-gradient(0deg, var(--gingham-blue-band) 0 var(--gingham-cell), transparent var(--gingham-cell) calc(var(--gingham-cell) * 2)), var(--gingham-blue-base); /* knit stripes (the-envelope, reverse-card): cherry and heathered pink, horizontal. Add a knit-noise overlay in markup. */ --stripe-cherry: #c0102c; --stripe-pink: #e0708a; --ground-stripe-red: repeating-linear-gradient(180deg, var(--stripe-cherry) 0 var(--stripe-h), var(--stripe-pink) var(--stripe-h) calc(var(--stripe-h) * 2)); /* solid crimson (the-letter, ten-things) */ --ground-crimson: #860a1a; /* ───── Stars and stickers ───── */ --star-gold: #e8c547; /* gold foil star on the stripes; shade #a8821a, highlight #fff1a8 */ --star-gold-shade: #a8821a; --star-gold-light: #fff1a8; --glitter-pink: #e8457f; /* the glitter-star set (each carries its own rim; see concept.md) */ --glitter-teal: #0f8f86; --glitter-gold: #e6b800; --glitter-orange: #e8641e; --glitter-silver: #8d939c; --glitter-red: #c0102c; --glitter-navy: #1f3f7a; --glitter-sky: #2f7fe0; --sticker-border: #fffaf5; /* the die-cut white border every sticker carries */ --sticker-shadow: 0 6px 14px rgba(70, 6, 24, 0.32), 0 1px 2px rgba(70, 6, 24, 0.3); --sticker-pink: #d02f6b; /* the caution triangle: white on it 4.71:1 */ --sticker-pink-light: #ec4f86; --sticker-halo: rgba(110, 6, 36, 0.55); /* the wine halo under the caution sticker, at the burst's origin */ --burst-dim: rgba(110, 6, 36, 0.68); /* #6e0624 scrim laid over the pink gingham during the caution burst */ --burst-dim-red: rgba(58, 0, 8, 0.52); /* #3a0008 scrim laid over the stripes during the reverse-card burst */ /* ───── Progress letters (H E Y I L Y S M) and controls ───── */ --tape-fill: var(--paper-cream); /* the white label tape the letters are printed on */ --letter-current: var(--text-primary); /* bold */ --letter-idle: var(--text-secondary); /* 9.47:1 on the tape */ --chip-crimson: #8f0a1a; /* the control pill on stripes: white 9.09:1 */ --btn-ink: var(--text-primary); /* "next >>" in ink on gingham: min 7.62:1 (darkest pink crossing) */ --btn-ink-on-chip: #fffaf5; --focus-ring: var(--accent-warm); /* ───── Torn-paper wipe ───── */ --matte-feather: 2px; /* the ragged edge is a hard mask; only this soft edge */ /* ───── Typography: league-spartan-gaegu-great-vibes ───── */ --font-display: 'League Spartan', 'Arial Black', 'Helvetica Neue', sans-serif; --font-body: 'Gaegu', 'Patrick Hand', 'Comic Sans MS', cursive; --font-script: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive; --body-tracking: 0.05em; /* Gaegu is set open, like the reference */ --label-tracking: 0.09em; /* "next >>", "open now", "< RESTART >" at 700 */ /* ───── 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 caution sticker's slap 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); --ease-drift: cubic-bezier(0.4, 0, 0.6, 1); --ease-stage: cubic-bezier(0.83, 0, 0.17, 1); /* ───── Motion vocabulary (the reference's, kept crisp) ───── */ --dur-wipe: 400ms; /* left-to-right sticker/paper/heading wipe */ --dur-crossfade: 220ms; /* page crossfade, 150-300ms */ --dur-torn: 800ms; /* the torn-paper matte wipe, 600-1000ms */ --dur-heading-type: 2500ms; /* "10 THINGS I LOVE ABOUT YOU" typed heading */ --cps-letter: 120; /* typewriter chars/second for letters */ --strip-stagger: 150ms; /* photo-strip entrance stagger */ } /* ═══════════════════════════════════════════ Deep-red scope: solid crimson (the-letter, ten-things) and the knit stripes (the-envelope, reverse-card). Same 15 names, redefined. Contract, on its own bg-primary #860a1a: text-primary 9.75:1, text-secondary 7.84:1, accent-warm 6.04:1, accent-celestial 6.82:1, sage 6.58:1; spark (lum 0.764) lighter than the ground (0.054). ═══════════════════════════════════════════ */ [data-ground="red"], [data-ground="stripe"] { color-scheme: dark; --void: #4d0410; /* the dark under every object on red */ --bg-primary: #860a1a; /* crimson */ --bg-elevated: #a3162b; /* the lit crimson: the letter's lifted panel */ --accent-warm: #f2c14e; /* gold: stars, hairlines, ink glow; 6.04:1 */ --accent-warm-bright: #ffe08a; /* gold light: glints, burst cores; 7.86:1 */ --accent-warm-deep: #c9962a; /* gold in shadow: rims; 3.80:1, never text */ --accent-rose: #ffa9bd; /* blush; 5.63:1 */ --accent-soft: #ffd9df; /* contract only */ --accent-celestial: #b9d6ff; /* sky: the sticker palette's blue; 6.82:1 */ --text-primary: #fffaf2; /* white: copy on crimson, 9.75:1 */ --text-secondary: #ffd9df; /* blush white: hints, idle letters; 7.84:1 */ --wine: #5a0612; /* the deepest red: shadows under objects */ --sage: #a6dcc2; /* contract only; 6.58:1 */ --ember: #ff9473; /* coral: the cherry-coral burst accent; 4.70:1 */ --spark: #ffe08a; /* twinkles and motes: lighter than the ground */ --accent-warm-glow: rgba(242, 193, 78, 0.45); /* accent-warm */ --accent-warm-glow-soft: rgba(242, 193, 78, 0.15); --glass: rgba(134, 10, 26, 0.60); /* bg-primary */ --glass-border: rgba(242, 193, 78, 0.25); --glass-border-hover: rgba(242, 193, 78, 0.50); --ink: #2a1218; /* ink stays dark: it only ever sits on paper (cream 15.98:1) */ --ink-soft: #6b2a3c; --btn-ink: var(--text-primary); --focus-ring: var(--accent-warm-bright); } /* The progress tape is cream paper on EVERY ground, so its letters stay ink even in the red scope. */ .progress-tape, [data-ground="red"] .progress-tape, [data-ground="stripe"] .progress-tape { --letter-current: #2a1218; --letter-idle: #6b2a3c; } /* ═══════════════════════════════════════════ ReveelHero palettes (0-255 triples, set in JS; listed here so they stay in step) STICKER (goldBurst, `caution`, on the pink gingham, over --burst-dim and the sticker's own halo). Ratios against the dimmed gingham (light / mid / dark squares): butter [255,230,130] #ffe682 4.65 / 5.20 / 5.86 (listed twice: the carrier) gold [255,200, 60] #ffc83c 3.74 / 4.18 / 4.71 (listed twice: the carrier) sky [110,192,255] #6ec0ff 2.93 / 3.27 / 3.69 hot pink [255,110,170] #ff6eaa 2.22 / 2.48 / 2.80 (an accent; the core's white-hot adds to it) cherry-coral [255,100,112] #ff6470 2.01 / 2.25 / 2.54 (an accent) white-hot [255,250,245] #fffaf5 5.57 / 6.23 / 7.02 Raw on the un-dimmed gingham the same colours are 1.0-2.5:1 and vanish: the dim is required. GOLD-RED (goldBurst, `reverse-card`, on the stripes, over --burst-dim-red; dimmed stripes #7a0819 / #8a3646): [255,200, 60] gold 7.24 / 5.04 [255,230,130] butter 9.00 / 6.26 [255,250,245] white 10.77 / 7.49 [255,170,200] pink 6.31 / 4.39 [159,208,255] sky 6.90 / 4.80 NAME (nameAssemble, `the-letter`, on crimson #860a1a): [255,250,242] white 9.75 · [255,230,130] butter 8.15 · [242,184,60] gold 5.65 · [255,179,198] pink 6.04 ═══════════════════════════════════════════ */