/* =====================================================
   Chang Research Base — Shared Theme System
   Supports [data-theme="light"] (default) and [data-theme="dark"]
   Load this AFTER each page's inline <style> block so
   [data-theme="dark"] overrides take effect via cascade order.
   ===================================================== */

/* ── 1. Smooth transitions on theme change ── */
*,
*::before,
*::after {
  transition:
    background-color 0.25s ease,
    border-color     0.25s ease,
    color            0.2s  ease,
    box-shadow       0.25s ease;
}

/* Exclude elements that shouldn't animate (charts, spinners, etc.) */
canvas,
svg,
img,
video,
.ticker-inner,
[class*="spinner"],
[class*="progress"] {
  transition: none !important;
}

/* ── 2. Theme Toggle Button ── */
.theme-toggle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  border:          1px solid var(--border, #e2e8f0);
  background:      transparent;
  cursor:          pointer;
  font-size:       1rem;
  line-height:     1;
  flex-shrink:     0;
  padding:         0;
  color:           var(--text-2, #475569);
  transition:
    background-color 0.2s ease,
    border-color     0.2s ease,
    transform        0.15s ease,
    box-shadow       0.2s ease !important;
}

.theme-toggle:hover {
  background:   var(--bg-hover, #edf0f7);
  border-color: var(--border-lit, #cbd5e1);
  transform:    scale(1.08);
}

.theme-toggle:focus-visible {
  outline:        2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* Icon visibility — default (light mode) */
.theme-icon-dark  { display: inline; }
.theme-icon-light { display: none;   }

/* Icon visibility — dark mode */
[data-theme="dark"] .theme-icon-dark  { display: none;   }
[data-theme="dark"] .theme-icon-light { display: inline; }

/* ── 3. Dark Mode Variable Overrides ── */
/* These override the :root values defined inline in each page.
   Works because this stylesheet is loaded AFTER the <style> block,
   so equal-specificity rules win via source order. */

[data-theme="dark"] {
  /* ── Backgrounds ── */
  --bg-root:        #0f172a;
  --bg-panel:       #1e293b;
  --bg-surface:     #1a2535;
  --bg-surface2:    #1a2535;
  --bg-surface-alt: #1c1a35;
  --bg-hover:       #263348;
  --bg-row:         #1a2535;
  --bg-rowalt:      #1e2d42;
  --bg-card:        #1e293b;
  --bg-lift:        #263348;

  /* Aliases used by some pages */
  --bg:             #0f172a;
  --panel:          #1e293b;
  --surface:        #1a2535;
  --surface-alt:    #1c1a35;

  /* ── Borders ── */
  --border:         #334155;
  --border-lit:     #475569;
  --glass-border:   rgba(51, 65, 85, 0.8);

  /* ── Text ── */
  --text-1:         #f1f5f9;
  --text-2:         #94a3b8;
  --text-3:         #64748b;
  --text-4:         #475569;

  /* Aliases */
  --text:           #f1f5f9;
  --text-dim:       #94a3b8;
  --text-light:     #64748b;

  /* ── Semantic: Green (gain) ── */
  --green:          #22c55e;
  --green-dim:      rgba(34, 197, 94, 0.12);
  --green-bdr:      rgba(34, 197, 94, 0.25);
  --green-bg:       rgba(34, 197, 94, 0.08);
  --green-border:   rgba(34, 197, 94, 0.22);
  --green-soft:     rgba(34, 197, 94, 0.08);
  --positive:       #22c55e;
  --pos-bg:         rgba(34, 197, 94, 0.08);
  --pos-border:     rgba(34, 197, 94, 0.25);

  /* ── Semantic: Red (loss) ── */
  --red:            #f87171;
  --red-dim:        rgba(248, 113, 113, 0.10);
  --red-bdr:        rgba(248, 113, 113, 0.25);
  --red-bg:         rgba(248, 113, 113, 0.08);
  --red-border:     rgba(248, 113, 113, 0.22);
  --negative:       #f87171;
  --neg-bg:         rgba(248, 113, 113, 0.08);
  --neg-border:     rgba(248, 113, 113, 0.25);

  /* ── Semantic: Amber ── */
  --amber:          #fbbf24;
  --amber-dim:      rgba(251, 191, 36, 0.12);
  --amber-bdr:      rgba(251, 191, 36, 0.25);
  --cta:            #f59e0b;
  --cta-dim:        #fbbf24;
  --cta-glow:       rgba(245, 158, 11, 0.12);

  /* ── Supporting ── */
  --purple-dim:     rgba(167, 139, 250, 0.12);
  --cyan-dim:       rgba(34, 211, 238, 0.10);
  --orange-dim:     rgba(251, 146, 60, 0.10);
  --yellow-dim:     rgba(250, 204, 21, 0.08);
  --blue-dim:       rgba(96, 165, 250, 0.10);

  /* ── Accent glow (same hue, slightly brighter on dark) ── */
  --accent-glow:    rgba(37, 99, 235, 0.18);
  --accent-10:      rgba(37, 99, 235, 0.10);
  --accent-soft:    rgba(37, 99, 235, 0.12);
  --accent-ring:    rgba(37, 99, 235, 0.35);
  --accent-dim:     #3b82f6;
  --amber-glow:     rgba(251, 191, 36, 0.12);
  --amber-10:       rgba(251, 191, 36, 0.08);

  /* ── Shadows (deeper on dark bg) ── */
  --shadow:         0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.40);
  --sh:             0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.30);
  --sh-hv:          0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);

  /* ── admin.html primary scale override ── */
  --primary-50:     #1e293b;
  --primary-100:    #263348;
  --primary-200:    #334155;
  --primary-300:    #475569;
  --primary-400:    #64748b;
  --primary-500:    #94a3b8;
  --primary-600:    #cbd5e1;
  --primary-700:    #e2e8f0;
  --primary-800:    #f1f5f9;
  --glass-white:    rgba(30, 41, 59, 0.9);
}

/* ── 4. Dark mode: form element backgrounds ── */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #1a2535 !important;
  color:            var(--text-1) !important;
  border-color:     var(--border) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-3) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  background-color: #1e293b !important;
  border-color:     var(--accent) !important;
}

/* ── 5. Dark mode: hardcoded light backgrounds used in some pages ── */
[data-theme="dark"] .tab-group,
[data-theme="dark"] .tab-group {
  background: #1a2535 !important;
}

[data-theme="dark"] .tab-btn.active {
  background: #263348 !important;
  color:      var(--text-1) !important;
}

[data-theme="dark"] .input-wrap input {
  background: #1a2535 !important;
}

/* ── 6. Dark mode: Webkit scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar {
  width:  8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1e293b;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background:    #334155;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* ── 7. Dark mode: body background for pages that set it directly ── */
[data-theme="dark"] body {
  background-color: var(--bg-root) !important;
  color:            var(--text-1) !important;
}

/* ── 8. Ensure admin.html body gradient adapts ── */
[data-theme="dark"] body.admin-body,
[data-theme="dark"] body {
  background: #0f172a !important;
}

/* ── 9. Recommendations hero & special sections ── */
[data-theme="dark"] .hero,
[data-theme="dark"] .hero-remix {
  background: linear-gradient(135deg, #0c1625 0%, #111827 50%, #0f172a 100%) !important;
}

/* ── 10. Learning page dot-grid hero ── */
[data-theme="dark"] .hero-section {
  background: linear-gradient(160deg, #0c1625, #0f172a) !important;
}

/* ── 11. Crypto page purple accent — brighter on dark bg ── */
[data-theme="dark"][data-page="crypto"] {
  --accent:     #a78bfa;
  --accent-dim: #c4b5fd;
  --accent-glow: rgba(167, 139, 250, 0.15);
}