/* CoachVocab design tokens Colors sampled directly from Flashcard App (1).jpeg */ :root { /* Surfaces */ --bg: #E8F0FD; --surface: #FFFFFF; --surface-sunken: #F4F8FE; /* Brand */ --primary: #0169F6; /* fills, pills, gradients — the mock's blue */ --primary-ink: #0A5FD8; /* the same blue as *text*, darkened to clear AA */ --primary-soft: #E3EEFE; --grad-from: #6170FD; --grad-to: #066BF9; --gradient: linear-gradient(135deg, var(--grad-from) 0%, var(--grad-to) 100%); /* Accent */ --accent: #F5883A; --accent-to: #F9A857; --accent-gradient: linear-gradient(135deg, var(--accent-to) 0%, var(--accent) 100%); /* Pastel stat tiles. Backgrounds are the mock's. The inks are darkened from the mock's pastels, which sat at 1.8–2.8:1 against their own tiles — too low to read. */ --tile-lavender: #F6F4FF; --tile-lavender-ink: #6355D8; --tile-peach: #FCF3E2; --tile-peach-ink: #A9661A; --tile-mint: #E9F8F1; --tile-mint-ink: #197F54; --tile-rose: #FDEFF3; --tile-rose-ink: #C43A63; /* Ink */ --ink: #141C2F; --ink-soft: #4A5670; --ink-muted: #5F6979; --ink-faint: #98A2B3; /* Semantic — grading, verdicts, timer states */ --good: #197F54; --good-soft: #E9F8F1; --warn: #A9661A; --warn-soft: #FCF3E2; --bad: #C43A63; --bad-soft: #FDEFF3; /* Lines & tracks */ --track: #E9EEF6; --hairline: #EDF1F8; --toggle-bg: #DCE7F9; --panel-body: linear-gradient(180deg, #F4F8FE 0%, #FBFCFE 100%); /* Elevation */ --shadow: 0 8px 24px rgba(30, 45, 90, .06); --shadow-lg: 0 16px 40px rgba(30, 45, 90, .10); --shadow-accent: 0 8px 20px rgba(245, 136, 58, .35); --shadow-primary: 0 8px 20px rgba(1, 105, 246, .28); /* Radii */ --r-card: 20px; --r-tile: 16px; --r-pill: 28px; --r-sm: 10px; /* Rhythm */ --gap: 20px; --pad-card: 22px; --rail-w: 232px; /* Type */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } /* ========================================================================== Dark theme Set on by the inline script in index.html, so the correct palette is in place before first paint (no flash). js/theme.js handles the toggle and persistence. ========================================================================== */ :root[data-theme="dark"] { /* Surfaces — deep navy, keeping the blue cast of the light theme */ --bg: #0E1626; --surface: #1A2438; --surface-sunken: #151E2F; /* Brand — lifted so it holds contrast against a dark ground */ --primary: #3B8BFF; --primary-ink: #6BA6FF; --primary-soft: #1B2C4A; /* Pastel tiles become deep tints; the ink stays the identifying hue */ --tile-lavender: #232449; --tile-lavender-ink: #A99CFF; --tile-peach: #33291B; --tile-peach-ink: #F5B678; --tile-mint: #133026; --tile-mint-ink: #4FD6A0; --tile-rose: #331F2A; --tile-rose-ink: #F286A6; /* Ink */ --ink: #EEF3FB; --ink-soft: #C0CADC; --ink-muted: #8794AC; --ink-faint: #5C6880; /* Semantic */ --good: #4FD6A0; --good-soft: #133026; --warn: #F5B678; --warn-soft: #33291B; --bad: #F286A6; --bad-soft: #331F2A; /* Lines & tracks */ --track: #2B3750; --hairline: #253048; --toggle-bg: #141D2E; /* both stops stay darker than --surface, or the deck cards lose their edge */ --panel-body: linear-gradient(180deg, #121A29 0%, #161F31 100%); /* Elevation — dark themes need depth from shadow, not tint */ --shadow: 0 8px 24px rgba(0, 0, 0, .34); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .46); --shadow-primary: 0 8px 20px rgba(59, 139, 255, .30); }