/* Sofia Brand Tokens v1.0 * Palette, typography, spacing, radii, shadows. * Loaded FIRST by both index.html and admin.html. * Overrides for dark mode live at the bottom ([data-theme="dark"]). */ :root { /* Primary palette */ --forest: #2E4A3A; --forest-deep: #1E3326; --cream: #FAF7F1; --cream-2: #F2ECDC; --paper: #EFE7D3; --terracotta: #C97A3E; --terracotta-deep: #A85E28; --honey: #D9B382; --sage: #8AA394; --sage-soft: #B6C2A8; --ink: #1A1F1C; --ink-soft: #3F4A42; --rule: rgba(46, 74, 58, 0.18); --danger: #B43A2A; /* Surfaces (light theme) */ --surface: var(--cream); --surface-2: var(--cream-2); --surface-3: var(--paper); --surface-ink: var(--forest); --text: var(--ink); --text-soft: var(--ink-soft); --text-invert: var(--cream); /* Typography */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (user UI leans large for elderly readability) */ --fs-eyebrow: 14px; --fs-body: 24px; --fs-label: 16px; --fs-bubble: 30px; --fs-title: 48px; --fs-hero: 96px; /* Tracking */ --tr-eyebrow: 0.22em; --tr-wordmark: 0.02em; /* Radii */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 100px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(26, 31, 28, 0.06); --shadow-md: 0 8px 24px rgba(26, 31, 28, 0.10); --shadow-ring: 0 0 0 3px var(--sage); /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 0.15s; --dur-med: 0.28s; } /* Dark theme override (opt-in via localStorage -> ) */ [data-theme="dark"] { --surface: var(--forest-deep); --surface-2: var(--forest); --surface-3: #182720; --surface-ink: var(--cream); --text: var(--cream); --text-soft: var(--sage-soft); --text-invert: var(--ink); --rule: rgba(250, 247, 241, 0.12); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); }