/* Load after the page styles. Dark mode continues to use their existing tokens. */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f3ec;
  --panel:#fffdf7;
  --panel-hover:#f0ebe0;
  --line:#d8d0c1;
  --text:#292b30;
  --muted:#626265;
  --accent:#80601f;
  --accent-blue:#326c78;
  --accent-soft:#eee4ce;
  --accent-line:#bfa778;
  --button-bg:#c99a54;
  --button-hover:#deb379;
  --input-bg:#ffffff;
  --input-line:#968d7e;
  --output-bg:#faf7f0;
  --gold:var(--accent);
  --blue:var(--accent-blue);
  --ink:var(--text);
  --text-main:var(--text);
  --text-muted:var(--muted);
  --bg-subtle:var(--panel);
  --border-subtle:var(--line);
  --border-focus:var(--accent-line);
  --brand-forest:var(--accent);
  --radius-md:6px;
}

/* Keep the original dark logo readable, without the night-mode inversion. */
html[data-theme="light"] :is(.brand img,.footer-brand img){
  filter:none;
  mix-blend-mode:normal;
}
html[data-theme="light"] .workflow-card{border-color:var(--accent-line)}
html[data-theme="light"] :is(.button-primary,.primary){
  background:var(--button-bg);
  border-color:var(--button-bg);
  color:#11151b;
}
html[data-theme="light"] :is(.button-primary,.primary):hover:not(:disabled){
  background:var(--button-hover);
  border-color:var(--button-hover);
}
html[data-theme="light"] :is(.button-outline,.secondary){
  background:var(--panel);
  border-color:var(--input-line);
  color:var(--text);
}
html[data-theme="light"] :is(.button-outline,.secondary):hover:not(:disabled){
  background:var(--panel-hover);
  border-color:var(--accent);
  color:var(--accent);
}
html[data-theme="light"] .filter-btn[aria-pressed="true"]{
  background:var(--button-bg);
  border-color:var(--button-bg);
  color:#11151b;
}
html[data-theme="light"] .copy-prompt-btn:hover{
  background:var(--panel-hover);
  border-color:var(--accent);
  color:var(--accent);
}
html[data-theme="light"] :is(input,textarea,select){
  background:var(--input-bg);
  border-color:var(--input-line);
  color:var(--text);
}
html[data-theme="light"] :is(input,textarea)::placeholder{color:#78736d;opacity:1}
html[data-theme="light"] #output{background:var(--output-bg);color:var(--text)}
html[data-theme="light"] :is(.step,.badge){
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--accent);
}
html[data-theme="light"] :is(.prompt-preview-box,.experiment-output,.article-code-panel){
  background:var(--output-bg);
  color:var(--text);
}
html[data-theme="light"] .article-code-header{background:var(--panel-hover)}
html[data-theme="light"] .experiment-table th{background:var(--panel-hover);color:var(--text)}
html[data-theme="light"] ::selection{background:var(--accent-soft);color:var(--text)}
@media(hover:hover) and (pointer:fine){
  html[data-theme="light"] :is(.start-grid>article,.reading-feature,.feature-grid>article,.resource-grid>a,.platform-card,.tool-card):hover{
    background:var(--panel-hover);
    border-color:var(--accent-line);
  }
}

/* Shared header control: compatible with the main site's accent and history's gold. */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  min-width:74px;
  height:44px;
  padding:0 10px;
  gap:6px;
  border:1px solid var(--line,#2a323d);
  border-radius:6px;
  background:var(--panel,#181d25);
  color:var(--accent,var(--gold,#c99a54));
  font:inherit;
  font-size:12px;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle[hidden]{display:none}
.theme-toggle>span{font-size:16px;line-height:1;min-width:14px}
.theme-toggle svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.theme-toggle:focus-visible{outline:3px solid var(--accent,var(--gold,#c99a54));outline-offset:4px}
@media(hover:hover) and (pointer:fine){
  .theme-toggle:hover{background:var(--panel-hover,var(--panel,#181d25));border-color:var(--accent,var(--gold,#c99a54))}
}
@media(prefers-reduced-motion:no-preference){
  .theme-toggle{transition:background-color 180ms ease,border-color 180ms ease}
}
