/* Savanna theme "site" — tokens lifted from the founder's gazelle-web-spring site (src/index.css: --primary 168 60% 36%, --accent 168 45% 28%, --navy 210 50% 10%, teal glow / teal soft, warm gray; DM Sans body, Playfair Display display). savanna.css reads only these custom properties; see docs/BRAND.md. Structure (WS-17 D6, per-user mode): the light tokens on :root, then the dark tokens twice — once under prefers-color-scheme for (skipped by data-mode="light"), once forced by . The two dark blocks are byte-identical on purpose (tests/savanna/test_shell.py::test_dark_blocks_are_identical); edit both. */ :root { --color-bg: hsl(200 20% 98%); --color-surface: hsl(0 0% 100%); --color-surface-2: hsl(200 25% 94%); --color-ink: hsl(210 50% 10%); /* --navy */ --color-muted: hsl(210 10% 45%); --color-border: hsl(200 20% 88%); --color-primary: hsl(168 60% 36%); --color-primary-ink: hsl(0 0% 100%); --color-accent: hsl(168 45% 28%); --color-accent-soft: hsl(168 30% 95%); /* --teal-soft */ --color-accent-glow: hsl(168 70% 45%); /* --teal-glow */ --color-warm-gray: hsl(200 10% 55%); --color-ok: hsl(168 60% 36%); --color-warn: hsl(40 65% 55%); --color-fail: hsl(7 56% 51%); --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --gradient-brand: linear-gradient(135deg, hsl(210 50% 10%) 0%, hsl(168 45% 28%) 100%); --shadow: 0 1px 2px hsl(210 50% 10% / 0.06), 0 4px 16px hsl(210 50% 10% / 0.06); --radius: 0.625rem; } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --color-bg: hsl(210 50% 6%); --color-surface: hsl(210 45% 9%); --color-surface-2: hsl(210 30% 14%); --color-ink: hsl(200 20% 95%); --color-muted: hsl(200 15% 60%); --color-border: hsl(210 30% 18%); --color-primary: hsl(168 60% 42%); --color-primary-ink: hsl(0 0% 100%); --color-accent: hsl(168 50% 35%); --color-accent-soft: hsl(168 30% 14%); --color-accent-glow: hsl(168 70% 45%); --color-ok: hsl(168 60% 42%); --gradient-brand: linear-gradient(135deg, hsl(210 50% 8%) 0%, hsl(168 50% 22%) 100%); --shadow: 0 1px 2px hsl(210 50% 2% / 0.5), 0 4px 16px hsl(210 50% 2% / 0.4); } } :root[data-mode="dark"] { --color-bg: hsl(210 50% 6%); --color-surface: hsl(210 45% 9%); --color-surface-2: hsl(210 30% 14%); --color-ink: hsl(200 20% 95%); --color-muted: hsl(200 15% 60%); --color-border: hsl(210 30% 18%); --color-primary: hsl(168 60% 42%); --color-primary-ink: hsl(0 0% 100%); --color-accent: hsl(168 50% 35%); --color-accent-soft: hsl(168 30% 14%); --color-accent-glow: hsl(168 70% 45%); --color-ok: hsl(168 60% 42%); --gradient-brand: linear-gradient(135deg, hsl(210 50% 8%) 0%, hsl(168 50% 22%) 100%); --shadow: 0 1px 2px hsl(210 50% 2% / 0.5), 0 4px 16px hsl(210 50% 2% / 0.4); }