/* SnapBlocks — Design Tokens * * Source of truth for the visual palette, typography, radii, shadows. * These OKLCH values match the design handoff (snapblocks/project/SnapBlocks Prototype.html). * The canvas-side mirror lives in js/theme.js — keep them in sync. * * Theme is applied via [data-theme="cream"] (default) or [data-theme="midnight"] * on the element (see js/game.js init). * * Requires WebView >= 111 for oklch() support (Android 12+ / Chrome 111+). */ :root, [data-theme="cream"] { /* ===== surfaces ===== */ --bg: oklch(97.5% 0.012 70); /* soft cream */ --bg-2: oklch(95.5% 0.018 65); /* deeper cream card */ --bg-inset: oklch(93.5% 0.022 60); /* inset wells */ --ink: oklch(22% 0.04 300); /* deep plum ink */ --ink-2: oklch(42% 0.04 300); --ink-soft: oklch(58% 0.03 300); --line: oklch(88% 0.015 70); --line-strong: oklch(82% 0.02 65); --white: #fffaf4; /* ===== premium material layers ===== * Cards use a very small lightness step and a hairline rather than a heavy * outline. Keeping these as tokens makes the same hierarchy hold across * the unlockable themes without screen-specific colour overrides. */ --surface-top: oklch(99.2% 0.006 70); --surface-bottom: oklch(96.4% 0.014 68); --surface-raised: oklch(99.5% 0.004 70 / 0.92); --surface-glass: oklch(98.5% 0.008 70 / 0.84); --hairline: oklch(78% 0.018 65 / 0.32); --focus-ring: color-mix(in oklab, var(--primary), white 12%); --on-dark: #fffaf4; /* A controlled, dark focal surface for the menu hero. */ --hero-start: oklch(27% 0.055 302); --hero-end: oklch(20% 0.045 286); --hero-glow: oklch(66% 0.17 28 / 0.42); /* ===== candy accents — matched chroma/lightness, varied hue ===== */ --coral: oklch(72% 0.17 25); --butter: oklch(85% 0.16 95); --mint: oklch(78% 0.15 160); --sky: oklch(76% 0.14 235); --lilac: oklch(72% 0.15 300); --rose: oklch(76% 0.15 355); /* ===== primary CTA ===== */ --primary: oklch(63% 0.21 27); /* vivid coral-red */ --primary-ink: #fffaf4; --primary-shade: oklch(54% 0.21 27); /* ===== radii (chunky) ===== */ --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; /* ===== shadows (signature extruded-block look) ===== */ --shadow-soft: 0 1px 0 oklch(100% 0 0 / 0.72) inset, 0 1px 2px oklch(25% 0.03 60 / 0.05), 0 10px 28px -18px oklch(25% 0.04 60 / 0.24); --shadow-lift: 0 1px 0 oklch(100% 0 0 / 0.78) inset, 0 2px 5px oklch(25% 0.03 60 / 0.07), 0 20px 46px -22px oklch(25% 0.04 60 / 0.34); --shadow-btn: 0 1px 2px oklch(30% 0.05 28 / 0.12), 0 10px 22px -10px oklch(52% 0.17 28 / 0.42); --shadow-control: 0 1px 0 oklch(100% 0 0 / 0.72) inset, 0 6px 18px -12px oklch(25% 0.04 60 / 0.32); /* ===== typography ===== */ --font-display: 'Nunito', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace; } [data-theme="midnight"] { --bg: oklch(22% 0.02 300); --bg-2: oklch(26% 0.025 300); --bg-inset: oklch(18% 0.02 300); --ink: oklch(96% 0.015 70); --ink-2: oklch(82% 0.02 70); --ink-soft: oklch(64% 0.025 70); --line: oklch(32% 0.025 300); --line-strong: oklch(40% 0.03 300); --white: oklch(30% 0.025 300); --surface-top: oklch(29.5% 0.027 300); --surface-bottom: oklch(26.5% 0.025 300); --surface-raised: oklch(31% 0.027 300 / 0.94); --surface-glass: oklch(25% 0.024 300 / 0.86); --hairline: oklch(72% 0.02 300 / 0.15); --focus-ring: color-mix(in oklab, var(--primary), white 8%); --hero-start: oklch(31% 0.065 300); --hero-end: oklch(20% 0.045 276); --hero-glow: oklch(70% 0.16 300 / 0.34); --coral: oklch(70% 0.17 25); --butter: oklch(81% 0.16 95); --mint: oklch(74% 0.15 160); --sky: oklch(72% 0.14 235); --lilac: oklch(70% 0.15 300); --rose: oklch(74% 0.15 355); --primary: oklch(68% 0.19 27); --primary-ink: oklch(18% 0.02 300); --primary-shade: oklch(56% 0.19 27); --shadow-soft: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 1px 3px oklch(0% 0 0 / 0.28), 0 12px 28px -18px #000; --shadow-lift: 0 1px 0 oklch(100% 0 0 / 0.08) inset, 0 2px 5px oklch(0% 0 0 / 0.30), 0 22px 48px -20px #000; --shadow-btn: 0 1px 2px #000, 0 12px 26px -12px #000; --shadow-control: 0 1px 0 oklch(100% 0 0 / 0.07) inset, 0 10px 24px -14px #000; } [data-theme="meadow"] { --bg: oklch(96.5% 0.015 160); /* soft forest white / sage cream */ --bg-2: oklch(93.5% 0.02 160); /* deeper sage card */ --bg-inset: oklch(90.5% 0.025 160); /* inset wells */ --ink: oklch(22% 0.035 160); /* deep pine ink */ --ink-2: oklch(40% 0.04 160); --ink-soft: oklch(56% 0.03 160); --line: oklch(86% 0.02 160); --line-strong: oklch(80% 0.025 160); --white: #f5faf6; --surface-top: oklch(98.5% 0.008 160); --surface-bottom: oklch(94% 0.018 160); --surface-raised: oklch(99% 0.006 160 / 0.92); --surface-glass: oklch(97% 0.012 160 / 0.84); --hairline: oklch(72% 0.026 160 / 0.28); --focus-ring: color-mix(in oklab, var(--primary), white 12%); --hero-start: oklch(29% 0.06 166); --hero-end: oklch(20% 0.045 183); --hero-glow: oklch(68% 0.14 154 / 0.40); --coral: oklch(72% 0.17 25); --butter: oklch(85% 0.16 95); --mint: oklch(78% 0.15 160); --sky: oklch(76% 0.14 235); --lilac: oklch(72% 0.15 300); --rose: oklch(76% 0.15 355); --primary: oklch(60% 0.17 160); /* vivid forest green */ --primary-ink: #fffaf4; --primary-shade: oklch(50% 0.17 160); --shadow-soft: 0 1px 0 oklch(100% 0 0 / 0.76) inset, 0 1px 3px oklch(26% 0.02 160 / 0.06), 0 10px 28px -18px oklch(30% 0.02 160 / 0.22); --shadow-lift: 0 1px 0 oklch(100% 0 0 / 0.82) inset, 0 2px 5px oklch(26% 0.02 160 / 0.08), 0 20px 46px -22px oklch(30% 0.02 160 / 0.34); --shadow-btn: 0 1px 2px oklch(25% 0.04 160 / 0.12), 0 10px 22px -10px oklch(54% 0.14 160 / 0.38); --shadow-control: 0 1px 0 oklch(100% 0 0 / 0.72) inset, 0 6px 18px -12px oklch(25% 0.03 160 / 0.30); } [data-theme="sunset"] { --bg: oklch(96.5% 0.015 35); /* soft sunset cream / warm peach */ --bg-2: oklch(92.5% 0.025 35); /* deeper peach card */ --bg-inset: oklch(88.5% 0.035 35); /* inset wells */ --ink: oklch(22% 0.04 35); /* deep terracotta ink */ --ink-2: oklch(42% 0.04 35); --ink-soft: oklch(58% 0.03 35); --line: oklch(86% 0.025 35); --line-strong: oklch(80% 0.03 35); --white: #fdf3ee; --surface-top: oklch(98.5% 0.008 35); --surface-bottom: oklch(93.5% 0.022 35); --surface-raised: oklch(99% 0.006 35 / 0.92); --surface-glass: oklch(97% 0.014 35 / 0.84); --hairline: oklch(73% 0.03 35 / 0.28); --focus-ring: color-mix(in oklab, var(--primary), white 12%); --hero-start: oklch(31% 0.07 32); --hero-end: oklch(20% 0.05 18); --hero-glow: oklch(67% 0.18 34 / 0.42); --coral: oklch(72% 0.17 25); --butter: oklch(85% 0.16 95); --mint: oklch(78% 0.15 160); --sky: oklch(76% 0.14 235); --lilac: oklch(72% 0.15 300); --rose: oklch(76% 0.15 355); --primary: oklch(60% 0.20 28); /* vivid sunset red */ --primary-ink: #fffaf4; --primary-shade: oklch(50% 0.20 28); --shadow-soft: 0 1px 0 oklch(100% 0 0 / 0.76) inset, 0 1px 3px oklch(28% 0.02 35 / 0.06), 0 10px 28px -18px oklch(35% 0.02 35 / 0.22); --shadow-lift: 0 1px 0 oklch(100% 0 0 / 0.82) inset, 0 2px 5px oklch(28% 0.02 35 / 0.08), 0 20px 46px -22px oklch(35% 0.02 35 / 0.34); --shadow-btn: 0 1px 2px oklch(28% 0.04 28 / 0.12), 0 10px 22px -10px oklch(54% 0.16 28 / 0.38); --shadow-control: 0 1px 0 oklch(100% 0 0 / 0.72) inset, 0 6px 18px -12px oklch(28% 0.03 35 / 0.30); }