/* ───────────────────────────────────── Design Tokens — Heritage Roofing Archives Single source of truth for all colour and typography values. Import this file first in every stylesheet. Theming: - Two themes: "dark" (the original warm-beige look, the default) and "light" (a brighter, paper-white variant). - The active theme is selected by the `data-theme` attribute on , set by the no-flash init script in templates/home/_nav.html.twig. - With no stored choice, the OS `prefers-color-scheme` decides (handled below in pure CSS so the page is themed even before JS runs). ───────────────────────────────────── */ /* ── Dark theme (default / original warm beige) ── Applies as the base, and explicitly when data-theme="dark". */ :root, :root[data-theme="dark"] { color-scheme: light; /* Palette */ --color-bg: #E3DBCC; /* warm beige — primary background */ --color-bg-alt: #D8CFBF; /* deeper beige — alternate sections */ --color-cream: #F4F0E7; /* light cream — breaks up the beige sections */ --color-text: #4F4843; /* dark warm brown — body text */ --color-muted: #887B70; /* medium brown — labels, secondary text */ --color-border: #C8BFB2; /* light warm border */ --color-accent: #4F4843; /* same as text — buttons, underlines */ --color-archive: #A75D24; /* rusted torch amber — the archive's signature colour */ --color-bg-invert: #4F4843; /* inverted background (dark sections) */ --color-text-invert: #E3DBCC; /* inverted text (on dark bg) */ /* Typography */ --font-serif: "Iowan Old Style", Georgia, serif; /* Status colours */ --color-success-bg: #f4faf4; --color-success-fg: #2d6a30; --color-success-bd: #c8e6c9; --color-error-bg: #fdf6f6; --color-error-fg: #b71c1c; --color-error-bd: #ffcdd2; } /* ── Light theme (brighter, paper-white variant) ── */ :root[data-theme="light"] { color-scheme: light; /* Palette */ --color-bg: #FAF8F3; /* warm near-white — primary background */ --color-bg-alt: #F0ECE3; /* soft warm grey — alternate sections */ --color-cream: #FFFFFF; /* pure white — cards */ --color-text: #2E2925; /* deep warm brown — body text */ --color-muted: #6E645B; /* medium brown — labels, secondary text */ --color-border: #E4DCD0; /* light warm border */ --color-accent: #2E2925; /* same as text — buttons, underlines */ --color-archive: #8A4B1C; /* rusted torch amber — the archive's signature colour */ --color-bg-invert: #2E2925; /* inverted background (dark sections) */ --color-text-invert: #FAF8F3; /* inverted text (on dark bg) */ /* Status colours (unchanged across themes) */ --color-success-bg: #f4faf4; --color-success-fg: #2d6a30; --color-success-bd: #c8e6c9; --color-error-bg: #fdf6f6; --color-error-fg: #b71c1c; --color-error-bd: #ffcdd2; } /* ── OS default when the visitor has made no explicit choice ── `:root:not([data-theme])` only matches before the init script runs (or if JS is unavailable). Default theme is dark/beige, so we only need to flip to light when the OS asks for a light appearance. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --color-bg: #FAF8F3; --color-bg-alt: #F0ECE3; --color-cream: #FFFFFF; --color-text: #2E2925; --color-muted: #6E645B; --color-border: #E4DCD0; --color-accent: #2E2925; --color-archive: #8A4B1C; --color-bg-invert: #2E2925; --color-text-invert: #FAF8F3; } }