/* ========================================================================== Theme System — switch via class on Available: .theme-light (default), .theme-dark, .theme-warm ========================================================================== */ :root, .theme-light { --color-bg: #faf8f5; --color-bg-alt: #f0ebe4; --color-surface: #ffffff; --color-text: #1a1816; --color-text-muted: #6b635a; --color-accent: #2a2520; --color-accent-hover: #4a4540; --color-border: #e0d8cf; --color-overlay: rgba(26, 24, 22, 0.45); --font-display: "Georgia", "Times New Roman", serif; --font-body: "Helvetica Neue", Arial, sans-serif; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --radius: 2px; --max-width: 1200px; --header-height: 72px; --header-offset: calc(var(--header-height) + env(safe-area-inset-top, 0px)); } .theme-dark { --color-bg: #111110; --color-bg-alt: #1a1918; --color-surface: #222120; --color-text: #f5f0eb; --color-text-muted: #9a928a; --color-accent: #f5f0eb; --color-accent-hover: #d4ccc4; --color-border: #333230; --color-overlay: rgba(0, 0, 0, 0.6); } .theme-warm { --color-bg: #f7f2ec; --color-bg-alt: #ede4d8; --color-surface: #faf6f1; --color-text: #3d2e1f; --color-text-muted: #8a7560; --color-accent: #6b4c30; --color-accent-hover: #8a6340; --color-border: #d9cbb8; --color-overlay: rgba(61, 46, 31, 0.5); }