/* 443sec — unified theme layer.
   Dark is the default everywhere. Light is opt-in via [data-theme="light"].
   Linked AFTER each page's own styles so these token values win. */

/* ============================================================
   1. COURSE / LEGACY PAGES  (they already ship a :root token set)
   ============================================================ */
:root {
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.45);
  --accent: #fb923c;
  --accent-light: rgba(251, 146, 60, 0.13);
  --accent-warm: #fbbf24;
  --bg-white: #1f1810;
  --bg-cream: #18120a;
  --bg-card: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.09);
  --border-accent: rgba(251, 146, 60, 0.42);

  --warn-bg: rgba(251, 191, 36, 0.1);
  --warn-text: #fcd34d;
  --on-accent: #1a1206;
}

:root[data-theme="light"] {
  --text-primary: #1a1a1a;
  --text-secondary: #5c5c5c;
  --text-muted: #8a8a8a;
  --accent: #c2410c;
  --accent-light: #ffedd5;
  --accent-warm: #b45309;
  --bg-white: #ffffff;
  --bg-cream: #fdfbf7;
  --bg-card: #f8f9fa;
  --border: #e6e2da;
  --border-accent: #fdba74;

  --warn-bg: #fff3cd;
  --warn-text: #7c4a03;
  --on-accent: #ffffff;
}

/* the three colors those pages hardcoded outside the token set */
.callout-warning { background: var(--warn-bg) !important; }
.callout-warning strong { color: var(--warn-text) !important; }

/* the clickbait piece shipped its own token names — same treatment */
:root {
  --cream: #18120a;
  --green: #fb923c;
  --green-light: rgba(251, 146, 60, 0.13);
  --gold: #fbbf24;
  --dark: #ffffff;
  --gray: rgba(255, 255, 255, 0.72);
}
:root[data-theme="light"] {
  --cream: #fdfbf7;
  --green: #c2410c;
  --green-light: #ffedd5;
  --gold: #b45309;
  --dark: #1a1a1a;
  --gray: #5c5c5c;
}
/* --dark doubles as a surface there, so it needs its own value per theme */
.bottom-line { background: rgba(255, 255, 255, 0.06); }
:root[data-theme="light"] .bottom-line { background: #1a1a1a; }

/* ============================================================
   2. PORTAL PAGES  (landing + article, dark-first by design)
   ============================================================ */
:root[data-theme="light"] {
  --orange: #c2410c;
  --coral: #ea580c;
  --peach: #9a3412;
  --amber: #b45309;
  --rose: #be123c;

  --bg: #fdfbf7;
  --bg-soft: #f4f1ea;
  --card: rgba(0, 0, 0, 0.028);
  --card-hover: rgba(0, 0, 0, 0.05);
  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.19);

  --text: #16130f;
  --text-2: rgba(22, 19, 15, 0.72);
  --text-3: rgba(22, 19, 15, 0.5);
}

/* ambient glows are tuned for a dark ground; calm them down on light */
:root[data-theme="light"] .ambient span { opacity: 0.07; }
:root[data-theme="light"] .site-header { background: rgba(253, 251, 247, 0.86); }
:root[data-theme="light"] .lang a.on { color: #fff; }
:root[data-theme="light"] .a-cta a.btn { color: #fff; }
:root[data-theme="light"] .checklist input[type="checkbox"]:checked::after { border-color: #fff; }

/* the article hero and card thumbs sit on top of video/photo:
   keep their scrims dark in both themes so the text stays readable */
:root[data-theme="light"] .a-hero::after {
  background:
    linear-gradient(to top, var(--bg) 4%, rgba(40, 30, 18, 0.62) 38%, rgba(40, 30, 18, 0.3) 72%),
    linear-gradient(to right, rgba(40, 30, 18, 0.6), rgba(40, 30, 18, 0.06) 68%);
}
:root[data-theme="light"] .a-hero h1,
:root[data-theme="light"] .a-hero .dek,
:root[data-theme="light"] .a-hero .meta,
:root[data-theme="light"] .featured h2,
:root[data-theme="light"] .featured .dek,
:root[data-theme="light"] .featured .meta { color: #fff; }
:root[data-theme="light"] .a-hero .chip,
:root[data-theme="light"] .featured .chip { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.32); }
/* separators and rules sitting on those dark scrims must stay light too */
:root[data-theme="light"] .a-hero .meta .dot,
:root[data-theme="light"] .featured .meta .dot { background: rgba(255, 255, 255, 0.55); }
:root[data-theme="light"] .a-hero .kicker,
:root[data-theme="light"] .featured .kicker { color: var(--peach); }
:root[data-theme="light"] .a-hero .kicker::before,
:root[data-theme="light"] .featured .kicker::before { background: var(--peach); }
:root[data-theme="light"] .featured .cta { color: #fdba74; }

/* ============================================================
   3. THE TOGGLE
   ============================================================ */
.theme-toggle {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 200;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border-accent, rgba(251, 146, 60, 0.42));
  background: var(--bg-white, #1f1810);
  color: var(--accent, #fb923c);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s, box-shadow 0.2s, background 0.25s, color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent, #fb923c); outline-offset: 3px; }
.theme-toggle svg { width: 19px; height: 19px; display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

@media print { .theme-toggle { display: none; } }