/* Public site light/dark theme — readable contrast everywhere
   Strategy in light mode:
   1) Convert dark surfaces → light surfaces
   2) Use dark text on those surfaces
   3) Keep code / diagram panels dark with light text
*/
:root {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --border: rgba(15, 23, 42, 0.12);
  --border-hover: rgba(2, 132, 199, 0.45);
  --indigo: #4f46e5;
  --indigo-light: #4f46e5;
  --teal: #0d9488;
  --text-primary: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;

  --bg: #f1f5f9;
  --bg2: #ffffff;
  --bg3: #f8fafc;
  --bg-2: #ffffff;
  --bdr: rgba(15, 23, 42, 0.12);
  --blue: #0284c7;
  --text: #0f172a;
  --sl: #475569;
  --muted: #475569;
  --dim: #64748b;
  --heading: #0f172a;
  --nav-bg: rgba(255, 255, 255, 0.96);
  --nav-text: #0f172a;
  --code-bg: #1e293b;
  --code-text: #e2e8f0;
  --cy: #0891b2;
  --cy-l: #0e7490;
}

html[data-theme="light"] body,
:root[data-theme="light"] body {
  background-color: var(--bg-primary, #f1f5f9) !important;
  color: #0f172a !important;
}

/* ── Nav ── */
:root[data-theme="light"] .navbar,
:root[data-theme="light"] .nav,
:root[data-theme="light"] nav.navbar,
:root[data-theme="light"] nav.nav {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(15, 23, 42, 0.12) !important;
}

:root[data-theme="light"] .nav-logo,
:root[data-theme="light"] .navbar-logo {
  color: #0f172a !important;
}

:root[data-theme="light"] .nav-links a,
:root[data-theme="light"] .mobile-menu a,
:root[data-theme="light"] .back-link,
:root[data-theme="light"] .back-btn {
  color: #334155 !important;
}

:root[data-theme="light"] .nav-links a:hover,
:root[data-theme="light"] .nav-links a.active,
:root[data-theme="light"] .mobile-menu a:hover {
  color: #0284c7 !important;
}

:root[data-theme="light"] .hamburger span,
:root[data-theme="light"] .ecx-mnav-btn span {
  background: #0f172a !important;
}

:root[data-theme="light"] .mobile-menu,
:root[data-theme="light"] .nav-links.ecx-mnav-open {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
}

/* ── Common card / panel classes → light surfaces ── */
:root[data-theme="light"] .card,
:root[data-theme="light"] .topic-card,
:root[data-theme="light"] .ccard,
:root[data-theme="light"] .post-card,
:root[data-theme="light"] .account-card,
:root[data-theme="light"] .course-card,
:root[data-theme="light"] .module,
:root[data-theme="light"] .flow-node,
:root[data-theme="light"] .why-card,
:root[data-theme="light"] .why-section,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .info-card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .tool-card,
:root[data-theme="light"] .lab-card,
:root[data-theme="light"] .guide-card,
:root[data-theme="light"] .day-card,
:root[data-theme="light"] .lesson-card,
:root[data-theme="light"] .cat,
:root[data-theme="light"] .item,
:root[data-theme="light"] .wrap .box,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .content-card,
:root[data-theme="light"] .qa-card,
:root[data-theme="light"] .faq-item,
:root[data-theme="light"] .callout:not(.code-panel):not(pre) {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  color: #0f172a !important;
}

:root[data-theme="light"] .why-section {
  background: #e2e8f0 !important;
  box-shadow: none;
}

:root[data-theme="light"] .why-card-num {
  color: rgba(79, 70, 229, 0.35) !important;
}

/* Inline dark backgrounds (very common across pages) → light surfaces + dark text */
:root[data-theme="light"] [style*="background:rgba(15,23,42"],
:root[data-theme="light"] [style*="background: rgba(15,23,42"],
:root[data-theme="light"] [style*="background:rgba(2,6,23"],
:root[data-theme="light"] [style*="background: rgba(2,6,23"],
:root[data-theme="light"] [style*="background:rgba(15, 23, 42"],
:root[data-theme="light"] [style*="background: rgba(15, 23, 42"],
:root[data-theme="light"] [style*="background:rgba(2, 6, 23"],
:root[data-theme="light"] [style*="background: rgba(2, 6, 23"],
:root[data-theme="light"] [style*="background:rgba(8,13,26"],
:root[data-theme="light"] [style*="background: rgba(8,13,26"],
:root[data-theme="light"] [style*="background:rgba(8, 13, 26"],
:root[data-theme="light"] [style*="background: rgba(8, 13, 26"],
:root[data-theme="light"] [style*="background:rgba(8,13,26,"],
:root[data-theme="light"] [style*="background:rgba(8,13,26."],
:root[data-theme="light"] [style*="background:rgba(10,15,30"],
:root[data-theme="light"] [style*="background: rgba(10,15,30"],
:root[data-theme="light"] [style*="background:rgba(12,21,38"],
:root[data-theme="light"] [style*="background: rgba(12,21,38"],
:root[data-theme="light"] [style*="background:rgba(6,12,26"],
:root[data-theme="light"] [style*="background: rgba(6,12,26"],
:root[data-theme="light"] [style*="background:rgba(6, 12, 26"],
:root[data-theme="light"] [style*="background:#0f172a"],
:root[data-theme="light"] [style*="background: #0f172a"],
:root[data-theme="light"] [style*="background:#020617"],
:root[data-theme="light"] [style*="background: #020617"],
:root[data-theme="light"] [style*="background:#0c1526"],
:root[data-theme="light"] [style*="background: #0c1526"],
:root[data-theme="light"] [style*="background:#0a0f1e"],
:root[data-theme="light"] [style*="background: #0a0f1e"],
:root[data-theme="light"] [style*="background:#0d1424"],
:root[data-theme="light"] [style*="background: #0d1424"],
:root[data-theme="light"] [style*="background:#111827"],
:root[data-theme="light"] [style*="background: #111827"],
:root[data-theme="light"] [style*="background:#1e293b"],
:root[data-theme="light"] [style*="background: #1e293b"],
:root[data-theme="light"] [style*="background:#060c1a"],
:root[data-theme="light"] [style*="background: #060c1a"],
:root[data-theme="light"] [style*="background:#080d1a"],
:root[data-theme="light"] [style*="background: #080d1a"],
:root[data-theme="light"] [style*="background-color:rgba(15,23,42"],
:root[data-theme="light"] [style*="background-color:rgba(8,13,26"],
:root[data-theme="light"] [style*="background-color:rgba(2,6,23"],
:root[data-theme="light"] [style*="background-color:#0f172a"],
:root[data-theme="light"] [style*="background-color:#020617"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* Soft dark translucent chips / pills */
:root[data-theme="light"] [style*="background:rgba(15,23,42,.5"],
:root[data-theme="light"] [style*="background:rgba(15,23,42,0.5"],
:root[data-theme="light"] [style*="background:rgba(15,23,42,.8"],
:root[data-theme="light"] [style*="background:rgba(15,23,42,0.8"],
:root[data-theme="light"] [style*="background:rgba(15,23,42,.7"],
:root[data-theme="light"] [style*="background:rgba(15,23,42,0.7"],
:root[data-theme="light"] [style*="background:rgba(15,23,42,.6"],
:root[data-theme="light"] [style*="background:rgba(15,23,42,0.6"],
:root[data-theme="light"] [style*="background:rgba(8,13,26,.8"],
:root[data-theme="light"] [style*="background:rgba(8,13,26,0.8"],
:root[data-theme="light"] [style*="background:rgba(8,13,26,.6"],
:root[data-theme="light"] [style*="background:rgba(8,13,26,0.6"],
:root[data-theme="light"] [style*="background:rgba(8,13,26,.5"],
:root[data-theme="light"] [style*="background:rgba(8,13,26,0.5"] {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

/* Interview question cards */
:root[data-theme="light"] .q-card,
:root[data-theme="light"] .q-header,
:root[data-theme="light"] .q-body {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .q-text {
  color: #0f172a !important;
}

:root[data-theme="light"] .q-num,
:root[data-theme="light"] .q-chevron {
  color: #475569 !important;
}

:root[data-theme="light"] .q-body p,
:root[data-theme="light"] .q-body li {
  color: #475569 !important;
}

:root[data-theme="light"] .q-body strong {
  color: #0f172a !important;
}

/* Physical Design day cards on homepage */
.pd-day-card .pd-day-title {
  color: #f1f5f9 !important;
}
.pd-day-card .pd-day-desc {
  color: #94a3b8 !important;
}
:root[data-theme="light"] .pd-day-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}
:root[data-theme="light"] .pd-day-card .pd-day-title {
  color: #0f172a !important;
}
:root[data-theme="light"] .pd-day-card .pd-day-desc {
  color: #475569 !important;
}

/* Titles / headings */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] .card-title,
:root[data-theme="light"] .ccard-title,
:root[data-theme="light"] .hero h1,
:root[data-theme="light"] .section-title,
:root[data-theme="light"] .module-title,
:root[data-theme="light"] .flow-map h2,
:root[data-theme="light"] .flow-node,
:root[data-theme="light"] .stat-num,
:root[data-theme="light"] .topic-title,
:root[data-theme="light"] .post-author,
:root[data-theme="light"] .profile-name,
:root[data-theme="light"] .why-card h3,
:root[data-theme="light"] .about-strip h2,
:root[data-theme="light"] .footer-logo {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}

:root[data-theme="light"] .hero h1 .g,
:root[data-theme="light"] .text-gradient,
:root[data-theme="light"] [style*="-webkit-text-fill-color:transparent"],
:root[data-theme="light"] [style*="-webkit-text-fill-color: transparent"] {
  -webkit-text-fill-color: transparent !important;
}

:root[data-theme="light"] p,
:root[data-theme="light"] li,
:root[data-theme="light"] .lede,
:root[data-theme="light"] .card-desc,
:root[data-theme="light"] .ccard-desc,
:root[data-theme="light"] .subtitle,
:root[data-theme="light"] .hero p,
:root[data-theme="light"] .fn-sub,
:root[data-theme="light"] .road-label-text,
:root[data-theme="light"] .stat-lbl,
:root[data-theme="light"] .module-meta,
:root[data-theme="light"] .topic-meta,
:root[data-theme="light"] .topic-lessons,
:root[data-theme="light"] .why-card p,
:root[data-theme="light"] .about-strip p,
:root[data-theme="light"] .topics-list li,
:root[data-theme="light"] .section-sub {
  color: #475569 !important;
}

:root[data-theme="light"] footer,
:root[data-theme="light"] footer a {
  background: #ffffff !important;
  color: #475569 !important;
  border-top-color: rgba(15, 23, 42, 0.12) !important;
}

:root[data-theme="light"] .ticker-wrap {
  background: linear-gradient(90deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: rgba(13, 148, 136, 0.25) !important;
}

:root[data-theme="light"] .ticker-msg,
:root[data-theme="light"] .ticker-label {
  color: #0f766e !important;
}

:root[data-theme="light"] .breadcrumb,
:root[data-theme="light"] .bc,
:root[data-theme="light"] .bc a {
  background: #ffffff !important;
  color: #475569 !important;
  border-bottom-color: rgba(15, 23, 42, 0.12) !important;
}

:root[data-theme="light"] .search-box,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

:root[data-theme="light"] #bg-canvas {
  opacity: 0.25;
}

:root[data-theme="light"] .theme-toggle-btn {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}

/* Hardcoded light-on-dark text → dark (now that surfaces are light) */
:root[data-theme="light"] div[style*="color:#f8fafc"],
:root[data-theme="light"] div[style*="color: #f8fafc"],
:root[data-theme="light"] span[style*="color:#f8fafc"],
:root[data-theme="light"] span[style*="color: #f8fafc"],
:root[data-theme="light"] h1[style*="color:#f8fafc"],
:root[data-theme="light"] h2[style*="color:#f8fafc"],
:root[data-theme="light"] h3[style*="color:#f8fafc"],
:root[data-theme="light"] p[style*="color:#f8fafc"],
:root[data-theme="light"] li[style*="color:#f8fafc"],
:root[data-theme="light"] strong[style*="color:#f8fafc"],
:root[data-theme="light"] a[style*="color:#f8fafc"],
:root[data-theme="light"] div[style*="color:#f1f5f9"],
:root[data-theme="light"] div[style*="color: #f1f5f9"],
:root[data-theme="light"] span[style*="color:#f1f5f9"],
:root[data-theme="light"] span[style*="color: #f1f5f9"],
:root[data-theme="light"] h1[style*="color:#f1f5f9"],
:root[data-theme="light"] h2[style*="color:#f1f5f9"],
:root[data-theme="light"] h3[style*="color:#f1f5f9"],
:root[data-theme="light"] a[style*="color:#f1f5f9"],
:root[data-theme="light"] div[style*="color:#fff;"],
:root[data-theme="light"] div[style*="color:#fff\""],
:root[data-theme="light"] div[style*="color: #fff"],
:root[data-theme="light"] span[style*="color:#fff;"],
:root[data-theme="light"] span[style*="color: #fff"],
:root[data-theme="light"] h1[style*="color:#fff"],
:root[data-theme="light"] h2[style*="color:#fff"],
:root[data-theme="light"] h3[style*="color:#fff"],
:root[data-theme="light"] div[style*="color:#e2e8f0"],
:root[data-theme="light"] span[style*="color:#e2e8f0"],
:root[data-theme="light"] p[style*="color:#e2e8f0"],
:root[data-theme="light"] a[style*="color:#e2e8f0"],
:root[data-theme="light"] div[style*="color:#cbd5e1"],
:root[data-theme="light"] span[style*="color:#cbd5e1"],
:root[data-theme="light"] p[style*="color:#cbd5e1"] {
  color: #0f172a !important;
}

:root[data-theme="light"] div[style*="color:#94a3b8"],
:root[data-theme="light"] div[style*="color: #94a3b8"],
:root[data-theme="light"] span[style*="color:#94a3b8"],
:root[data-theme="light"] p[style*="color:#94a3b8"],
:root[data-theme="light"] a[style*="color:#94a3b8"],
:root[data-theme="light"] div[style*="color:#64748b"],
:root[data-theme="light"] span[style*="color:#64748b"],
:root[data-theme="light"] p[style*="color:#64748b"] {
  color: #475569 !important;
}

/* Keep white text on colored CTA / gradient buttons */
:root[data-theme="light"] a[style*="linear-gradient"][style*="color:#fff"],
:root[data-theme="light"] a[style*="linear-gradient"][style*="color: #fff"],
:root[data-theme="light"] a[style*="background"][style*="color:#fff"],
:root[data-theme="light"] button[style*="color:#fff"],
:root[data-theme="light"] .promo-banner,
:root[data-theme="light"] .promo-banner * {
  color: #ffffff !important;
}

/* Keep code / diagram surfaces dark for contrast */
:root[data-theme="light"] .code-panel,
:root[data-theme="light"] .diagram-wrap,
:root[data-theme="light"] .wave-ascii,
:root[data-theme="light"] pre,
:root[data-theme="light"] code,
:root[data-theme="light"] .cp-card,
:root[data-theme="light"] .mini-editor,
:root[data-theme="light"] .compiler-mini-editor,
:root[data-theme="light"] .code-block,
:root[data-theme="light"] .hljs,
:root[data-theme="light"] pre[style*="background"],
:root[data-theme="light"] code[style*="background"],
:root[data-theme="light"] .code-panel[style*="background"],
:root[data-theme="light"] .diagram-wrap[style*="background"],
:root[data-theme="light"] .mini-editor[style*="background"],
:root[data-theme="light"] .compiler-mini-editor[style*="background"] {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow: none;
}

:root[data-theme="light"] .code-panel *,
:root[data-theme="light"] .diagram-wrap *,
:root[data-theme="light"] pre *,
:root[data-theme="light"] .cp-card *,
:root[data-theme="light"] .mini-editor *,
:root[data-theme="light"] .compiler-mini-editor *,
:root[data-theme="light"] .code-block * {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0;
}

:root[data-theme="light"] .code-panel .kw,
:root[data-theme="light"] pre .kw,
:root[data-theme="light"] .hljs-keyword {
  color: #7dd3fc !important;
  -webkit-text-fill-color: #7dd3fc;
}

:root[data-theme="light"] .code-panel .str,
:root[data-theme="light"] pre .str,
:root[data-theme="light"] .hljs-string {
  color: #86efac !important;
  -webkit-text-fill-color: #86efac;
}

:root[data-theme="light"] .code-panel .cm,
:root[data-theme="light"] pre .cm,
:root[data-theme="light"] .hljs-comment {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8;
}

/* Inline code in prose stays readable */
:root[data-theme="light"] p > code,
:root[data-theme="light"] li > code,
:root[data-theme="light"] td > code,
:root[data-theme="light"] .card-desc code {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}