/* * Design tokens — spec §3 (justine-duquette-spec.md) * Nothing elsewhere in the CSS should hard-code a colour, size or font * that isn't derived from this block. */ :root { /* Colour */ --brand-primary: #6b8f5e; /* TODO(spec §3 open item): accent currently equals primary — pick the real second colour for the "Complementary Pop" strategy before build, or switch to "Monochrome + One Accent" and update this comment. */ --brand-accent: #6b8f5e; --color-ink: #2f3a2f; --color-ink-soft: #6f7a6a; --color-bg: #f3f1e9; --color-surface: #ffffff; --color-dark: #101828; --color-border: #dfe2d5; /* Typography */ --font-heading: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --heading-weight: 500; --heading-tracking: -0.01em; --text-base: 1rem / 1.6; --h1: clamp(2.25rem, 5vw, 3.5rem); /* Shape, depth and space */ --radius: 24px; --border-width: 1px; --shadow: 0 3px 14px rgba(47, 58, 47, .07); --container-max: 1440px; --section-padding: clamp(5rem, 10vw, 9rem); --space-unit: 0.25rem; /* Motion */ --transition-base: 320ms cubic-bezier(.22, .61, .36, 1); --reveal: fade-up 700ms; } /* * Dark mode — spec §3: system preference + manual toggle, persisted in * localStorage, applied via [data-color-scheme] on before first * paint. Same token names, so nothing else in the CSS needs to change. */ :root[data-color-scheme="dark"] { --brand-primary: #86ab78; --brand-accent: #86ab78; --color-ink: #f3f1e9; --color-ink-soft: #a9b3a0; --color-bg: #101828; --color-surface: #1b2330; --color-border: #2a3140; --shadow: 0 3px 14px rgba(0, 0, 0, .35); }