/* ============================================================ THEME: EDITORIAL Warm paper, serif display type, deep teal accent. Reads like a trusted advisor / independent practice. ============================================================ */ /* The palette keys off data-theme on , which the inline script in index.html sets before first paint — from a saved choice if there is one, otherwise from prefers-color-scheme. That means one block per palette instead of a system-preference copy and a toggle copy kept in sync. Trade-off: with JS off everyone gets light. The mobile menu already needs JS, so this doesn't add a new dependency, and light is the default design. */ :root, :root[data-theme="light"] { color-scheme: light; --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-body: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --display-weight: 600; --display-tracking: -.015em; --h1-tracking: -.028em; --bg: #FBFAF7; --bg-alt: #F4F2ED; --surface: #FFFFFF; --ink: #14181D; --ink-soft: #3D454E; /* Tuned against --bg-alt, not --bg: muted text sits on tinted sections too, and the lighter value cleared 4.5 only on the plain background. */ --muted: #666F79; --accent: #0D7C6B; --accent-ink: #0A5F52; --accent-wash:#E6F2EF; --on-accent: #FFFFFF; --clay: #C2603C; --line: #E2DED6; --line-soft: #EDEAE3; --shadow: 0 1px 2px rgba(20,24,29,.04), 0 8px 24px -12px rgba(20,24,29,.14); --shadow-lg: 0 2px 4px rgba(20,24,29,.04), 0 24px 48px -20px rgba(20,24,29,.22); } :root[data-theme="dark"] { color-scheme: dark; --bg: #0C1013; --bg-alt: #11171B; --surface: #141B20; --ink: #EDF1F3; --ink-soft: #C3CBD1; --muted: #8F9AA3; --accent: #2FCDA8; --accent-ink: #5FE0C1; --accent-wash:#0F2A25; --on-accent: #06120F; --clay: #E8865E; --line: #232D34; --line-soft: #1B2429; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 24px 48px -20px rgba(0,0,0,.7); }