/*
 * StreamHub — Theme System
 * Dark (default) + Light mode via prefers-color-scheme and data-theme attribute
 */

/* ─── DARK (default) ─────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:          #050508;
  --surface:     #0a0a0e;
  --bg-elevated: #0a0a0e;
  --card:        #0c0c11;
  --bg-card:     #0c0c11;
  --panel:       #0c0c11;
  --hover:       #111118;
  --bg-hover:    #111118;

  /* Text */
  --text:           #e8e8ec;
  --text-main:      #e8e8ec;
  --ink:            #e8e8ec;
  --text2:          #8888a0;
  --text-secondary: #8888a0;
  --ink-soft:       #8888a0;
  --dim:            #555568;
  --text-dim:       #555568;
  --muted:          #3a3a4a;
  --text-muted:     #3a3a4a;

  /* Borders */
  --border:        #1a1a24;
  --border-s:      #141420;
  --border-subtle: #141420;
  --border-h:      #222233;
  --line:          #1a1a24;

  /* Accents */
  --green:       #2CF8A0;
  --accent-green:#2CF8A0;
  --blue:        #2D7AFF;
  --accent-blue: #2D7AFF;
  --accent-deep: #1a4fff;
  --yellow:      #F59E0B;

  /* Shadows */
  --card-shadow: none;
  --shadow:      none;

  /* Launcher gradient (has light-mode variant) */
  --launcher:       linear-gradient(135deg,#9CA3AF,#D1D5DB,#F3F4F6);
  --launcher-solid: #9CA3AF;

  /* Logo inner fill */
  --logo-bg: #050508;

  /* Code/mono blocks */
  --code-bg: #0a0a0e;

  /* Theme toggle icons */
  --icon-sun-display:  block;
  --icon-moon-display: none;
}

/* ─── LIGHT via OS preference ────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:          #F8F8FA;
    --surface:     #FFFFFF;
    --bg-elevated: #FFFFFF;
    --card:        #FFFFFF;
    --bg-card:     #FFFFFF;
    --panel:       #FFFFFF;
    --hover:       #F0F0F4;
    --bg-hover:    #F0F0F4;

    --text:           #18181B;
    --text-main:      #18181B;
    --ink:            #18181B;
    --text2:          #52525B;
    --text-secondary: #52525B;
    --ink-soft:       #52525B;
    --dim:            #71717A;
    --text-dim:       #71717A;
    --muted:          #A1A1AA;
    --text-muted:     #A1A1AA;

    --border:        #E4E4E7;
    --border-s:      #F4F4F5;
    --border-subtle: #F4F4F5;
    --border-h:      #D4D4D8;
    --line:          #E4E4E7;

    --green:       #10B981;
    --accent-green:#10B981;
    --blue:        #2563EB;
    --accent-blue: #2563EB;
    --accent-deep: #1d4ed8;
    --yellow:      #D97706;

    --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);

    --launcher:       linear-gradient(135deg,#6B7280,#9CA3AF,#D1D5DB);
    --launcher-solid: #6B7280;

    --logo-bg: #FFFFFF;
    --code-bg: #F4F4F5;

    --icon-sun-display:  none;
    --icon-moon-display: block;
  }
}

/* ─── MANUAL OVERRIDES ───────────────────────────────────────── */
[data-theme="light"] {
  --bg:          #F8F8FA;
  --surface:     #FFFFFF;
  --bg-elevated: #FFFFFF;
  --card:        #FFFFFF;
  --bg-card:     #FFFFFF;
  --panel:       #FFFFFF;
  --hover:       #F0F0F4;
  --bg-hover:    #F0F0F4;

  --text:           #18181B;
  --text-main:      #18181B;
  --ink:            #18181B;
  --text2:          #52525B;
  --text-secondary: #52525B;
  --ink-soft:       #52525B;
  --dim:            #71717A;
  --text-dim:       #71717A;
  --muted:          #A1A1AA;
  --text-muted:     #A1A1AA;

  --border:        #E4E4E7;
  --border-s:      #F4F4F5;
  --border-subtle: #F4F4F5;
  --border-h:      #D4D4D8;
  --line:          #E4E4E7;

  --green:       #10B981;
  --accent-green:#10B981;
  --blue:        #2563EB;
  --accent-blue: #2563EB;
  --accent-deep: #1d4ed8;
  --yellow:      #D97706;

  --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);

  --launcher:       linear-gradient(135deg,#6B7280,#9CA3AF,#D1D5DB);
  --launcher-solid: #6B7280;

  --logo-bg: #FFFFFF;
  --code-bg: #F4F4F5;

  --icon-sun-display:  none;
  --icon-moon-display: block;
}

[data-theme="dark"] {
  --bg:          #050508;
  --surface:     #0a0a0e;
  --bg-elevated: #0a0a0e;
  --card:        #0c0c11;
  --bg-card:     #0c0c11;
  --panel:       #0c0c11;
  --hover:       #111118;
  --bg-hover:    #111118;

  --text:           #e8e8ec;
  --text-main:      #e8e8ec;
  --ink:            #e8e8ec;
  --text2:          #8888a0;
  --text-secondary: #8888a0;
  --ink-soft:       #8888a0;
  --dim:            #555568;
  --text-dim:       #555568;
  --muted:          #3a3a4a;
  --text-muted:     #3a3a4a;

  --border:        #1a1a24;
  --border-s:      #141420;
  --border-subtle: #141420;
  --border-h:      #222233;
  --line:          #1a1a24;

  --green:       #2CF8A0;
  --accent-green:#2CF8A0;
  --blue:        #2D7AFF;
  --accent-blue: #2D7AFF;
  --accent-deep: #1a4fff;
  --yellow:      #F59E0B;

  --card-shadow: none;
  --shadow:      none;

  --launcher:       linear-gradient(135deg,#9CA3AF,#D1D5DB,#F3F4F6);
  --launcher-solid: #9CA3AF;

  --logo-bg: #050508;
  --code-bg: #0a0a0e;

  --icon-sun-display:  block;
  --icon-moon-display: none;
}

/* ─── GLOBAL LIGHT-MODE ADJUSTMENTS ─────────────────────────── */

/* Noise texture: reduce opacity in light mode */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body::before { opacity: .012 !important; }
}
[data-theme="light"] body::before { opacity: .012 !important; }

/* Nav backdrop in light mode */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) nav {
    background: rgba(248,248,250,.9) !important;
    border-bottom-color: var(--border) !important;
  }
}
[data-theme="light"] nav {
  background: rgba(248,248,250,.9) !important;
  border-bottom-color: var(--border) !important;
}

/* ─── LIGHT MODE: HARDCODED COLOR OVERRIDES ─────────────────── */
/*
 * Many templates have hardcoded `color:#fff` or dark gradients.
 * These rules target those elements specifically in light mode.
 * Theme.css loads AFTER each template's <style>, so these win via
 * cascade order (same or higher specificity).
 */

/* --- Applies to both OS-preference light AND manual [data-theme="light"] --- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .nav-wordmark,
  :root:not([data-theme="dark"]) .nav-product,
  :root:not([data-theme="dark"]) .nav-brand strong    { color: var(--text) !important; }

  :root:not([data-theme="dark"]) .nav-logo small,
  :root:not([data-theme="dark"]) .dl-logo .dl-name    { color: rgba(0,0,0,.35) !important; }

  :root:not([data-theme="dark"]) .nav-back:hover,
  :root:not([data-theme="dark"]) .nav-links a:hover,
  :root:not([data-theme="dark"]) .nav-cta:hover,
  :root:not([data-theme="dark"]) .nav-brand a:hover,
  :root:not([data-theme="dark"]) .nav-brand .current  { color: var(--text) !important; }

  /* Hero / page headings — white-to-gray gradient invisible on white */
  :root:not([data-theme="dark"]) .hero h1 strong,
  :root:not([data-theme="dark"]) .page-header h1 strong,
  :root:not([data-theme="dark"]) .content h1 strong,
  :root:not([data-theme="dark"]) .page-wrap h1 strong {
    background: linear-gradient(135deg,#111,#555) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* Primary download button + modal CTA — #fff bg invisible on white card */
  :root:not([data-theme="dark"]) .btn-dl.primary,
  :root:not([data-theme="dark"]) .dm-cta {
    background: #18181B !important;
    color: #F8F8FA !important;
  }
  :root:not([data-theme="dark"]) .btn-dl.primary:hover,
  :root:not([data-theme="dark"]) .dm-cta:hover {
    background: #27272A !important;
  }

  /* Secondary button hover */
  :root:not([data-theme="dark"]) .btn-dl.secondary:hover,
  :root:not([data-theme="dark"]) .btn-s:hover,
  :root:not([data-theme="dark"]) .dl-others a:hover,
  :root:not([data-theme="dark"]) .btn-secondary:hover { color: var(--text) !important; }

  /* Platform chips active state */
  :root:not([data-theme="dark"]) .pad-chip.active {
    color: var(--text) !important;
    background: rgba(0,0,0,.06) !important;
  }

  /* index.html hero large text */
  :root:not([data-theme="dark"]) .hero-eyebrow,
  :root:not([data-theme="dark"]) .hero-title,
  :root:not([data-theme="dark"]) .hero-sub            { color: var(--text) !important; }
}

[data-theme="light"] .nav-wordmark,
[data-theme="light"] .nav-product,
[data-theme="light"] .nav-brand strong                { color: var(--text) !important; }

[data-theme="light"] .nav-logo small,
[data-theme="light"] .dl-logo .dl-name                { color: rgba(0,0,0,.35) !important; }

[data-theme="light"] .nav-back:hover,
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-cta:hover,
[data-theme="light"] .nav-brand a:hover,
[data-theme="light"] .nav-brand .current              { color: var(--text) !important; }

[data-theme="light"] .hero h1 strong,
[data-theme="light"] .page-header h1 strong,
[data-theme="light"] .content h1 strong,
[data-theme="light"] .page-wrap h1 strong {
  background: linear-gradient(135deg,#111,#555) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] .btn-dl.primary,
[data-theme="light"] .dm-cta {
  background: #18181B !important;
  color: #F8F8FA !important;
}
[data-theme="light"] .btn-dl.primary:hover,
[data-theme="light"] .dm-cta:hover {
  background: #27272A !important;
}

[data-theme="light"] .btn-dl.secondary:hover,
[data-theme="light"] .btn-s:hover,
[data-theme="light"] .dl-others a:hover,
[data-theme="light"] .btn-secondary:hover             { color: var(--text) !important; }

[data-theme="light"] .pad-chip.active {
  color: var(--text) !important;
  background: rgba(0,0,0,.06) !important;
}

[data-theme="light"] .hero-eyebrow,
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-sub                        { color: var(--text) !important; }

/* ─── THEME TOGGLE BUTTON ────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: inherit;
  opacity: 0.6;
  transition: opacity .2s;
  display: flex;
  align-items: center;
  border-radius: 6px;
  line-height: 1;
}
.theme-toggle:hover { opacity: 1; }

.theme-toggle .icon-sun  { display: var(--icon-sun-display, block); }
.theme-toggle .icon-moon { display: var(--icon-moon-display, none); }