/* ════════════════════════════════════════════════════════════════════
   COLOR SCHEMES — shared across all app pages (typing, lessons,
   keyboard-warrior, leaderboard, profile). Applied via a class on
   <html>: theme-<name>. `theme-light` also enables the light-family
   component overrides defined inside each page's own stylesheet.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --mono: 'Share Tech Mono', monospace;
  --display: 'Orbitron', sans-serif;
}

/* ── DARK (default) ── */
.theme-dark {
  --bg: #0a0a0a;
  --panel-bg: #0d0d0d;
  --grid-color: rgba(255,255,255,0.04);
  --grid-line: rgba(255,255,255,0.06);
  --text-dim: rgba(255,255,255,0.3);
  --text-mid: rgba(255,255,255,0.55);
  --text-bright: rgba(255,255,255,0.85);
  --orange: #ff6a00;
  --orange-glow: rgba(255,106,0,0.3);
  --red: #ff2244;
  --red-glow: rgba(255,34,68,0.4);
  --green: #3ddc84;
  --hit-line: rgba(255,255,255,0.15);
  --main-color: #d1d0c5;
  --sub-color: #646669;
  --caret-color: #e2b714;
  --blue: #4aa3ff;
}

/* ── MIDNIGHT (deep indigo) ── */
.theme-midnight {
  --bg: #0a0e26;
  --panel-bg: #0f1738;
  --grid-color: rgba(255,255,255,0.05);
  --grid-line: rgba(255,255,255,0.08);
  --text-dim: rgba(255,255,255,0.32);
  --text-mid: rgba(255,255,255,0.58);
  --text-bright: rgba(255,255,255,0.88);
  --orange: #ff9f43;
  --orange-glow: rgba(255,159,67,0.35);
  --red: #ff4d6d;
  --red-glow: rgba(255,77,109,0.4);
  --green: #3ddc84;
  --hit-line: rgba(255,255,255,0.16);
  --main-color: #d7dcff;
  --sub-color: #5f6a9c;
  --caret-color: #8b9dff;
  --blue: #7aa5ff;
}

/* ── FOREST (deep green) ── */
.theme-forest {
  --bg: #0c1710;
  --panel-bg: #12231a;
  --grid-color: rgba(255,255,255,0.05);
  --grid-line: rgba(255,255,255,0.08);
  --text-dim: rgba(255,255,255,0.32);
  --text-mid: rgba(255,255,255,0.58);
  --text-bright: rgba(255,255,255,0.88);
  --orange: #a8e063;
  --orange-glow: rgba(168,224,99,0.35);
  --red: #ff6b6b;
  --red-glow: rgba(255,107,107,0.4);
  --green: #9ff0c0;
  --hit-line: rgba(255,255,255,0.16);
  --main-color: #d6ffe3;
  --sub-color: #4f7f63;
  --caret-color: #6ee7a0;
  --blue: #4aa3ff;
}

/* ── OCEAN (deep blue) ── */
.theme-ocean {
  --bg: #07131f;
  --panel-bg: #0d1f30;
  --grid-color: rgba(255,255,255,0.05);
  --grid-line: rgba(255,255,255,0.08);
  --text-dim: rgba(255,255,255,0.32);
  --text-mid: rgba(255,255,255,0.58);
  --text-bright: rgba(255,255,255,0.88);
  --orange: #29c8e8;
  --orange-glow: rgba(41,200,232,0.35);
  --red: #ff5f7a;
  --red-glow: rgba(255,95,122,0.4);
  --green: #3ddc84;
  --hit-line: rgba(255,255,255,0.16);
  --main-color: #d8f3ff;
  --sub-color: #4d7fa0;
  --caret-color: #4fc3f7;
  --blue: #6ab8ff;
}

/* ── SUNSET (deep plum / coral) ── */
.theme-sunset {
  --bg: #1a0f1e;
  --panel-bg: #291832;
  --grid-color: rgba(255,255,255,0.05);
  --grid-line: rgba(255,255,255,0.08);
  --text-dim: rgba(255,255,255,0.32);
  --text-mid: rgba(255,255,255,0.58);
  --text-bright: rgba(255,255,255,0.9);
  --orange: #ff8a5c;
  --orange-glow: rgba(255,138,92,0.35);
  --red: #ff3e6c;
  --red-glow: rgba(255,62,108,0.4);
  --green: #3ddc84;
  --hit-line: rgba(255,255,255,0.16);
  --main-color: #ffe6f0;
  --sub-color: #9a6a86;
  --caret-color: #ff7ab8;
  --blue: #b78cff;
}

/* ── AMETHYST (deep purple) ── */
.theme-amethyst {
  --bg: #150f24;
  --panel-bg: #201a36;
  --grid-color: rgba(255,255,255,0.05);
  --grid-line: rgba(255,255,255,0.08);
  --text-dim: rgba(255,255,255,0.32);
  --text-mid: rgba(255,255,255,0.58);
  --text-bright: rgba(255,255,255,0.9);
  --orange: #c084fc;
  --orange-glow: rgba(192,132,252,0.35);
  --red: #ff6b9d;
  --red-glow: rgba(255,107,157,0.4);
  --green: #3ddc84;
  --hit-line: rgba(255,255,255,0.16);
  --main-color: #e9e0ff;
  --sub-color: #8577b3;
  --caret-color: #b78cff;
  --blue: #9aa5ff;
}

/* ── PAPER (warm charcoal) ── */
.theme-paper {
  --bg: #141312;
  --panel-bg: #1b1a19;
  --grid-color: rgba(255,255,255,0.04);
  --grid-line: rgba(255,255,255,0.07);
  --text-dim: rgba(255,255,255,0.32);
  --text-mid: rgba(255,255,255,0.58);
  --text-bright: rgba(255,255,255,0.9);
  --orange: #ff6a00;
  --orange-glow: rgba(255,106,0,0.3);
  --red: #ff2244;
  --red-glow: rgba(255,34,68,0.4);
  --green: #3ddc84;
  --hit-line: rgba(255,255,255,0.16);
  --main-color: #e9e5de;
  --sub-color: #6e6a62;
  --caret-color: #e2b714;
  --blue: #4aa3ff;
}

/* ── MIST (cool slate) ── */
.theme-mist {
  --bg: #0f1217;
  --panel-bg: #171b22;
  --grid-color: rgba(255,255,255,0.05);
  --grid-line: rgba(255,255,255,0.07);
  --text-dim: rgba(255,255,255,0.32);
  --text-mid: rgba(255,255,255,0.58);
  --text-bright: rgba(255,255,255,0.9);
  --orange: #5b9bd5;
  --orange-glow: rgba(91,155,213,0.35);
  --red: #ff5f7a;
  --red-glow: rgba(255,95,122,0.4);
  --green: #3ddc84;
  --hit-line: rgba(255,255,255,0.16);
  --main-color: #dfe8f2;
  --sub-color: #5d6a7d;
  --caret-color: #7fb2e5;
  --blue: #6ab8ff;
}

/* ── SAND (warm dark sand) ── */
.theme-sand {
  --bg: #15120c;
  --panel-bg: #1c1810;
  --grid-color: rgba(255,255,255,0.05);
  --grid-line: rgba(255,255,255,0.07);
  --text-dim: rgba(255,255,255,0.32);
  --text-mid: rgba(255,255,255,0.58);
  --text-bright: rgba(255,255,255,0.9);
  --orange: #e89b3f;
  --orange-glow: rgba(232,155,63,0.35);
  --red: #ff6445;
  --red-glow: rgba(255,100,69,0.4);
  --green: #3ddc84;
  --hit-line: rgba(255,255,255,0.16);
  --main-color: #eee6d3;
  --sub-color: #8a7a58;
  --caret-color: #e0b45c;
  --blue: #4aa3ff;
}

/* ── LILAC (soft deep mauve) ── */
.theme-lilac {
  --bg: #151019;
  --panel-bg: #1d1926;
  --grid-color: rgba(255,255,255,0.05);
  --grid-line: rgba(255,255,255,0.07);
  --text-dim: rgba(255,255,255,0.32);
  --text-mid: rgba(255,255,255,0.58);
  --text-bright: rgba(255,255,255,0.9);
  --orange: #d692f0;
  --orange-glow: rgba(214,146,240,0.35);
  --red: #ff6b9d;
  --red-glow: rgba(255,107,157,0.4);
  --green: #3ddc84;
  --hit-line: rgba(255,255,255,0.16);
  --main-color: #efe6fa;
  --sub-color: #83749a;
  --caret-color: #c9a3f0;
  --blue: #a587ff;
}

/* ── MINT (deep teal) ── */
.theme-mint {
  --bg: #0b1714;
  --panel-bg: #12211c;
  --grid-color: rgba(255,255,255,0.05);
  --grid-line: rgba(255,255,255,0.07);
  --text-dim: rgba(255,255,255,0.32);
  --text-mid: rgba(255,255,255,0.58);
  --text-bright: rgba(255,255,255,0.9);
  --orange: #45d6a8;
  --orange-glow: rgba(69,214,168,0.35);
  --red: #ff5f7a;
  --red-glow: rgba(255,95,122,0.4);
  --green: #9ff0c0;
  --hit-line: rgba(255,255,255,0.16);
  --main-color: #d9f7ec;
  --sub-color: #4f8a74;
  --caret-color: #4fd6a8;
  --blue: #4aa3ff;
}

/* ── LIGHT (existing bright theme) ── */
.theme-light {
  --bg: #eef0f5;
  --panel-bg: #ffffff;
  --grid-color: rgba(0,0,0,0.05);
  --grid-line: rgba(0,0,0,0.09);
  --text-dim: rgba(0,0,0,0.38);
  --text-mid: rgba(0,0,0,0.62);
  --text-bright: rgba(0,0,0,0.9);
  --orange: #ff6a00;
  --orange-glow: rgba(255,106,0,0.3);
  --red: #ff2244;
  --red-glow: rgba(255,34,68,0.4);
  --green: #3ddc84;
  --hit-line: rgba(0,0,0,0.18);
  --main-color: #323437;
  --sub-color: #d1d0c5;
  --caret-color: #e2b714;
  --blue: #4aa3ff;
}