/**
 * themes.css — Light and Cyberpunk overrides.
 * Dark theme is the default defined inline in each page's :root block.
 * These selectors have higher specificity and override those defaults.
 */

/* ── LIGHT ───────────────────────────────────────────────────────────────────*/
html[data-theme="light"] {
  --bg:      #f0f4fc;
  --surface: #ffffff;
  --surface2:#f0f4fc;
  --surface3:#e8edf8;
  --border:  #d1d9ef;
  --border2: #bfcae8;
  --text:    #1a1f36;
  --muted:   #6b7399;
  --subtle:  #dde3f7;
  --accent:  #6366f1;
  --accent2: #4f46e5;
  --ok:      #16a34a;
  --err:     #dc2626;
  --warn:    #d97706;
}

html[data-theme="light"] body::before {
  background: radial-gradient(ellipse 70% 50% at 50% 0%,
    rgba(99,102,241,.06) 0%, transparent 70%);
}

html[data-theme="light"] nav,
html[data-theme="light"] .card {
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Progress bar keeps the blue/cyan gradient — looks fine on light */

/* ── CYBERPUNK ────────────────────────────────────────────────────────────────*/
html[data-theme="cyberpunk"] {
  --bg:      #0a0a0a;
  --surface: #111111;
  --surface2:#171717;
  --surface3:#1e1e1e;
  --border:  #2a2a2a;
  --border2: #383838;
  --text:    #e8e2d8;
  --muted:   #6a6258;
  --subtle:  #252525;
  --accent:  #f97316;
  --accent2: #ea6c0a;
  --ok:      #84cc16;
  --err:     #ef4444;
  --warn:    #eab308;
}

html[data-theme="cyberpunk"] body::before {
  background: radial-gradient(ellipse 70% 50% at 50% 0%,
    rgba(249,115,22,.10) 0%, transparent 70%);
}

/* Brand gradient — swap to orange/amber for cyberpunk */
html[data-theme="cyberpunk"] .nav-brand em,
html[data-theme="cyberpunk"] .logo h1 em {
  background: linear-gradient(135deg, #f97316, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Main CTA button */
html[data-theme="cyberpunk"] .btn,
html[data-theme="cyberpunk"] .create-btn {
  background: linear-gradient(135deg, #f97316, #ea6c0a);
}

html[data-theme="cyberpunk"] .nav-btn.primary {
  background: #f97316;
  border-color: #f97316;
}

html[data-theme="cyberpunk"] input:focus,
html[data-theme="cyberpunk"] .form-field input:focus,
html[data-theme="cyberpunk"] .form-field select:focus {
  border-color: #f97316;
}

html[data-theme="cyberpunk"] .auth-tab.active {
  color: #f97316;
}

html[data-theme="cyberpunk"] .role-pill.admin {
  background: rgba(249,115,22,.15);
  color: #fb923c;
  border: 1px solid rgba(249,115,22,.3);
}

/* Overall progress bar */
html[data-theme="cyberpunk"] .progress-bar-fill {
  background: linear-gradient(90deg, #f97316, #fbbf24);
}

/* ── THEME SWITCHER BUTTON ────────────────────────────────────────────────────*/
.theme-btn {
  padding: 6px 10px;
  border-radius: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--muted);
  transition: all .2s;
  user-select: none;
  letter-spacing: .3px;
}
.theme-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}