/* Design tokens for Talking Points v2. Values here are contractual: js reads --landing-beat and writes --active. */ :root { /* ---- Identity colours. FIXED. These are the family's colours. ---- */ --p-buck: #00D4FF; --p-georgina: #BF40FF; --p-charleigh: #FF2D9B; --p-logan: #39FF14; --p-liam: #FFE500; /* ---- Night sky base ---- v1 sat on near-black with nightclub neon, which reads harsh for a bedtime game. This is warmer and deeper so the identity colours have somewhere to glow from. */ --bg-deep: #0B0821; --bg-mid: #171043; --bg-lift: #241A5C; --aurora-a: rgba(124, 92, 255, 0.30); --aurora-b: rgba(255, 92, 176, 0.20); --aurora-c: rgba(56, 208, 255, 0.18); /* ---- Active player. js writes these on at landing. ---- */ --active: var(--p-buck); --active-glow: rgba(0, 212, 255, 0.45); --active-wash: rgba(0, 212, 255, 0.10); /* ---- Ink ---- */ --text: #F6F3FF; /* Both secondary tiers were measured against the real night sky with their alpha composited in. --text-faint at 0.34 came out at 2.91:1, well under the 4.5:1 floor, and it was carrying functional copy: the questions remaining count and the "tap to keep going" hint. Raised until both tiers clear 4.5:1 while keeping three distinguishable steps. */ --text-dim: rgba(246, 243, 255, 0.72); --text-faint: rgba(246, 243, 255, 0.52); /* ---- Surfaces ---- */ --surface: rgba(255, 255, 255, 0.055); --surface-hi: rgba(255, 255, 255, 0.10); --surface-line: rgba(255, 255, 255, 0.11); --scrim: rgba(6, 4, 20, 0.72); /* ---- Type ---- */ --font-display: 'Fredoka', system-ui, -apple-system, sans-serif; --font-body: 'Fredoka', system-ui, -apple-system, sans-serif; --fs-question: clamp(1.45rem, 5.8vw, 2.15rem); --fs-name: clamp(3.2rem, 16vw, 5.5rem); --fs-title: clamp(1.6rem, 6.4vw, 2.2rem); --fs-body: clamp(0.95rem, 3.8vw, 1.05rem); --fs-small: 0.78rem; --fs-micro: 0.68rem; /* ---- Space ---- */ --gap-xs: 6px; --gap-s: 12px; --gap-m: 20px; --gap-l: 32px; --gap-xl: 48px; /* Nothing tappable may be smaller than this. One phone, passed around, often to an 8 year old. */ --tap-min: 56px; --radius-s: 12px; --radius-m: 20px; --radius-l: 28px; --radius-pill: 999px; /* ---- Motion ---- Spring flavoured. v1 used linear and ease, which is what made it feel like a web page rather than an app. */ --ease-spring: cubic-bezier(0.22, 1.4, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-mid: 340ms; --dur-slow: 620ms; /* The comedy beat between the wheel stopping and the gag firing. Read by js. Do not shorten it, the silence is what makes the gag land. */ --landing-beat: 180ms; --shadow-lift: 0 8px 30px rgba(0, 0, 0, 0.45); --shadow-pop: 0 14px 46px rgba(0, 0, 0, 0.55); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-mid: 1ms; --dur-slow: 1ms; } } /* Deep indigo and black-purple, not harvest brown. The season used to sit on a pumpkin-sunset base, which is a warm evening rather than a cold night, and it is the single reason the whole thing read as a picture book. The only warm light in the season now comes from things that are actually burning: the lantern moon, the lit windows, the pumpkins and the wheel's own bulbs. */ html[data-season="halloween"] { --bg-deep: #050208; --bg-mid: #170a2b; --bg-lift: #26113d; --aurora-a: rgba(255, 122, 24, 0.34); --aurora-b: rgba(255, 72, 16, 0.20); --aurora-c: rgba(255, 196, 70, 0.16); --scrim: rgba(7, 3, 12, 0.78); --theme-halloween: #0a0518; }