/* Social Know How bespoke theme (cloned from Diaza 2026-09-17). Two modes, both bespoke:
   - dark (default): black, monochrome, Social Know How navy and blue
   - light: clean light surfaces, sidebar stays brand navy so the white
     wordmark and co-brand hold in both modes
   Mode is driven by html[data-skh-theme], set pre-paint by an inline
   script and toggled from the sidebar. Dark text ramp audited for WCAG AA:
     --text       #F7F8FA on #16161C = ~15.6:1
     --text-soft  #D2D5DC on #16161C = ~11.2:1
     --text-muted #ADB3BF on #16161C = ~7.3:1
     --text-faint #949BA8 on #16161C = ~5.3:1  */

/* ---------- Both modes: brand constants ---------- */
:root {
  --sidebar-bg:    #050507;
  --sidebar-hover: rgba(255, 255, 255, 0.07);
  --sidebar-active-bg: rgba(20, 196, 208, 0.16);
  --sidebar-active-fg: #7DD3D8;
  --sidebar-divider: rgba(255, 255, 255, 0.09);
  --sidebar-text:  rgba(255, 255, 255, 0.85);
  --sidebar-text-strong: #FFFFFF;
  --sidebar-text-faint: rgba(255, 255, 255, 0.58);
  --sidebar-locked: rgba(255, 255, 255, 0.32);
}

/* Bigger, properly formatted wordmark */
.sidebar .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.sidebar .brand img { height: 52px !important; width: auto !important; max-width: 170px; object-fit: contain; }

/* Theme toggle button (appended to the sidebar footer by page script) */
.theme-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin-top: 0.5rem;
  background: none; border: 1px solid var(--sidebar-divider); border-radius: 8px;
  color: var(--sidebar-text); font-size: 0.75rem; font-weight: 600; padding: 0.4375rem 0.75rem; cursor: pointer; }
.theme-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.theme-toggle .tt-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand-accent); }

/* ---------- Dark mode (default: anything except explicit light) ---------- */
html:not([data-skh-theme="light"]) {
  --bg:           #0B0B0F;
  --surface:      #16161C;
  --surface-alt:  #1D1D25;

  --text:         #F7F8FA;
  --text-soft:    #D2D5DC;
  --text-muted:   #ADB3BF;
  --text-faint:   #949BA8;

  --link:         #5BC8D2;
  --link-hover:   #7DD3D8;

  --border:       #2A2A34;
  --border-soft:  #23232C;
  --divider:      #22222B;

  --success:      #34D399;
  --success-bg:   #0E2A21;
  --warn:         #FBBF24;
  --warn-bg:      #2A2210;
  --danger:       #F87171;
  --danger-bg:    #2C1315;
  --info:         #7DD3FC;
  --info-bg:      #0E2230;
}

html:not([data-skh-theme="light"]) body { background: var(--bg); }

/* Dark-mode fixes where light literals were hardcoded in page styles */
html:not([data-skh-theme="light"]) .fresh-pill.ok    { color: #6EE7B7; border-color: rgba(52, 211, 153, 0.5);  background: rgba(52, 211, 153, 0.10); }
html:not([data-skh-theme="light"]) .fresh-pill.warn  { color: #FCD34D; border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.10); }
html:not([data-skh-theme="light"]) .fresh-pill.stale { color: #FCA5A5; border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.10); }
html:not([data-skh-theme="light"]) .cr-dispo      { background: var(--surface-alt); color: var(--text-muted); }
html:not([data-skh-theme="light"]) .cr-dispo.good { background: rgba(52, 211, 153, 0.14); color: #6EE7B7; }
html:not([data-skh-theme="light"]) .cr-dispo.warm { background: rgba(125, 211, 252, 0.14); color: #7DD3FC; }
html:not([data-skh-theme="light"]) .chip { color: var(--text-muted); }
html:not([data-skh-theme="light"]) .chip.active { background: var(--brand-accent); border-color: var(--brand-accent); color: #04252A; }
html:not([data-skh-theme="light"]) .play-btn { color: var(--text); }
html:not([data-skh-theme="light"]) .play-btn:hover { color: var(--brand-accent); }
html:not([data-skh-theme="light"]) .player-bar { box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.5); }
html:not([data-skh-theme="light"]) .hero-strip { border: 1px solid var(--border); }
html:not([data-skh-theme="light"]) .filters input[type="date"] { color: var(--text); color-scheme: dark; }