/* ============================================================
   Three themes, selected via [data-theme] on <html>. Each is a
   complete palette - midnight-glass and deep-violet are dark,
   frost-light is light, satisfying both the "3 themes" and
   "dark/light mode" requirements in one mechanism.
   ============================================================ */

/* ---------- Midnight Glass (default) ---------- */
html[data-theme="midnight-glass"] {
  --bg: #0b0c14;
  --bg-elevated: #10111f;
  --surface: #12131f;
  --surface-2: #181a2b;
  --surface-glass: rgba(255, 255, 255, 0.055);
  --surface-glass-strong: rgba(255, 255, 255, 0.1);
  --text-primary: #f5f5fb;
  --text-secondary: #a6a8c4;
  --text-muted: #6c6e8f;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --primary: #7c6bf5;
  --primary-light: #9a8bf9;
  --primary-dark: #5a48d6;
  --secondary: #b19cf7;
}

/* ---------- Frost Light ---------- */
html[data-theme="frost-light"] {
  --bg: #f4f3fb;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f6fd;
  --surface-glass: rgba(255, 255, 255, 0.65);
  --surface-glass-strong: rgba(255, 255, 255, 0.85);
  --text-primary: #201f3a;
  --text-secondary: #5c5b7d;
  --text-muted: #8a89a8;
  --border: rgba(32, 31, 58, 0.09);
  --border-strong: rgba(32, 31, 58, 0.16);
  --primary: #6152e0;
  --primary-light: #7a6cf0;
  --primary-dark: #493bc0;
  --secondary: #8b6ce0;
  --shadow-1: 0 1px 2px rgba(32, 31, 58, 0.06);
  --shadow-2: 0 8px 24px rgba(32, 31, 58, 0.09);
  --shadow-3: 0 20px 48px rgba(32, 31, 58, 0.13);
}

/* ---------- Deep Violet ---------- */
html[data-theme="deep-violet"] {
  --bg: #0a0714;
  --bg-elevated: #120c22;
  --surface: #150f28;
  --surface-2: #1c1433;
  --surface-glass: rgba(148, 100, 255, 0.06);
  --surface-glass-strong: rgba(148, 100, 255, 0.12);
  --text-primary: #f6f3ff;
  --text-secondary: #b3a4e0;
  --text-muted: #776896;
  --border: rgba(180, 140, 255, 0.14);
  --border-strong: rgba(180, 140, 255, 0.24);
  --primary: #9b5cf6;
  --primary-light: #b483fa;
  --primary-dark: #7a3fd6;
  --secondary: #d18cf7;
}