/* ═══════════════════════════════════════════════════════
   OURO  ·  Color accent themes
   Applied via html[data-color="<key>"]
   Default (orange) = :root in base.css — no override needed
   ═══════════════════════════════════════════════════════ */

/* ── Blue ───────────────────────────────────────────── */
html[data-color="blue"] {
  --accent:        #0A84FF;
  --accent-dark:   #006EDB;
  --accent-subtle: rgba(10, 132, 255, 0.10);
  --accent-glow:   rgba(10, 132, 255, 0.25);
  --shadow-accent: 0 8px 32px rgba(10, 132, 255, 0.32), 0 2px 8px rgba(10, 132, 255, 0.18);
}

/* ── Teal ────────────────────────────────────────────── */
html[data-color="teal"] {
  --accent:        #30B0C7;
  --accent-dark:   #1B9DAD;
  --accent-subtle: rgba(48, 176, 199, 0.10);
  --accent-glow:   rgba(48, 176, 199, 0.25);
  --shadow-accent: 0 8px 32px rgba(48, 176, 199, 0.32), 0 2px 8px rgba(48, 176, 199, 0.18);
}

/* ── Green ───────────────────────────────────────────── */
html[data-color="green"] {
  --accent:        #30D158;
  --accent-dark:   #24A345;
  --accent-subtle: rgba(48, 209, 88, 0.10);
  --accent-glow:   rgba(48, 209, 88, 0.25);
  --shadow-accent: 0 8px 32px rgba(48, 209, 88, 0.32), 0 2px 8px rgba(48, 209, 88, 0.18);
}

/* ── Amber ───────────────────────────────────────────── */
html[data-color="amber"] {
  --accent:        #F9B300;
  --accent-dark:   #D99900;
  --accent-subtle: rgba(249, 179, 0, 0.10);
  --accent-glow:   rgba(249, 179, 0, 0.25);
  --shadow-accent: 0 8px 32px rgba(249, 179, 0, 0.32), 0 2px 8px rgba(249, 179, 0, 0.18);
}

/* ── Pink ────────────────────────────────────────────── */
html[data-color="pink"] {
  --accent:        #FF375F;
  --accent-dark:   #E0204A;
  --accent-subtle: rgba(255, 55, 95, 0.10);
  --accent-glow:   rgba(255, 55, 95, 0.25);
  --shadow-accent: 0 8px 32px rgba(255, 55, 95, 0.32), 0 2px 8px rgba(255, 55, 95, 0.18);
}

/* ── Purple ──────────────────────────────────────────── */
html[data-color="purple"] {
  --accent:        #BF5AF2;
  --accent-dark:   #A040E0;
  --accent-subtle: rgba(191, 90, 242, 0.10);
  --accent-glow:   rgba(191, 90, 242, 0.25);
  --shadow-accent: 0 8px 32px rgba(191, 90, 242, 0.32), 0 2px 8px rgba(191, 90, 242, 0.18);
}

/* ── Dark mode: when a color theme is active, use the CSS var ── */
html[data-theme="dark"][data-color] .stat-card.accent { box-shadow: var(--shadow-accent); }
@media (prefers-color-scheme: dark) {
  html[data-color] .stat-card.accent { box-shadow: var(--shadow-accent); }
}