/* Theme: Calm Dawn * A warm, light, soothing palette inspired by Headspace's design language. * See STYLE_GUIDE.md. All visual values live here as CSS custom properties; * components never hardcode colors. */ /* Accent, radii, shadows, fonts and the highlight rotation now live in * assets/css/primitives.css, shared with the marketing site. Redefining any * of them here still works (later source order wins) — that is the hook a * second theme would use. */ [data-theme="calm-dawn"] { --bg-deep: #FBF3EA; --bg-surface: rgba(255, 255, 255, 0.72); --bg-surface-strong: rgba(255, 255, 255, 0.92); /* Fully opaque surface. Chrome that sits over scrolling content cannot be * translucent: at 92% the page slides visibly underneath it, and any piece * of that chrome built at a different opacity shows a seam where the two * meet. The bottom nav is the case that needs it. */ --bg-surface-solid: #FFFFFF; --bg-grid: rgba(255, 255, 255, 0.55); --grid-cell: rgba(255, 255, 255, 0.50); /* The goal row's wave. Cool and near-neutral on purpose: a warm crest was * tried and read as part of the card rather than behind it, and an orange * one edged toward looking tappable on a row that is not. * * At .45 and .74 over a white row this resolves to exactly the #F0F1F3 and * #E6E8EC the row carried before — the values are unchanged, they are just * one token at two strengths now instead of three loose hex literals. */ --shade-cool: #DDE0E5; --success: #3FB98C; /* Warm brick red, not the old rose #F2698A - that read as pink against a * cream-and-orange palette. Still muted rather than a harsh signal red, so * §1.1's "failure is forgiving" still holds. */ --error: #C9443A; /* Label colour for text on the 18% --error fill .btn-danger uses. --error * itself measures 3.52:1 there; this reads 4.52:1. */ --error-strong: #AC3A32; --warning: #F5A524; --glass-blur: 16px; --app-bg: radial-gradient(120% 50% at 85% -6%, #ffe2c4, transparent 60%), radial-gradient(85% 40% at -5% 3%, #ffffff, transparent 55%), linear-gradient(180deg, var(--ground-a), var(--ground-b)); /* Surface / chrome tokens (consumed by shared CSS). */ /* Warm centre to a pale cool edge. The two stops here used to be lilac * (#F3E7F3 / #EAE4F7) - the last of the pre-teal palette, and the reason * base.css warns about a lilac flash if 100dvh under-reports. */ --backdrop-bg: radial-gradient(90% 90% at 50% 0%, #FDEBD8 0%, #F4E3D6 55%, #DFE7E6 100%); --frame-outline: rgba(40, 74, 81, 0.10); --play-header-bg: transparent; --play-header-star-opacity: 0; --surface-raised: linear-gradient(180deg, #FFFFFF 0%, #FBF1E6 100%); --control-shadow: 0 4px 14px rgba(120, 90, 60, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.90); --control-border: rgba(40, 74, 81, 0.08); /* Teal, not purple - the purple was residue from the pre-teal palette. Deep * teal is the app's "authority" hue, so a dimmed screen reads as part of the * system. Shared by all four modal scrims. */ --overlay-scrim: rgba(36, 63, 71, 0.42); /* Canvas grid letter/marker colors (read by PuzzleGrid.js). Dark letters on * light pastel capsules; soft white rim, no harsh glow. */ --grid-letter-on-highlight: #284A51; --grid-letter-glow: rgba(255, 255, 255, 0.0); --grid-marker-rim: rgba(255, 255, 255, 0.85); /* Daily hero card — dark teal with soft wave bands (copper eyebrow). */ --daily-hero-bg: linear-gradient(160deg, #345963 0%, #284A51 48%, #243F47 100%); --daily-hero-wave: rgba(58, 100, 112, 0.55); --daily-hero-wave-strong: rgb(57 110 120 / 50%); --daily-hero-eyebrow: #E29153; /* Home topbar (north bar) icon colors. */ --topbar-flame: #E6772C; --topbar-coin-bg: #F0C53A; --topbar-coin-ring: #E8B020; --topbar-icon: #284A51; /* Statistics — value + icon-well pairs. Only three hues: the reward gold, * the system teal, and the accent orange. Tone carries meaning, not * decoration (gold = currency, teal = accumulated progress, orange = * streak energy / records). */ --stat-gold: #A9750A; --stat-gold-soft: rgba(240, 197, 58, 0.24); --stat-teal: #33707F; --stat-teal-soft: rgba(81, 148, 162, 0.20); /* The app already had exactly one blue - #4898c8, the Medium-difficulty * progress colour (components.css, per-mode overrides). Tokenised here as a * value/soft pair so there is one blue rather than two. The value is a * darker step than the fill's base, matching how --stat-teal sits darker * than --stat-teal-soft, so 26px/800 numerals stay legible on the well. */ /* Medal tiers for the solved overlay's time bonus. Value / soft-fill pairs * in the same shape as --stat-*. Gold deliberately reuses the reward gold so * a gold medal and a coin read as the same metal; its disc is the bright * --topbar-coin-bg for the same reason. Silver and bronze use their value * colour as the disc, the way the score badge uses --stat-teal. * The leaderboard's rank chips (#FDCB6E / #B2BEC3 / #E17055, flagged in * §11 as untokenised) are the natural next consumer of this family. */ --medal-gold: #A9750A; --medal-gold-soft: rgba(240, 197, 58, 0.24); --medal-silver: #5F6E7A; --medal-silver-soft: rgba(150, 168, 184, 0.26); --medal-bronze: #96592B; --medal-bronze-soft: rgba(190, 130, 80, 0.22); /* Solid tier fills: the same hues the -soft variants tint with, at full * opacity, for a tier badge that has to read on a dark ground. Pair each * with its matching --medal-* as the label colour. */ --medal-gold-fill: #F0C53A; --medal-silver-fill: #96A8B8; /* Lifted from #BE8250: with --text-primary as the label it measured 4.2:1, * just under the 4.5:1 small-text threshold. #C88B58 reads 4.71:1 and is * still recognisably bronze. */ --medal-bronze-fill: #C88B58; /* Light glyph on a solid metal disc (puzzle-tile medals). */ --medal-gold-glyph: #FFF8E0; --medal-silver-glyph: #F7FAFC; --medal-bronze-glyph: #FFF4E8; --stat-blue: #2E6F96; --stat-blue-soft: rgba(72, 152, 200, 0.20); /* Daily podium — gold (1st), silver (2nd), bronze (3rd). */ --podium-gold-bg: linear-gradient(155deg, #F7D05F 0%, #EBB72C 46%, #D69707 100%); --podium-gold-wave: rgba(255, 255, 255, 0.20); --podium-gold-wave-strong: rgba(255, 255, 255, 0.34); /* Struck, not printed: the raised-chrome gradient gives the disc a lit top * and a shadowed base, so it reads as a metal face catching light rather * than a flat white dot. Same token the app uses for raised chrome. */ --podium-medal-face: var(--surface-raised); /* 0.32 was invisible against the gold and bronze pedestals, so the disc * read as a flat white circle instead of a medallion with a halo. */ --podium-medal-ring: rgba(255, 255, 255, 0.55); --podium-medal-lift: 0 2px 5px rgba(40, 28, 6, 0.18); --podium-gold-rank: #8A5D02; --podium-gold-shadow: 0 1px 10px rgba(198, 138, 6, 0.28); --podium-silver-bg: linear-gradient(155deg, #F2F5F8 0%, #C8D0D9 44%, #9AA6B2 100%); --podium-silver-wave: rgba(255, 255, 255, 0.26); --podium-silver-wave-strong: rgba(255, 255, 255, 0.40); --podium-silver-rank: #5C6772; --podium-silver-shadow: 0 1px 10px rgba(120, 132, 148, 0.26); --podium-bronze-bg: linear-gradient(155deg, #EEC09A 0%, #C8875A 46%, #A86538 100%); --podium-bronze-wave: rgba(255, 255, 255, 0.18); --podium-bronze-wave-strong: rgba(255, 255, 255, 0.30); --podium-bronze-rank: #7A4A24; --podium-bronze-shadow: 0 1px 10px rgba(168, 101, 56, 0.26); --podium-floor: rgba(40, 74, 81, 0.12); /* Choose Difficulty hero card — warm orange with soft wave bands. */ --difficulty-hero-bg: linear-gradient(150deg, #e3650f 0%, #e6772c 46%, #f18c4c 100%); --difficulty-hero-wave: rgba(255, 255, 255, 0.12); --difficulty-hero-wave-strong: rgba(255, 255, 255, 0.18); /* Neutral shade laid over the whole card face - gradient AND waves - to buy * the white text contrast without moving the orange. Deepening the ramp * instead (--accent-2 is the obvious candidate) keeps roughly the same hue * but jumps the saturation, which is what reads as a redder orange rather * than a darker one. Black at low alpha only drops lightness. One value to * tune: raise it for more contrast, lower it if the cards go muddy. */ --difficulty-hero-shade: rgb(0 0 0 / 8%); }