/*
 * VibeIQ Theme System
 * ==================
 * To change the site's entire look: edit the applyTheme() call at
 * the bottom of this file OR in the <script> block of index.html.
 *
 * Available themes: 'midnight' | 'obsidian' | 'aurora' | 'paper'
 *
 * To add a new theme: copy any THEMES block below and change the values.
 * Zero HTML changes required.
 */

/* ============================================================
   BASE VARIABLES — overridden by each theme
============================================================ */
:root {
  /* These are the ONLY values you need to change per theme */
  --bg:           #0B0C1E;
  --surface:      #131529;
  --surface-2:    #1C1E38;
  --accent:       #FF8C61;
  --accent-r:     255;
  --accent-g:     140;
  --accent-b:     97;
  --lavender:     #C4B5FD;
  --lav-r:        196;
  --lav-g:        181;
  --lav-b:        253;
  --mint:         #6EE7B7;
  --text:         #F8F7FF;
  --muted:        #8B8FA8;
  --border:       rgba(196,181,253,0.12);
  --border-hover: rgba(196,181,253,0.28);
  --radius:       12px;
  --radius-lg:    20px;
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Computed values — do not override these */
  --accent-soft:  rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10);
  --lav-soft:     rgba(var(--lav-r),    var(--lav-g),    var(--lav-b),    0.08);
}

/* ============================================================
   THEME: MIDNIGHT (default)
   Deep navy · warm coral · soft lavender
   Intelligent, warm, Gen Z-native
============================================================ */
[data-theme="midnight"] {
  --bg:        #0B0C1E;
  --surface:   #131529;
  --surface-2: #1C1E38;
  --accent:    #FF8C61;
  --accent-r:  255; --accent-g: 140; --accent-b: 97;
  --lavender:  #C4B5FD;
  --lav-r:     196; --lav-g: 181; --lav-b: 253;
  --mint:      #6EE7B7;
  --text:      #F8F7FF;
  --muted:     #8B8FA8;
  --border:    rgba(196,181,253,0.12);
  --border-hover: rgba(196,181,253,0.28);
}

/* ============================================================
   THEME: OBSIDIAN
   Pure black · electric violet · hot pink
   Sharper, more aggressive, nightclub energy
============================================================ */
[data-theme="obsidian"] {
  --bg:        #080808;
  --surface:   #111111;
  --surface-2: #1A1A1A;
  --accent:    #8B5CF6;
  --accent-r:  139; --accent-g: 92; --accent-b: 246;
  --lavender:  #EC4899;
  --lav-r:     236; --lav-g: 72; --lav-b: 153;
  --mint:      #A78BFA;
  --text:      #FAFAFA;
  --muted:     #6B7280;
  --border:    rgba(139,92,246,0.15);
  --border-hover: rgba(139,92,246,0.35);
}

/* ============================================================
   THEME: AURORA
   Dark teal · neon lime · warm amber
   Futuristic, tech-forward, data-viz energy
============================================================ */
[data-theme="aurora"] {
  --bg:        #060D14;
  --surface:   #0C1822;
  --surface-2: #132233;
  --accent:    #CCFF00;
  --accent-r:  204; --accent-g: 255; --accent-b: 0;
  --lavender:  #00D4FF;
  --lav-r:     0; --lav-g: 212; --lav-b: 255;
  --mint:      #FF9500;
  --text:      #F0F7FF;
  --muted:     #5B7A8C;
  --border:    rgba(0,212,255,0.12);
  --border-hover: rgba(0,212,255,0.30);
}

/* ============================================================
   THEME: PAPER
   Warm cream · deep navy · terracotta
   Editorial, approachable, Substack/newsletter energy
   (Light mode — text and surface colours flip)
============================================================ */
[data-theme="paper"] {
  --bg:        #F5F0E8;
  --surface:   #FFFFFF;
  --surface-2: #EDE8E0;
  --accent:    #D4552A;
  --accent-r:  212; --accent-g: 85; --accent-b: 42;
  --lavender:  #1A1A3E;
  --lav-r:     26; --lav-g: 26; --lav-b: 62;
  --mint:      #2D6A4F;
  --text:      #1A1A2E;
  --muted:     #6B6575;
  --border:    rgba(26,26,62,0.12);
  --border-hover: rgba(26,26,62,0.28);
}

/*
 * Paper theme needs some element-specific overrides since it's light mode
 */
[data-theme="paper"] body { background: var(--bg); }
[data-theme="paper"] .nav { background: rgba(245,240,232,0.92); }
[data-theme="paper"] .scan-core { background: var(--surface); }

/* ============================================================
   THEME SWITCHER UI
   Hidden by default — press Shift+T to toggle (dev only)
   In production, remove the switcher or leave it hidden
============================================================ */
#theme-switcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: none; /* Toggle with Shift+T */
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  min-width: 160px;
}

#theme-switcher.visible { display: flex; }

#theme-switcher-title {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.theme-btn {
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}

.theme-btn:hover,
.theme-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ============================================================
   QUICK REFERENCE: Changing the default theme
   ============================================================
   In index.html, find the applyTheme() call in the <script> block
   and change the argument:

     applyTheme('midnight')  ← current
     applyTheme('obsidian')
     applyTheme('aurora')
     applyTheme('paper')

   Or add data-theme="themename" to <html> directly.
   ============================================================
*/