/* ─── Paper Design System Tokens ─── */ /* Note: Lato font loaded via in HTML for faster discovery */ :root { /* Paper Colors */ --paper-bg: #FAF9F6; --paper-hover: #F2F0EC; --paper-chalkboard: #2A2A28; /* Ink Blue — interactive UI accent */ --ink-blue: #3D5A80; --ink-blue-hover: #34506F; --ink-blue-10: rgba(61, 90, 128, 0.1); /* AI Orange — EXCLUSIVELY for AI-generated content */ --ai-orange: #E86F2C; --ai-orange-5: rgba(232, 111, 44, 0.05); /* Text Hierarchy */ --text-primary: #333333; --text-secondary: #888888; --text-tertiary: #AAAAAA; /* Rules & Dividers */ --rule: rgba(0, 0, 0, 0.08); --rule-strong: rgba(0, 0, 0, 0.15); /* Status */ --success: #4A8C5C; --success-bg: rgba(74, 140, 92, 0.1); --error: #A64B2A; --error-bg: rgba(166, 75, 42, 0.06); /* Typography */ --font: 'Lato', system-ui, -apple-system, sans-serif; --tracking: 0.3px; --line-height: 1.45; /* Spacing — 4pt grid */ --xxs: 4px; --xs: 8px; --xsm: 12px; --sm: 16px; --md: 24px; --lg: 32px; --xl: 48px; --xxl: 64px; --hero: 96px; /* Layout */ --max-content: 960px; --max-text: 680px; --max-narrow: 520px; } /* ─── Dark Mode ─── */ /* Applied via [data-theme="dark"] class (manual toggle) OR system preference */ [data-theme="dark"] { --paper-bg: #121212; --paper-hover: #1E1E1E; --ink-blue: #7BA3D0; --ink-blue-hover: #8FB4DC; --ink-blue-10: rgba(123, 163, 208, 0.1); --ai-orange: #F08C56; --ai-orange-5: rgba(240, 140, 86, 0.06); --text-primary: #E0E0E0; --text-secondary: #9E9E9E; --text-tertiary: #6E6E6E; --rule: rgba(255, 255, 255, 0.08); --rule-strong: rgba(255, 255, 255, 0.15); --success: #66BB6A; --success-bg: rgba(102, 187, 106, 0.1); --error: #D4845A; --error-bg: rgba(212, 132, 90, 0.08); } /* System preference fallback (when no manual choice is stored) */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --paper-bg: #121212; --paper-hover: #1E1E1E; --ink-blue: #7BA3D0; --ink-blue-hover: #8FB4DC; --ink-blue-10: rgba(123, 163, 208, 0.1); --ai-orange: #F08C56; --ai-orange-5: rgba(240, 140, 86, 0.06); --text-primary: #E0E0E0; --text-secondary: #9E9E9E; --text-tertiary: #6E6E6E; --rule: rgba(255, 255, 255, 0.08); --rule-strong: rgba(255, 255, 255, 0.15); --success: #66BB6A; --success-bg: rgba(102, 187, 106, 0.1); --error: #D4845A; --error-bg: rgba(212, 132, 90, 0.08); } }