/* Design tokens. The default theme is bright: warm paper, ink text, a gold brand accent. Dark mode is opt-in via a toggle that sets data-theme="dark" on (persisted by /static/js/theme-init.js before first paint). */ :root { --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --color-bg: #faf7f5; --color-surface: #ffffff; --color-surface-2: #f0eae3; --color-border: #e6ded5; --color-border-strong: #181512; --color-text: #181512; --color-text-muted: #7d7468; --color-accent: #181512; --color-accent-strong: #3a342c; --color-accent-soft: #f0eae3; --color-on-accent: #fdfcfa; --color-gold: #d8b15f; --color-gold-soft: #f6ecd8; --color-love: #c8102e; --color-success: #227a46; --color-success-soft: #e6f2ea; --color-warning: #92690f; --color-warning-soft: #f7edd6; --color-danger: #bf1230; --color-danger-soft: #f9e7ea; --color-info-soft: #ece9e4; --color-focus: #0057b8; --color-overlay: rgba(24, 21, 18, 0.5); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-full: 999px; --border-thin: 1px solid var(--color-border); --shadow-sm: 0 1px 2px rgba(24, 21, 18, 0.06); --shadow-md: 0 8px 24px rgba(24, 21, 18, 0.1); --shadow-lg: 0 16px 48px rgba(24, 21, 18, 0.18); --z-header: 20; --z-nav: 20; --z-dialog: 50; --z-toast: 60; --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --track-wide: 0.08em; --track-tight: 0.02em; --header-height: 3.75rem; --bottom-nav-height: 3.75rem; --content-max: 60rem; --wide-max: 78rem; color-scheme: light; } :root[data-theme="dark"] { --color-bg: #16130f; --color-surface: #201c17; --color-surface-2: #2a251f; --color-border: #3c352d; --color-border-strong: #f4efe8; --color-text: #f4efe8; --color-text-muted: #a69c8f; --color-accent: #f4efe8; --color-accent-strong: #d9d1c5; --color-accent-soft: #2a251f; --color-on-accent: #181512; --color-gold: #d8b15f; --color-gold-soft: #3a3122; --color-love: #ff5d73; --color-success: #5cc389; --color-success-soft: #1e3226; --color-warning: #dcb75c; --color-warning-soft: #363018; --color-danger: #f2657f; --color-danger-soft: #3a2026; --color-info-soft: #262b30; --color-focus: #7fb0ff; --color-overlay: rgba(0, 0, 0, 0.65); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65); color-scheme: dark; }