/* ═══════════════════════════════════════════
   THEME TOKENS
═══════════════════════════════════════════ */

/* Dark mode (default) */
:root {
  --bg: #0b0d12;
  --bg-2: #0f1118;
  --panel: rgba(20, 23, 32, 0.92);
  --panel-solid: #14172050;
  --panel-2: rgba(26, 30, 42, 0.85);
  --panel-3: rgba(10, 12, 20, 0.9);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --text: #f0f2f7;
  --text-2: #c8cdd8;
  --muted: #7a8499;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.15);
  --input-bg: rgba(8, 10, 18, 0.85);
  --select-bg: #0d1020;

  --accent: #940414;
  --accent-light: #d92040;
  --accent-glow: rgba(148, 4, 20, 0.38);
  --accent-text: #ffffff;
  --accent-subtle: rgba(148, 4, 20, 0.1);
  --accent-subtle-border: rgba(148, 4, 20, 0.3);

  --orange: #ff9c2b;
  --orange-light: #ffb459;
  --orange-glow: rgba(255, 156, 43, 0.35);

  --danger: #ff7b7b;
  --danger-subtle: rgba(255, 123, 123, 0.08);
  --danger-border: rgba(255, 123, 123, 0.25);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 56px rgba(0, 0, 0, 0.6);
  --card-glow: rgba(148, 4, 20, 0.07);

  --bg-gradient: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(148, 4, 20, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 80%, rgba(25, 35, 75, 0.2) 0%, transparent 55%);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

/* Light mode */
[data-theme="light"] {
  --bg: #f6f4f1;
  --bg-2: #ede9e4;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-solid: rgba(255, 255, 255, 0.95);
  --panel-2: rgba(245, 242, 238, 0.9);
  --panel-3: rgba(235, 232, 228, 0.7);
  --glass: rgba(0, 0, 0, 0.025);
  --glass-border: rgba(0, 0, 0, 0.07);
  --text: #1a1c24;
  --text-2: #3d4151;
  --muted: #7a8099;
  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.16);
  --input-bg: rgba(255, 255, 255, 0.9);
  --select-bg: #fff;

  --accent: #940414;
  --accent-light: #d92040;
  --accent-glow: rgba(148, 4, 20, 0.3);
  --accent-text: #ffffff;
  --accent-subtle: rgba(148, 4, 20, 0.07);
  --accent-subtle-border: rgba(148, 4, 20, 0.25);

  --orange: #ff9c2b;
  --orange-light: #ffb459;
  --orange-glow: rgba(255, 156, 43, 0.35);

  --danger: #c0392b;
  --danger-subtle: rgba(192, 57, 43, 0.06);
  --danger-border: rgba(192, 57, 43, 0.22);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);
  --card-glow: rgba(148, 4, 20, 0.04);

  --bg-gradient: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(148, 4, 20, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 80%, rgba(200, 190, 180, 0.2) 0%, transparent 55%);

  color-scheme: light;
}

/* Auto-detect from system when no data-theme is set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg: #f6f4f1;
    --bg-2: #ede9e4;
    --panel: rgba(255, 255, 255, 0.9);
    --panel-solid: rgba(255, 255, 255, 0.95);
    --panel-2: rgba(245, 242, 238, 0.9);
    --panel-3: rgba(235, 232, 228, 0.7);
    --glass: rgba(0, 0, 0, 0.025);
    --glass-border: rgba(0, 0, 0, 0.07);
    --text: #1a1c24;
    --text-2: #3d4151;
    --muted: #7a8099;
    --border: rgba(0, 0, 0, 0.09);
    --border-strong: rgba(0, 0, 0, 0.16);
    --input-bg: rgba(255, 255, 255, 0.9);
    --select-bg: #fff;
    --accent: #940414;
    --accent-light: #d92040;
    --accent-glow: rgba(148, 4, 20, 0.3);
    --accent-text: #ffffff;
    --accent-subtle: rgba(148, 4, 20, 0.07);
    --accent-subtle-border: rgba(148, 4, 20, 0.25);
    --danger: #c0392b;
    --danger-subtle: rgba(192, 57, 43, 0.06);
    --danger-border: rgba(192, 57, 43, 0.22);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);
    --card-glow: rgba(148, 4, 20, 0.04);
    --bg-gradient: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(148, 4, 20, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 85% 80%, rgba(200, 190, 180, 0.2) 0%, transparent 55%);
    color-scheme: light;
  }
}