/* Shared light/dark theme tokens and control. Load after each page's styles. */
:root,
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1117;
  --sidebar-bg:#161b22;
  --panel-bg:#1c2128;
  --panel:#161b22;
  --border:#30363d;
  --text:#e6edf3;
  --text-muted:#8b949e;
  --muted:#9da7b3;
  --text-soft:#cdd9e5;
  --green:#3fb950;
  --red:#f85149;
  --yellow:#d29922;
  --blue:#58a6ff;
  --purple:#bc8cff;
  --orange:#ffa657;
  --accent:#58a6ff;
  --link:#58a6ff;
  --warn:#d29922;
  --py:#3fb950;
  --cpp:#79c0ff;
  --c:#ffa657;
  --c-col:#ffa657;
  --java:#d2a8ff;
  --code-bg:#0d1117;
  --surface-tint:rgba(255,255,255,.025);
  --hover-bg:rgba(255,255,255,.05);
  --strong-hover-bg:rgba(255,255,255,.08);
  --track-bg:rgba(255,255,255,.06);
  --header-overlay:rgba(22,27,34,.96);
  --shadow-color:rgba(0,0,0,.45);
  --button-on-accent:#0d1117;
}

html[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f8fa;
  --sidebar-bg:#ffffff;
  --panel-bg:#ffffff;
  --panel:#ffffff;
  --border:#d0d7de;
  --text:#1f2328;
  --text-muted:#59636e;
  --muted:#59636e;
  --text-soft:#3d444d;
  --green:#1a7f37;
  --red:#cf222e;
  --yellow:#9a6700;
  --blue:#0969da;
  --purple:#8250df;
  --orange:#bc4c00;
  --accent:#0969da;
  --link:#0969da;
  --warn:#9a6700;
  --py:#1a7f37;
  --cpp:#0969da;
  --c:#bc4c00;
  --c-col:#bc4c00;
  --java:#8250df;
  --code-bg:#eef1f4;
  --surface-tint:rgba(31,35,40,.025);
  --hover-bg:rgba(31,35,40,.06);
  --strong-hover-bg:rgba(31,35,40,.10);
  --track-bg:rgba(31,35,40,.12);
  --header-overlay:rgba(255,255,255,.96);
  --shadow-color:rgba(31,35,40,.18);
  --button-on-accent:#ffffff;
}

html,
body{
  transition:background-color .15s ease,color .15s ease;
}

html[data-theme="light"] :where(input,select,textarea,button){
  color-scheme:light;
}

html[data-theme="dark"] :where(input,select,textarea,button){
  color-scheme:dark;
}

.theme-toggle{
  width:34px;
  min-width:34px;
  height:32px;
  flex:0 0 34px;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:6px;
  background:transparent;
  color:var(--text-muted);
  font:700 17px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}

.theme-toggle:hover{
  color:var(--text);
  border-color:var(--text-muted);
  background:var(--hover-bg);
}

.theme-toggle:active{transform:translateY(1px)}

html[data-theme="light"] :where(.onboard){background:var(--panel-bg)}
html[data-theme="light"] :where(.level-header){background:linear-gradient(135deg,var(--panel-bg),var(--bg))}
html[data-theme="light"] :where(.lvl-body){background:var(--surface-tint)}
html[data-theme="light"] :where(.CodeMirror){box-shadow:none}

html[data-theme="light"] :where(pre.code,.md pre,.md code,.lesson-body pre,.output-panel,.input-area textarea,.real-code,.reading-code,.cq-io,code){
  background:var(--code-bg);
}

html[data-theme="light"] :where(pre.code,.lesson-body pre code,.output-body,.real-code,.reading-code,.cq-io){
  color:var(--text-soft);
}

html[data-theme="light"] :where(pre.code .cm){color:#6e7781}
html[data-theme="light"] :where(pre.code .st){color:#0a3069}
html[data-theme="light"] :where(pre.code .kw){color:#cf222e}
html[data-theme="light"] :where(pre.code .nm){color:#0550ae}
html[data-theme="light"] :where(pre.code .fn){color:#8250df}

html[data-theme="light"] :where(.err-box,.err-hint){color:#a40e26}
html[data-theme="light"] :where(.warn-box,.cq-pyhint){color:#7d4e00}
html[data-theme="light"] :where(.ok-box){color:#116329}
html[data-theme="light"] .btn.danger,
html[data-theme="light"] .tc-row .rm{color:var(--red)}
html[data-theme="light"] .quiz-opt.correct{color:#116329}
html[data-theme="light"] .quiz-opt.wrong{color:#a40e26}

html[data-theme="light"] ::-webkit-scrollbar-thumb{
  background:#afb8c1;
  background-clip:padding-box;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{
  background:#8c959f;
  background-clip:padding-box;
}

@media (prefers-reduced-motion:reduce){
  html,body,.theme-toggle{transition:none}
}

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