/* ============================================================================ * theme.css — design tokens (both themes) + reset + base element styles. * * The CSS-variable mechanism is the platform's theming substrate (compass D-015, * principle #6): TWO theme variable sets, ready from the first component written. * :root → Timeless Classic (default; dark, amber accent) * [data-theme="historic"] → Historic (sepia, period serif; colors + fonts ONLY) * The attribute lives on and is set server-side-driven after auth (theme * preference is stored in the user's profile, NOT in browser storage). Logged-out * surfaces render the default Timeless Classic. * * SPACING / RADII / TYPE SCALE are theme-INVARIANT (compass D-015: "same spacing, * same layout; only fonts and colors differ") — they live at :root and are never * overridden by a theme block. * * Timeless Classic values are lifted from mockups/styles.css (the design source). * The Historic palette below is an AA-TARGETED FIRST PASS: the exact sepia hexes * are not yet pinned by any doc (compass only fixes the direction — "sepia-tinted, * period serif, minimal changes"). Formal WCAG AA contrast verification for both * themes is a documented pre-launch gate (compass D-042 / line 302; task 11). * ========================================================================== */ :root { /* ---- Timeless Classic palette (default) ---- */ --bg: #0e0e0e; --bg-elev: #161616; --surface: #1c1c1c; --surface-2: #262626; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --text: #f1e9d8; --text-muted: #8a8273; --text-faint: #5c574d; --accent: #d4a05a; /* amber */ --accent-soft: rgba(212, 160, 90, 0.18); --on-accent: #1a1208; /* text/icon color on an --accent fill */ --danger: #d46a5a; --danger-soft: rgba(212, 106, 90, 0.15); --success: #6faa5f; --page-bg: #050505; /* viewport backdrop behind the app shell */ /* Media-type accents (pins, badges) — shared vocabulary, theme-invariant hues */ --pin-photo: #5fa8d4; --pin-story: #d4a05a; --pin-video: #d46a5a; /* ---- Fonts ---- */ --serif: Georgia, 'Times New Roman', serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: var(--sans); /* the theme-switched body face */ --font-display: var(--serif); /* headings / wordmark */ /* ---- Theme-invariant tokens (never overridden per D-015) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --fs-base: 14px; --line-base: 1.4; --focus-ring: 2px solid var(--accent); --focus-offset: 2px; --content-max: 420px; /* mobile-first single-column max width */ } /* Historic — colors + fonts only. Aged-paper / sepia; period serif everywhere. */ [data-theme="historic"] { --bg: #f2e8d5; --bg-elev: #ece0c8; --surface: #f7efdf; --surface-2: #e8dcc4; --border: rgba(43, 32, 22, 0.14); --border-strong: rgba(43, 32, 22, 0.28); --text: #2b2016; /* dark warm brown on parchment ≈ 10:1 */ --text-muted: #6b5a42; --text-faint: #8a7a60; --accent: #8a5a1e; /* darkened amber for AA on a light ground */ --accent-soft: rgba(138, 90, 30, 0.16); --on-accent: #f7efdf; /* light text on the darker Historic amber */ --danger: #a2402e; --danger-soft: rgba(162, 64, 46, 0.14); --success: #4d6b34; --page-bg: #e6d8bf; /* Period serif faces (system-only; font-src 'self' forbids web fonts). The whole UI shifts to serif in Historic — the "sliding into Historic mode" delight (compass line 144). */ --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif; --font-body: var(--serif); --font-display: var(--serif); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--page-bg); color: var(--text); line-height: var(--line-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.25; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Keyboard-visible focus ring on every interactive element. Never removed — keyboard navigation is a hard accessibility commitment (compass D-042). */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } button { font-family: inherit; } /* Respect reduced-motion; platform animations are already ≤200ms transform/opacity. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }