/* ============================================
   THEMES — Dark & Light mode color overrides
   ============================================ */

/* ── Dark Mode (Default) ── */
[data-theme="dark"], :root {
  --bg-app: #06130d;
  --bg-surface: #0b1c14;
  --bg-surface-hover: #12281d;
  --bg-surface-active: #1a3528;
  --bg-elevated: #0f241a;
  --bg-elevated-hover: #163023;
  --bg-input: #081710;
  --bg-input-focus: #0c2016;
  --bg-overlay: rgba(3, 10, 7, 0.7);
  --bg-tooltip: #12281d;
  --bg-skeleton: #12281d;

  --border-default: rgba(52, 211, 153, 0.12);
  --border-hover: rgba(52, 211, 153, 0.22);
  --border-focus: var(--color-primary-500);
  --border-subtle: rgba(52, 211, 153, 0.06);

  --text-primary: #e6f7f0;
  --text-secondary: #8cbfa8;
  --text-tertiary: #5d8f79;
  --text-disabled: #385e4e;
  --text-inverse: #06130d;
  --text-on-primary: #ffffff;

  --icon-primary: #a3d9c2;
  --icon-secondary: #659982;
  --icon-hover: #e6f7f0;

  --scrollbar-thumb: rgba(52, 211, 153, 0.18);
  --scrollbar-thumb-hover: rgba(52, 211, 153, 0.32);

  --shadow-color: 0, 0, 0;
  --shadow-glow-primary: 0 0 24px rgba(16, 185, 129, 0.3);
  --shadow-glow-accent: 0 0 24px rgba(45, 212, 191, 0.3);
}

/* ── Light Mode ── */
[data-theme="light"] {
  --bg-app: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f8fafc;
  --bg-surface-active: #e2e8f0;
  --bg-elevated: #ffffff;
  --bg-elevated-hover: #f8fafc;
  --bg-input: #f8fafc;
  --bg-input-focus: #ffffff;
  --bg-overlay: rgba(15, 23, 42, 0.6);
  --bg-tooltip: #0f172a;
  --bg-skeleton: #e2e8f0;

  --border-default: #cbd5e1;
  --border-hover: #94a3b8;
  --border-focus: var(--color-primary-500);
  --border-subtle: #e2e8f0;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  --text-disabled: #94a3b8;
  --text-inverse: #ffffff;
  --text-on-primary: #ffffff;

  --icon-primary: #334155;
  --icon-secondary: #64748b;
  --icon-hover: #0f172a;

  --color-primary-300: #059669;

  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);

  --shadow-color: 0, 0, 0;

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-bg-hover: rgba(255, 255, 255, 0.95);
  --glass-bg-active: #ffffff;
  --glass-border: rgba(15, 23, 42, 0.12);
  --glass-border-hover: rgba(15, 23, 42, 0.2);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow-primary: 0 0 24px rgba(16, 185, 129, 0.2);
  --shadow-glow-accent: 0 0 24px rgba(0, 200, 230, 0.2);
}