/* Anchor Design Tokens — derived from Anchor-Design-System.docx (Master-Doc v2.0) * Single source of truth. Do not hardcode hex values anywhere else. * Philosophy: Paper + Ink as base. Navy as primary accent. Gold RARE on purpose. */ :root { /* ── Paper Tones (Light Mode Backgrounds) ── */ --paper: #F5EFE3; /* Primary background, replaces white */ --paper-soft: #FAF6EC; /* Slightly lighter, hover/elevated */ --paper-deep: #EDE4D2; /* Card backgrounds, elevated surfaces */ --paper-shadow: #E0D4BC; /* Pressed/active states */ /* ── Ink Tones (Text on Light) ── */ --ink: #1A1410; /* Primary text, headings — warm near-black */ --ink-soft: #3D3530; /* Secondary text, subtitles */ --ink-muted: #6E6258; /* Captions, metadata */ --ink-faint: #9B8E7E; /* Disabled, placeholders */ /* ── Accent (Primary) — Navy, not Gold ── */ --accent: #0F2B4A; /* Deep navy — primary accent, streaks badge */ --accent-2: #173E66; /* Lighter navy, gradient end */ --accent-soft: #2E5786; /* Hover/interactive state */ /* ── Gold — RESERVED for meaningful achievement ── */ /* Use sparingly: Founding Reader, Streak milestones, Logo accent. Not for buttons/links. */ --gold: #A87C2A; /* Aged bronze — rare on purpose */ --gold-soft: #C4972F; /* Hover state for gold elements */ --gold-pale: #E5C570; /* Highlights on dark surfaces */ /* ── Functional ── */ --highlight: #F4D58A; /* Default verse highlight */ --rose: #B85450; /* Bookmarks, destructive */ --green: #5C7A4F; /* Verified, success */ --line: #D6CAB3; /* Primary borders, dividers */ --line-soft: #E5DBC7; /* Lighter dividers */ /* ── Semantic aliases (light mode active) ── */ --bg: var(--paper); --bg-elevated: var(--paper-soft); --bg-card: var(--paper-deep); --bg-pressed: var(--paper-shadow); --text: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-muted); --text-faint: var(--ink-faint); --border: var(--line); --border-soft: var(--line-soft); --link: var(--accent-soft); /* ── Type & Spacing (from Design-System Typography section) ── */ --font-serif: 'Crimson Pro', 'Iowan Old Style', 'Palatino', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow-soft: 0 2px 12px rgba(26,20,16,0.06); --shadow-card: 0 4px 24px rgba(26,20,16,0.08); } /* ── Dark Mode — applied via prefers-color-scheme OR [data-theme="dark"] on ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0E0908; /* Ink Deep — primary dark background */ --bg-elevated: #1A1410; /* Ink Surface */ --bg-card: #2A2520; /* Ink Elevated */ --bg-pressed: #3D3530; --text: var(--paper); /* Paper Light as text */ --text-secondary: #C9C0A8; /* Paper Dim */ --text-muted: #8A7E6E; /* Text Muted Dark */ --text-faint: #6E6258; --border: rgba(245,239,227,0.12); --border-soft: rgba(245,239,227,0.06); --link: var(--accent-soft); /* Lifted Navy works on dark */ } } :root[data-theme="dark"] { --bg: #0E0908; --bg-elevated: #1A1410; --bg-card: #2A2520; --bg-pressed: #3D3530; --text: var(--paper); --text-secondary: #C9C0A8; --text-muted: #8A7E6E; --text-faint: #6E6258; --border: rgba(245,239,227,0.12); --border-soft: rgba(245,239,227,0.06); --link: var(--accent-soft); } :root[data-theme="light"] { /* forced light — already default, explicit override to beat prefers-color-scheme */ --bg: var(--paper); --bg-elevated: var(--paper-soft); --bg-card: var(--paper-deep); --bg-pressed: var(--paper-shadow); --text: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-muted); --text-faint: var(--ink-faint); --border: var(--line); --border-soft: var(--line-soft); --link: var(--accent-soft); }