/* ============================================================ Lectio v3 — Design Tokens Three runtime-switchable themes via CSS custom properties. Apply [data-theme="warm|minimal|dark"] on . ============================================================ */ :root, [data-theme="warm"] { --canvas: #F6F0E3; --canvas-alt: #ECE4D0; --surface: #FBF7EC; --surface-alt: #F4EEDE; --line: rgba(70, 50, 25, 0.14); --line-strong: rgba(70, 50, 25, 0.30); --ink: #2A2218; --ink-muted: #5E5139; --ink-faint: #6D5A44; /* was #7D6E54 — bumped for WCAG AA (~5.8:1) on parchment */ --accent: #6E461F; --accent-hover: #543411; --accent-soft: #E6D9BE; --accent-ink: #FBF7EC; --success: #5A7A3E; --danger: #A44032; --overlay: rgba(20, 14, 8, 0.45); /* modal/auth scrim */ --radius: 4px; --radius-lg: 8px; --texture-opacity: 0.07; --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Crimson Pro", Georgia, serif; --font-ui: "Inter Tight", system-ui, sans-serif; --font-mono: "JetBrains Mono", monospace; --font-hebrew: "Noto Serif Hebrew", serif; --font-greek: "Noto Serif", serif; --shadow-card: 0 1px 2px rgba(70, 50, 25, 0.06), 0 4px 12px rgba(70, 50, 25, 0.05); --shadow-popover: 0 18px 48px rgba(70, 50, 25, 0.18); } [data-theme="minimal"] { --canvas: #F7F6F2; --canvas-alt: #EFEDE6; --surface: #FFFFFF; --surface-alt: #FAFAF6; --line: rgba(20, 18, 14, 0.10); --line-strong: rgba(20, 18, 14, 0.24); --ink: #141210; --ink-muted: #4A463E; --ink-faint: #6F6B62; --accent: #1F3A5F; --accent-hover: #14263F; --accent-soft: #D9E1EC; --accent-ink: #FFFFFF; --success: #2F6A3A; --danger: #9A2E24; --overlay: rgba(20, 18, 14, 0.40); --radius: 2px; --radius-lg: 4px; --texture-opacity: 0; --font-display: "Fraunces", Georgia, serif; --font-body: "Source Serif 4", Georgia, serif; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04); --shadow-popover: 0 18px 48px rgba(0, 0, 0, 0.14); } [data-theme="dark"] { --canvas: #17140E; --canvas-alt: #1E1A13; --surface: #221E16; --surface-alt: #2A261D; --line: rgba(255, 240, 210, 0.10); --line-strong: rgba(255, 240, 210, 0.24); --ink: #F2EADA; --ink-muted: #BFB49A; --ink-faint: #8A8068; --accent: #D4B062; --accent-hover: #E2C57E; --accent-soft: #3A321F; --accent-ink: #17140E; --success: #8BB061; --danger: #D56A5A; --overlay: rgba(0, 0, 0, 0.6); --radius: 4px; --radius-lg: 8px; --texture-opacity: 0; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-popover: 0 18px 48px rgba(0, 0, 0, 0.55); }