/* Design tokens — the single source of visual truth. Light is the default; [data-theme="dark"] on overrides the palette. Colours chosen for WCAG AA contrast on their intended surfaces. Spacing/radius/type scales keep the UI consistent and game-like without being noisy. */ :root { /* Type */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-md: 0.95rem; --fs-lg: 1.15rem; --fs-xl: 1.5rem; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* Radius + elevation */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --shadow-1: 0 1px 2px rgba(16, 32, 20, 0.08), 0 1px 3px rgba(16, 32, 20, 0.06); --shadow-2: 0 6px 18px rgba(16, 32, 20, 0.12); /* Motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur: 160ms; /* Activity accent hues (shared by both themes, tuned per surface below) */ --hue-sow: 140; --hue-harden: 200; --hue-plantout: 95; --hue-harvest: 35; } /* ---- Light theme (default) ---- */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #f3f6f1; --bg-panel: #ffffff; --bg-elev: #fbfdfa; --bg-sunken: #eef2ec; --ink: #1d2b22; --ink-soft: #4d5d52; --ink-faint: #7a8a80; --border: #d9e2d6; --border-strong: #c2cfbd; --brand: #2f7d4f; --brand-ink: #ffffff; --accent: #e08a2b; --warn-bg: #fdeccf; --warn-ink: #8a5210; --warn-line: #e0a64b; --line-frost: #4f8fd0; --line-warm: #d98a3a; --growth-indoor: #cfe3c4; --growth-outdoor: #7cba6a; } /* ---- Dark theme ---- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #12180f; --bg-panel: #1a2116; --bg-elev: #212a1b; --bg-sunken: #161d12; --ink: #e7efe1; --ink-soft: #aebaa6; --ink-faint: #7d8a76; --border: #2c3825; --border-strong: #3a4a31; --brand: #5fb47e; --brand-ink: #0e150b; --accent: #f0a44e; --warn-bg: #3a2c10; --warn-ink: #f3cd88; --warn-line: #b9802f; --line-frost: #6fa6df; --line-warm: #e0a05a; --growth-indoor: #34492b; --growth-outdoor: #6fae5e; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 22px rgba(0, 0, 0, 0.5); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }