/* ============================================================= themes.css == The palette, per mode. This file is the only place a theme's colours are written down; styles.css and duel.css read the tokens it sets and never ask which mode they are in. How a theme is chosen js/theme.js writes data-theme on whenever the screen changes. The lobby — sign-in, menu, leaderboard — is `main`. A run wears its mode's theme from the first card to the summary. The duel wears `duel`. Zen has no palette of its own and plays in the lobby's. Three layers 1. Primitives: the brief's hex codes, verbatim, one name each. 2. Derived shades, only where a brief colour cannot do a job by itself. Nearly always the same story: a vivid mint or rose is right for a glow and too faint to be TEXT on the white card (#2DD4BF is 1.9:1 on white), so the stamp on the card and the glyph on the gate button use a -deep or -ink shade that clears WCAG AA. Every one of those says its ratio. 3. The semantic tokens the components already consume. The reserved-words rule from the top of styles.css holds per theme: whatever --yes and --no are in a mode, they are spent on answers and on nothing else. That is why the duel's two players get a pair of their own, --ally and --foe, instead of borrowing mint and rose. ============================================================================ */ /* ------------------------------------------------------------ primitives -- */ :root { /* Global / main menu */ --c-main-bg: #131127; /* Deep Space Indigo */ --c-main-surface: #FFFFFF; --c-main-ink: #1E293B; /* dark slate */ --c-main-success: #2DD4BF; /* swipe right — vibrant teal */ --c-main-fail: #FB7185; /* swipe left — rose, not alarm red */ /* Duel */ --c-duel-bg: #0B0914; --c-duel-ally: #00E5FF; /* player — defend */ --c-duel-foe: #FF007F; /* opponent — attack */ /* Time Attack */ --c-time-bg: #1D3557; /* sporty deep blue */ --c-time-urgency: #FFC300; /* the clock */ --c-time-energy: #FF5733; /* Sudden Death */ --c-death-bg: #1A1A1A; /* charcoal */ --c-death-strike: #E63946; /* a strike */ --c-death-fatal: #900C3F; /* a strike already spent */ /* Review */ --c-review-bg: #F0F8FF; /* Alice Blue */ --c-review-calm: #98D8C8; /* progress */ } /* ------------------------------------------------------------------ main -- Also the default: with no data-theme at all — the single-file build strips the attribute from — the page is still the lobby. */ :root, :root[data-theme="main"] { color-scheme: dark; --bg-void: var(--c-main-bg); --bg-deep: #1a1733; /* the top of the room's gradient, a step lighter */ --bg-lift: #221e42; --bg-glow: #1d1c4d; /* the lamp above the table */ --glow-a: rgba(111, 108, 247, .55); --glow-b: rgba(53, 215, 242, .32); --glow-c: rgba(224, 36, 150, .22); /* Lifted clear of the new, lighter ground. The old felt (#12142a) is within a shade of #131127, and a panel the same colour as the room is no panel. */ --felt: #1c1938; --felt-lift: #25214a; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .17); --panel: rgba(255, 255, 255, .045); --panel-lift: rgba(255, 255, 255, .075); --text-1: #f5f6fc; /* 17.1:1 on the ground */ --text-2: #adb2cf; /* 8.8:1 */ --text-3: #767b9b; /* 4.5:1, labels */ --surface: var(--c-main-surface); --surface-edge: #eef1f7; /* the faint cool falloff at the card's far corner */ --ink: var(--c-main-ink); /* 14.6:1 on the card */ --ink-soft: #475569; /* 7.6:1 */ --ink-faint: #64748B; /* 4.8:1 */ --shadow-card: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 48px -14px rgba(0, 0, 0, .7); --shadow-lift: 0 12px 30px -14px rgba(0, 0, 0, .8); /* Answers. The bright pair is the tint, the rail, the burst; -deep is what is PRINTED on the white card; -ink is what is printed on the room. */ --yes: var(--c-main-success); --yes-deep: #0F766E; /* 5.5:1 on the card — the brief's teal is 1.9:1 */ --yes-ink: var(--yes); --no: var(--c-main-fail); --no-deep: #E11D48; /* 4.7:1 on the card — the brief's rose is 2.7:1 */ --no-ink: var(--no); --life: var(--no); --life-lost: var(--line-strong); --clock-a: var(--yes); --clock-b: var(--cyan); --clock-low-a: var(--no); --clock-low-b: #ff9a5c; --clock-low-ink: var(--no); --primary-ink: #0d0f1e; --primary-a: #ffffff; --primary-b: #d9dcf3; --primary-glow: rgba(255, 255, 255, .5); } /* ------------------------------------------------------------------ duel -- Neon on near-black. The room glows magenta overhead and cyan from the side: the opponent above you, you holding the line. */ :root[data-theme="duel"] { --bg-void: var(--c-duel-bg); --bg-deep: #120e22; --bg-lift: #1a1430; --bg-glow: #3a0f4a; --glow-a: rgba(255, 0, 127, .38); --glow-b: rgba(0, 229, 255, .30); --glow-c: rgba(124, 58, 237, .30); --felt: #15111f; --felt-lift: #1d172b; --line: rgba(0, 229, 255, .12); --line-strong: rgba(0, 229, 255, .24); --text-2: #b4b0cc; /* 9.4:1 */ --text-3: #7f7a9c; /* Players. Text in either colour is safe on this ground: cyan 12.8:1, magenta 5.2:1. The -deep shades only start a gradient. */ --ally: var(--c-duel-ally); --ally-deep: #0091A6; --foe: var(--c-duel-foe); --foe-deep: #B3005A; } /* ----------------------------------------------------------- time attack -- A stadium at night: deep blue, and the clock in gold burning to orange. */ :root[data-theme="timeAttack"] { --bg-void: var(--c-time-bg); --bg-deep: #24406a; --bg-lift: #2a4a78; --bg-glow: #2f5a8f; --glow-a: rgba(255, 195, 0, .22); --glow-b: rgba(255, 87, 51, .18); --glow-c: rgba(69, 123, 157, .30); --felt: #274a78; --felt-lift: #2d5386; --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .22); --text-2: #c3cde0; /* 7.7:1 on the ground */ --text-3: #9AAAC6; /* 5.3:1 on the ground, 3.8:1 on felt — labels */ /* The streak and the multiplier already speak gold; in this room gold is the clock's colour, so they speak the clock's. */ --gold: var(--c-time-urgency); --clock-a: var(--c-time-urgency); /* 7.7:1 as text */ --clock-b: #FFD95A; --clock-low-a: var(--c-time-energy); --clock-low-b: var(--c-time-urgency); /* The brief's orange is 3.9:1 on this blue — fine for the bar, short of AA for the seconds printed beside it. */ --clock-low-ink: #FF9B7A; } /* ---------------------------------------------------------- sudden death -- Charcoal, and one colour: the strike. A wrong answer here IS a strike, so --no becomes the warning red, and a strike that has been spent goes crimson. */ :root[data-theme="suddenDeath"] { --bg-void: var(--c-death-bg); --bg-deep: #222222; --bg-lift: #2a2a2a; --bg-glow: #2b1417; --glow-a: rgba(230, 57, 70, .20); --glow-b: rgba(144, 12, 63, .24); --glow-c: transparent; --felt: #262626; --felt-lift: #2f2f2f; --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .18); --text-2: #b3b3b3; /* 8.3:1 */ --text-3: #8a8a8a; /* 5.0:1 on the ground, 4.4:1 on felt — labels */ --no: var(--c-death-strike); /* 4.2:1 on the ground, as text */ --no-deep: var(--c-death-fatal); /* 9.1:1 on the card — the NOPE stamp */ --no-ink: var(--no); --life: var(--c-death-strike); /* 1.9:1 on charcoal, so never text: a lost strike is also shrunk and its glow put out, and the shape carries the meaning the colour cannot. */ --life-lost: var(--c-death-fatal); } /* ---------------------------------------------------------------- review -- The one light room. Practice on the words that got away should feel like a desk by a window, not an arena — so the ground is pale, the cards are pure white with barely a shadow, and everything printed on the room turns dark. */ :root[data-theme="review"] { color-scheme: light; --bg-void: var(--c-review-bg); --bg-deep: #F7FBFF; --bg-lift: #E6F1FB; --bg-glow: #FFFFFF; --glow-a: rgba(152, 216, 200, .35); --glow-b: rgba(186, 214, 240, .35); --glow-c: transparent; --felt: #FFFFFF; --felt-lift: #F7FBFF; --line: rgba(30, 41, 59, .10); --line-strong: rgba(30, 41, 59, .18); --panel: rgba(30, 41, 59, .04); --panel-lift: rgba(30, 41, 59, .07); --text-1: var(--c-main-ink); /* 13.6:1 on Alice Blue */ --text-2: #475569; /* 7.1:1 */ --text-3: #64748B; /* 4.4:1, labels */ --surface-edge: #FFFFFF; /* pure white, no falloff */ --shadow-card: 0 1px 2px rgba(30, 41, 59, .05), 0 14px 34px -18px rgba(30, 41, 59, .18); --shadow-lift: 0 8px 24px -14px rgba(30, 41, 59, .18); --yes: var(--c-review-calm); --yes-deep: #287A68; /* 5.2:1 on the card — the brief's mint is 1.6:1 */ /* On a pale room the bright pair all but vanishes as a glyph, so what is printed on the room uses the deep shades too. */ --yes-ink: var(--yes-deep); --no-ink: var(--no-deep); --primary-ink: #FFFFFF; --primary-a: #334155; --primary-b: var(--c-main-ink); --primary-glow: rgba(30, 41, 59, .25); }