/* theme.css Global design tokens + per-theme overrides Compatible with: */ /* 1) Base tokens (default = light) */ :root { /* Level palette (kept constant unless you explicitly override later) */ --entryLevel: rgb(178, 34, 34); /* firebrick */ --entryLevel-rgb: 178, 34, 34; --entryLevelHighlight: #F3DEDE; --beginnerLevel: rgb(255, 165, 0); /* orange */ --beginnerLevel-rgb: 255, 165, 0; --intermediateLevel: rgb(55, 116, 55); --intermediateLevel-rgb: 55, 116, 55; --upperIntermediateLevel: rgb(83, 83, 194); --upperIntermediateLevel-rgb: 83, 83, 194; --advancedLevel: rgb(15, 15, 15); --advancedLevel-rgb: 15, 15, 15; /* Literal colors (use sparingly; prefer semantic tokens below) */ --white: #ffffff; /* Semantic tokens (LIGHT defaults) */ --bg: #ffffff; /* page background */ --surface: #ffffff; /* cards/panels */ --surface-2: #f3f7ff; /* subtle tint surface */ --text: #1a1e30; /* primary text */ --text-muted: #4b5563; /* secondary text */ --border: #e1e1e1; /* borders/dividers */ --hover-bg: #f5f5f5; --hover-color: #1a1e30; /* hover backgrounds */ /* Header */ --header-bg: rgb(241, 242, 244); --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Gradients */ --cardGradient: linear-gradient(180deg, #f3f7ff 0%, #ffffff 60%); /* Existing project tokens (kept for compatibility) */ --steelBlue: #d9deef; --steelBlueLight: #d9deef73; /* Prefer using --text throughout; keep aliases so old CSS keeps working */ --textBlue: var(--text); --text-color: var(--text); --border-color: var(--border); /* Black and white for hard coded colors */ --black: black; --white: white; /* Inputs */ input, textarea, select { background: var(--surface); color: var(--text); border: 3px solid var(--border); caret-color: var(--text); } input::placeholder, textarea::placeholder { color: var(--control-placeholder, var(--text-muted)); } } /* 2) Explicit light (optional but useful for form controls) */ body.theme-light { color-scheme: light; } /* 3) Dark theme overrides */ body.theme-dark { color-scheme: dark; --entryLevelHighlight: firebrick; --bg: #0b0f19; --surface: #111827; --surface-2: #07173c; --text: #e5e7eb; --text-muted: #9ca3af; --border: #263042; --hover-bg: rgb(219, 219, 219); --hover-color: #1a1e30; --header-bg: #0f172a; --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); --cardGradient: linear-gradient(180deg, #2a3c63 0%, #111827 60%); --steelBlue: #1f2a44; --steelBlueLight: #1f2a4473; } /* 4) Sepia theme overrides */ body.theme-sepia { color-scheme: light; --entryLevelHighlight: rgba(178, 34, 34, 0.15); --bg: #f4ecd8; --surface: #fbf6e8; --surface-2: #f6db9c; --text: #3b2f2f; --text-muted: #5b4636; --border: #6e5932; --hover-bg: rgba(60, 47, 47, 0.08); --hover-color: #1a1e30; --header-bg: #efe3c8; --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); --cardGradient: linear-gradient(180deg, #ffeab3 0%, #efece4 60%); --steelBlue: #e7dcc2; --steelBlueLight: #e7dcc273; --entryLevelHighLight: #F4DEDE; } /* 5) System theme (defaults to light; switches when OS is dark) */ body.theme-system { color-scheme: light; } @media (prefers-color-scheme: dark) { body.theme-system { color-scheme: dark; --bg: #0b0f19; --surface: #182237; --surface-2: #030b1d; --text: #e5e7eb; --text-muted: #9ca3af; --border: #263042; --hover-bg: rgba(255, 255, 255, 0.06); --header-bg: #0f172a; --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); --cardGradient: linear-gradient(180deg, #2a3c63 0%, #111827 60%); --steelBlue: #1f2a44; --steelBlueLight: #1f2a4473; } .theme-menu-dark { background: black; border-radius: 45px; color: #e5e7eb; } }