/**
 * Stella.Support — Selectable Dashboard Themes
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * TOKEN-OVERRIDE CONTRACT
 * -----------------------
 * The whole authenticated UI is painted from the design tokens declared on
 * :root in variables.css. A theme is therefore nothing more than a set of
 * overrides for a *subset* of those tokens.
 *
 * Each block below matches `html[data-theme="<name>"]`. The `html[...]`
 * attribute selector has higher specificity than `:root` (which is a single
 * pseudo-class), so it wins the cascade without any `!important`, regardless
 * of stylesheet order — but this file is still linked immediately AFTER
 * variables.css in base.html so intent stays obvious.
 *
 * RULES
 *   • Only override tokens that actually change for that theme. Everything
 *     not listed keeps its :root value.
 *   • Semantic status/priority colours (--color-success / --status-* /
 *     --priority-*) stay GLOBAL — a resolved ticket is green in every theme.
 *   • "aurora" is the default look and needs NO block: it is exactly :root.
 *
 * Themes: aurora (default) · midnight · forest · ember · daylight
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   MIDNIGHT — cool deep-blue dark
   ═══════════════════════════════════════════ */
html[data-theme="midnight"] {
  /* Primary Brand (blue) */
  --color-primary: #3b82f6;
  --color-primary-light: #60a5fa;
  --color-primary-dark: #2563eb;
  --color-primary-50: rgba(59, 130, 246, 0.08);
  --color-primary-100: rgba(59, 130, 246, 0.15);

  /* AI Accent (cyan) */
  --color-ai: #06b6d4;
  --color-ai-light: #22d3ee;
  --color-ai-dark: #0891b2;
  --color-ai-glow: rgba(6, 182, 212, 0.3);
  --color-ai-surface: rgba(6, 182, 212, 0.06);
  --color-ai-border: rgba(6, 182, 212, 0.2);

  /* Sky Accent */
  --color-accent: #38bdf8;
  --color-accent-light: #7dd3fc;
  --color-accent-dark: #0ea5e9;

  /* Surface & Background */
  --color-bg-base: #060a14;
  --color-bg-elevated: #0b1220;
  --color-bg-surface: #16233a;
  --color-bg-surface-hover: #1e2f4a;
  --color-bg-input: #0a1120;

  /* Glow shadows (blue / cyan) */
  --shadow-glow-primary: 0 0 20px rgba(59, 130, 246, 0.15);
  --shadow-glow-ai: 0 0 20px rgba(6, 182, 212, 0.15);
}


/* ═══════════════════════════════════════════
   FOREST — emerald dark
   ═══════════════════════════════════════════ */
html[data-theme="forest"] {
  /* Primary Brand (emerald) */
  --color-primary: #10b981;
  --color-primary-light: #34d399;
  --color-primary-dark: #059669;
  --color-primary-50: rgba(16, 185, 129, 0.08);
  --color-primary-100: rgba(16, 185, 129, 0.15);

  /* AI Accent (teal) */
  --color-ai: #2dd4bf;
  --color-ai-light: #5eead4;
  --color-ai-dark: #14b8a6;
  --color-ai-glow: rgba(45, 212, 191, 0.3);
  --color-ai-surface: rgba(45, 212, 191, 0.06);
  --color-ai-border: rgba(45, 212, 191, 0.2);

  /* Lime Accent */
  --color-accent: #a3e635;
  --color-accent-light: #bef264;
  --color-accent-dark: #84cc16;

  /* Surface & Background */
  --color-bg-base: #0a120d;
  --color-bg-elevated: #0f1a13;
  --color-bg-surface: #1a2b20;
  --color-bg-surface-hover: #22382a;
  --color-bg-input: #0d1710;

  /* Glow shadows (green) */
  --shadow-glow-primary: 0 0 20px rgba(16, 185, 129, 0.15);
  --shadow-glow-ai: 0 0 20px rgba(45, 212, 191, 0.15);
}


/* ═══════════════════════════════════════════
   EMBER — warm charcoal + amber
   ═══════════════════════════════════════════ */
html[data-theme="ember"] {
  /* Primary Brand (amber) — dark text on amber buttons for contrast */
  --color-primary: #f59e0b;
  --color-primary-light: #fbbf24;
  --color-primary-dark: #d97706;
  --color-primary-50: rgba(245, 158, 11, 0.08);
  --color-primary-100: rgba(245, 158, 11, 0.15);
  --color-primary-text: #1c1408;

  /* AI Accent (orange) */
  --color-ai: #fb923c;
  --color-ai-light: #fdba74;
  --color-ai-dark: #f97316;
  --color-ai-glow: rgba(251, 146, 60, 0.3);
  --color-ai-surface: rgba(251, 146, 60, 0.06);
  --color-ai-border: rgba(251, 146, 60, 0.2);

  /* Rose Accent */
  --color-accent: #f43f5e;
  --color-accent-light: #fb7185;
  --color-accent-dark: #e11d48;

  /* Surface & Background */
  --color-bg-base: #130f0b;
  --color-bg-elevated: #1b1510;
  --color-bg-surface: #2a211a;
  --color-bg-surface-hover: #342a21;
  --color-bg-input: #170f0a;

  /* Glow shadows (amber / orange) */
  --shadow-glow-primary: 0 0 20px rgba(245, 158, 11, 0.15);
  --shadow-glow-ai: 0 0 20px rgba(251, 146, 60, 0.15);
}


/* ═══════════════════════════════════════════
   DAYLIGHT — clean light theme
   Backgrounds, text, borders and shadows are all re-derived so the token-
   driven UI (sidebar, topbar, cards, dropdowns, inputs, tables) stays legible
   on white. Shadows switch to soft slate (rgba(15,23,42,…)) instead of black.
   ═══════════════════════════════════════════ */
html[data-theme="daylight"] {
  /* Primary Brand (indigo) */
  --color-primary: #4f46e5;
  --color-primary-light: #6366f1;
  --color-primary-dark: #4338ca;
  --color-primary-50: rgba(79, 70, 229, 0.08);
  --color-primary-100: rgba(79, 70, 229, 0.15);

  /* AI Accent (violet) — softer glow so it reads well on white */
  --color-ai: #7c3aed;
  --color-ai-light: #8b5cf6;
  --color-ai-dark: #6d28d9;
  --color-ai-glow: rgba(124, 58, 237, 0.18);
  --color-ai-surface: rgba(124, 58, 237, 0.05);
  --color-ai-border: rgba(124, 58, 237, 0.18);

  /* Accent (cyan) unchanged — inherits :root */

  /* Surface & Background (light) */
  --color-bg-base: #eef2f7;
  --color-bg-elevated: #ffffff;
  --color-bg-surface: #ffffff;
  --color-bg-surface-hover: #f1f5f9;
  --color-bg-overlay: rgba(15, 23, 42, 0.4);
  --color-bg-input: #ffffff;

  /* Text Hierarchy (dark on light) */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748b;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #f8fafc;

  /* Borders (slate, low alpha) */
  --color-border: rgba(15, 23, 42, 0.10);
  --color-border-subtle: rgba(15, 23, 42, 0.06);
  --color-border-strong: rgba(15, 23, 42, 0.18);

  /* Shadows re-derived soft-slate (was black on dark themes) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.07);
  --shadow-glow-primary: 0 0 20px rgba(79, 70, 229, 0.12);
  --shadow-glow-ai: 0 0 20px rgba(124, 58, 237, 0.12);

  /* F11: semantic status "-light" tokens are tuned for dark surfaces and read
     as low-contrast on daylight's white surfaces. They are used as TEXT colour
     for safety-critical copy (the copilot danger-card "cannot be undone"
     consequence line and the proposal Executed/Failed status lines), so darken
     them to AA-compliant (>=4.5:1 on #fff) shades for this theme only. */
  --color-success-light: #15803d;
  --color-warning-light: #b45309;
  --color-danger-light: #b91c1c;
}


/* ═══════════════════════════════════════════
   THEME PICKER (sidebar user dropdown)
   Rendered in base.html; behaviour lives in static/js/theme.js.
   ═══════════════════════════════════════════ */

/* Small "Theme" caption above the swatches */
.theme-picker-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
}

/* Each selectable theme row (a .dropdown-item, so hover/colour is inherited) */
.theme-option {
  cursor: pointer;
}

/* Round swatch showing that theme's primary → ai gradient */
.theme-swatch {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-xs);
}
.theme-swatch-aurora   { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
.theme-swatch-signal   { background: linear-gradient(135deg, #2cc9d6 0%, #1fa6b2 100%); }
.theme-swatch-midnight { background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); }
.theme-swatch-forest   { background: linear-gradient(135deg, #10b981 0%, #2dd4bf 100%); }
.theme-swatch-ember    { background: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%); }
.theme-swatch-daylight { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }

.theme-option-name {
  flex: 1;
  min-width: 0;
}

/* Check only shows on the active theme (JS moves it as the user picks) */
.theme-option-check {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-primary-light);
  opacity: 0;
}
.theme-option.active .theme-option-check {
  opacity: 1;
}