/* ELAN Factory — theme overrides
   Default theme = Porcelain (light) defined in style.css :root
   Switch to noir (dark) or atelier (editorial) via data-theme attribute */

/* ============================================================
   THEME · NOIR (sophisticated dark)
   ============================================================ */

html[data-theme="noir"] {
  --bg: #0a0a0b;
  --surface: #0f0f11;
  --surface-2: #161619;
  --surface-3: #1c1c20;
  --surface-hover: #1f1f24;

  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.04);

  --text: #fafafa;
  --text-muted: #a1a1aa;
  --text-dim: #71717a;
  --text-subtle: #52525b;

  --accent: #5eead4;
  --accent-hover: #2dd4bf;
  --accent-soft: rgba(94, 234, 212, 0.12);
  --accent-border: rgba(94, 234, 212, 0.24);

  --pos: #34d399;
  --pos-soft: rgba(52, 211, 153, 0.12);
  --neg: #f87171;
  --neg-soft: rgba(248, 113, 113, 0.12);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.12);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.12);

  --chart-1: #5eead4;
  --chart-2: #fbbf24;
  --chart-3: #f87171;
  --chart-4: #a78bfa;
  --chart-5: #60a5fa;
  --chart-6: #fb923c;
  --chart-7: #c084fc;
  --chart-8: #9ca3af;
}

html[data-theme="noir"] body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(94, 234, 212, 0.05), transparent),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(251, 191, 36, 0.03), transparent);
}

/* ============================================================
   THEME · ATELIER (editorial luxury, Aesop-inspired)
   Bone cream + moss green + Fraunces display serif
   Understated, premium, beauty-brand-adjacent
   ============================================================ */

html[data-theme="atelier"] {
  --bg: #f3eee4;
  --surface: #fbf7ec;
  --surface-2: #ece5d4;
  --surface-3: #e2dac5;
  --surface-hover: #f0eadb;

  --border: rgba(60, 45, 30, 0.10);
  --border-strong: rgba(60, 45, 30, 0.18);
  --border-soft: rgba(60, 45, 30, 0.05);

  --text: #1f1a13;
  --text-muted: #5a4e3c;
  --text-dim: #8a7d68;
  --text-subtle: #b0a48c;

  --accent: #4a5d4a;        /* moss green */
  --accent-hover: #384638;
  --accent-soft: rgba(74, 93, 74, 0.10);
  --accent-border: rgba(74, 93, 74, 0.24);

  --pos: #4a5d4a;           /* moss doubles as positive */
  --pos-soft: rgba(74, 93, 74, 0.10);
  --neg: #a64e2a;           /* terracotta */
  --neg-soft: rgba(166, 78, 42, 0.10);
  --warn: #a6762a;
  --warn-soft: rgba(166, 118, 42, 0.10);
  --info: #3a5a8a;
  --info-soft: rgba(58, 90, 138, 0.10);

  --chart-1: #4a5d4a;       /* moss */
  --chart-2: #a6762a;       /* ochre */
  --chart-3: #a64e2a;       /* terracotta */
  --chart-4: #6a5a7a;       /* dusty violet */
  --chart-5: #3a5a8a;       /* ink blue */
  --chart-6: #8a6a4a;       /* sepia */
  --chart-7: #5a7a7a;       /* teal-grey */
  --chart-8: #7a7068;       /* warm grey */

  --font-serif: 'Fraunces', 'Instrument Serif', Georgia, serif;
}

html[data-theme="atelier"] body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(74, 93, 74, 0.08), transparent),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(166, 118, 42, 0.06), transparent);
}

html[data-theme="atelier"] header {
  background: rgba(243, 238, 228, 0.88);
}

html[data-theme="atelier"] .logo {
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  letter-spacing: -1px;
  font-weight: 500;
}

html[data-theme="atelier"] h1 {
  font-variation-settings: 'opsz' 144, 'SOFT' 40;
  font-weight: 400;
  letter-spacing: -2px;
}

html[data-theme="atelier"] .section h2 {
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

html[data-theme="atelier"] .kpi::before {
  background: linear-gradient(90deg, transparent, rgba(74, 93, 74, 0.12), transparent);
}

html[data-theme="atelier"] tr:hover td {
  background: rgba(74, 93, 74, 0.04);
}

html[data-theme="atelier"] .pill {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 10px;
  padding: 3px 10px;
}

html[data-theme="atelier"] .card,
html[data-theme="atelier"] .kpi,
html[data-theme="atelier"] .section {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(60, 45, 30, 0.04);
}

html[data-theme="atelier"] .kpi .value {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -1.2px;
}

html[data-theme="atelier"] .callout {
  border-radius: 2px;
  border-left-width: 2px;
}

/* ============================================================
   Theme switcher UI — floating N · P · A in top-right
   Auto-mounted by theme.js on every page
   ============================================================ */

.theme-switcher {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 200;
  display: inline-flex;
  gap: 1px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}

.theme-switcher button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-font-smoothing: antialiased;
}

.theme-switcher button:hover {
  color: var(--text);
  background: var(--surface-3);
}

.theme-switcher button.active {
  color: var(--bg);
  background: var(--accent);
}

@media (max-width: 600px) {
  .theme-switcher { top: 12px; right: 12px; padding: 2px; }
  .theme-switcher button { width: 24px; height: 24px; font-size: 13px; }
}