/* ============================================================
   THEME VARIABLES
   ============================================================ */

/* ORANGE */
[data-theme="orange"] {
  --theme-bg: #fff7f0;
  --theme-surface: #fff3e6;
  --theme-text: #2a1f0f;
  --theme-muted: #6b4f2a;
  --theme-border: #e6c9b3;

  --theme-primary: #ff6600;
  --theme-primary-dark: #cc5200;
}

/* TEAL */
[data-theme="teal"] {
  --theme-bg: #e6f7f7;
  --theme-surface: #ffffff;
  --theme-text: #022c2c;
  --theme-muted: #4b7c7c;
  --theme-border: #b3e0e0;

  --theme-primary: #008080;
  --theme-primary-dark: #004c4c;
}

/* SKY */
[data-theme="sky"] {
  --theme-bg: #e0f2fe;
  --theme-surface: #ffffff;
  --theme-text: #0f172a;
  --theme-muted: #64748b;
  --theme-border: #bae6fd;

  --theme-primary: #0ea5e9;
  --theme-primary-dark: #0369a1;
}

/* VIOLET */
[data-theme="violet"] {
  --theme-bg: #ede9fe;
  --theme-surface: #ffffff;
  --theme-text: #1e1b4b;
  --theme-muted: #6b21a8;
  --theme-border: #ddd6fe;

  --theme-primary: #7c3aed;
  --theme-primary-dark: #4c1d95;
}

/* MIDNIGHT */
[data-theme="midnight"] {
  --theme-bg: #020617;
  --theme-surface: #0b1120;
  --theme-text: #e5e7eb;
  --theme-muted: #9ca3af;
  --theme-border: #1f2937;

  --theme-primary: #0f172a;
  --theme-primary-dark: #1e293b;
}

/* ============================================================
   APPLY THEME ONLY WHEN data-theme EXISTS
   ============================================================ */

[data-theme] body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

[data-theme] .app-header.navbar {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

[data-theme] .app-sidebar {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

[data-theme] .card {
  background: var(--theme-surface);
  border-color: var(--theme-border);
}

/* PRIMARY BUTTON OVERRIDE ONLY WHEN THEME IS ACTIVE */
[data-theme] .btn-primary {
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

[data-theme] .btn-primary:hover {
  background: var(--theme-primary-dark) !important;
  border-color: var(--theme-primary-dark) !important;
}