/* Hearth design tokens (spec §15.4, handoff README §Design Tokens). OKLCH values verbatim. Light is the default; [data-theme="dark"] on overrides the theme-dependent set. Non-theme tokens (type, space, radii) live in :root. */ :root { /* Typography */ --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; /* Type scale (px) — serif display/names, sans UI/body */ --fs-app-title: 29px; --fs-thread-person: 22px; --fs-subject: 23px; /* --fs-scale is a body-text multiplier (Settings text size); it defaults to 1 and is set on via the setTextScale port. It scales the reading content tokens below, not nav/title chrome. */ --fs-scale: 1; --fs-contact-name: calc(17.5px * var(--fs-scale)); --fs-nav-title: 17px; --fs-sender: calc(15px * var(--fs-scale)); --fs-body: calc(15.5px * var(--fs-scale)); --fs-editor: calc(16px * var(--fs-scale)); --fs-label: 13.5px; --fs-meta: 12px; --fs-section: 11.5px; --lh-body: 1.6; --ls-section: 0.7px; /* Spacing */ --space-page: 16px; --space-card: 14px; --space-row-y: 12px; /* Radii */ --radius-card: 15px; --radius-input: 14px; --radius-segment: 10px; --radius-image: 12px; --radius-pill: 999px; /* Accent (coral) — theme-independent */ --accent: oklch(0.585 0.2 28); --accent-hover: oklch(0.5 0.2 28); --accent-contrast: #ffffff; --success: oklch(0.62 0.14 145); /* Avatar hues (used as oklch(0.6 0.15 )) */ --avatar-coral: oklch(0.6 0.15 28); --avatar-blue: oklch(0.6 0.15 255); --avatar-green: oklch(0.6 0.15 150); --avatar-violet: oklch(0.6 0.15 300); --avatar-gold: oklch(0.6 0.15 85); --avatar-teal: oklch(0.6 0.15 200); /* Shadows */ --shadow-card: 0 1px 2px rgba(20, 22, 30, 0.06); --shadow-accent: 0 2px 8px oklch(0.585 0.2 28 / 0.35); --blur-header: blur(14px); /* Light theme (default) */ --bg: oklch(0.985 0.004 255); --surface: #ffffff; --ink: oklch(0.24 0.008 260); --muted: oklch(0.52 0.01 260); --muted-strong: oklch(0.46 0.012 260); --hairline: oklch(0.92 0.004 255); --hairline-light: oklch(0.93 0.004 255); --accent-soft: oklch(0.986 0.011 30); --segment-track: oklch(0.94 0.004 255); --surface-blur: oklch(1 0 0 / 0.82); --danger-text: oklch(0.5 0.2 28); --warn: oklch(0.56 0.13 70); } [data-theme="dark"] { --bg: oklch(0.19 0.008 265); --surface: oklch(0.25 0.01 265); --ink: oklch(0.95 0.006 260); --muted: oklch(0.68 0.012 260); --muted-strong: oklch(0.68 0.012 260); --hairline: oklch(0.33 0.01 265); --hairline-light: oklch(0.33 0.01 265); --accent-soft: oklch(0.28 0.03 30); --segment-track: oklch(0.3 0.012 265); --surface-blur: oklch(0.25 0.01 265 / 0.82); --danger-text: oklch(0.78 0.14 28); --warn: oklch(0.8 0.13 75); }