/* apps/web/src/styles/tokens.css Canonical design tokens. Dark is the default (:root); light overrides live under :root.light (the .light class is set on ). The legacy --tone-* and --serif-display names are kept as aliases so existing component CSS flips with the theme without per-file rewrites. */ :root { /* Type families */ --serif: "Newsreader", Georgia, "Times New Roman", serif; /* body + headings */ --ui: "Archivo", "Helvetica Neue", Arial, sans-serif; /* labels/nav/buttons */ --wordmark: "EB Garamond", Georgia, "Times New Roman", serif; /* logo lockup only */ /* Easing */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-settle: cubic-bezier(0.16, 1, 0.3, 1); /* Palette — DARK (default) — HLW warm divergence from GH: parchment/espresso/ terracotta drawn from the book cover. Accent = terracotta; --plum/--mauve are the cover's deep secondary tones, used sparingly for depth (hero aura, rules). */ --bg:#15120F; --bg-2:#1F1A15; --text:#EFE7D8; --text-2:#B3A795; --text-3:#8E8273; --line:#2C2620; --line-2:#3A332B; --accent:#D98E5A; --accent-ink:#15120F; --plum:#8A5E72; --mauve:#A8889A; --hair-color: color-mix(in srgb, #9A8E7A 42%, transparent); --shadow: 0 44px 80px rgba(0,0,0,.62); /* Aliases — keep existing components working */ --serif-body: var(--serif); --sans: var(--ui); --serif-display: var(--serif); --tone-bg: var(--bg); --tone-fg: var(--text); --tone-soft: var(--text-2); --tone-accent: var(--accent); --tone-rule: var(--line); /* Layout tokens — v4 band/edge system */ --hair:.5px; --logo:18px; --pad:clamp(20px,5vw,80px); --maxw:1320px; --edge:max(var(--pad), calc((100vw - var(--maxw))/2 + var(--pad))); } :root.light { --bg:#F5F1E8; --bg-2:#ECE5D7; --text:#2A1D1A; --text-2:#5C5044; --text-3:#6E6253; --line:#E0D8C8; --line-2:#D2C8B5; --accent:#9E5226; --accent-ink:#F5F1E8; --plum:#6E4456; --mauve:#8C6678; --hair-color: color-mix(in srgb, #7A6A55 62%, transparent); --shadow: 0 40px 70px rgba(60,40,20,.16); } @media (min-width:1440px){ :root{ --maxw:1480px; --pad:clamp(44px,3vw,56px); } }