/* ============================================
   THEMES.CSS — Single Source of Truth
   Section 10 of Architecture Document
   ============================================
   IMPORTANT: Light theme uses bare :root so variables
   are ALWAYS available as defaults. The JS theme system
   removes data-theme for light mode, so [data-theme="light"]
   would NEVER match. Dark theme overrides via [data-theme="dark"].
   ============================================ */

:root {
  --bg-page: #FAFAFA;
  --bg-card: #FFFFFF;
  --bg-logo: #F4F4F5;
  --bg-modal: rgba(255, 255, 255, 0.95);
  --border-subtle: rgba(0, 0, 0, 0.07);
  --accent: #6C47FF;
  --accent-soft: rgba(108, 71, 255, 0.10);
  --overlay: rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.15);
}

:root[data-theme="dark"] {
  --bg-page: #0A0A0F;
  --bg-card: #14141C;
  --bg-logo: #1E1E2A;
  --bg-modal: rgba(20, 20, 28, 0.97);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --accent: #8B6FFF;
  --accent-soft: rgba(139, 111, 255, 0.12);
  --overlay: rgba(0, 0, 0, 0.7);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.6);
}