/* ============================================================ WORTHY IDEAL — design tokens CSS custom properties: palette, fonts, radii, shadows. Supports light / dark theme via [data-theme] on . Card surfaces stay a constant warm cream in both themes; only the page background and page-level text switch. ============================================================ */ :root { /* constant palette — used only on card surfaces, in both themes */ --ink: #1A1815; --ink-soft: #4a463f; --ink-faint: #8b8578; --ivory: #F4EFE3; --card: #FFFDF8; --border: rgba(26, 24, 21, 0.13); --border-strong: rgba(26, 24, 21, 0.22); --shadow-1: 0 1px 2px rgba(26, 24, 21, 0.05), 0 6px 16px rgba(26, 24, 21, 0.06); --shadow-2: 0 2px 4px rgba(26, 24, 21, 0.06), 0 12px 28px rgba(26, 24, 21, 0.09); --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Cormorant SC", "Playfair Display", serif; --font-body: "Source Serif 4", Georgia, serif; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; } /* ---------- theme: dark (default) ---------- */ :root, [data-theme="dark"] { --page-bg: #17140F; --page-bg-alt: #1D1A14; --page-text: #F4EFE3; --page-text-soft: rgba(244, 239, 227, 0.72); --page-text-faint: rgba(244, 239, 227, 0.5); --page-border: rgba(244, 239, 227, 0.14); --page-border-strong: rgba(244, 239, 227, 0.30); --topbar-bg: rgba(23, 20, 15, 0.86); --tab-hover-bg: rgba(244, 239, 227, 0.08); --active-tab-bg: var(--ivory); --active-tab-text: var(--ink); --modal-backdrop: rgba(0, 0, 0, 0.62); } /* ---------- theme: light ---------- */ [data-theme="light"] { --page-bg: var(--ivory); --page-bg-alt: #ECE6D6; --page-text: var(--ink); --page-text-soft: var(--ink-soft); --page-text-faint: var(--ink-faint); --page-border: var(--border); --page-border-strong: var(--border-strong); --topbar-bg: rgba(244, 239, 227, 0.92); --tab-hover-bg: rgba(26, 24, 21, 0.06); --active-tab-bg: var(--ink); --active-tab-text: var(--ivory); --modal-backdrop: rgba(26, 24, 21, 0.45); }