/* The theme switch, and the dark-theme rules that a color swap cannot decide. dark.css and
   case-study-dark.css, generated by scripts/dark-theme.mjs, hold every other dark color.
   Load this file last. */

/* The switch shows the theme it turns on: a moon in the light theme, a sun in the dark theme.
   Without JavaScript the page stays light, and the header switches hide because neither can work. */
html:not([data-theme]) .nav-controls,
html:not([data-theme="dark"]) [data-theme-icon="light"],
html[data-theme="dark"] [data-theme-icon="dark"] { display: none; }

/* Screens only: print keeps the light theme, like the generated files. */
@media screen {
  html[data-theme="dark"] {
    --on-accent: #0d0d0d;   /* text on green and pink stays dark, as in the light theme */
    --plate-bar: #171717;   /* project title bars, one step above the page */
    --plate-frame: #4f4f4f; /* project frames, quieter than light text */
  }

  /* Text on a green or pink block. A highlighted phrase shows as its block grows. */
  :where([data-theme=dark]) .highlight,
  :where([data-theme=dark]) .ink-mark,
  :where([data-theme=dark]) .brand-mark,
  :where([data-theme=dark]) .skip-link,
  :where([data-theme=dark]) .button-green,
  :where([data-theme=dark]) .plate-head .status-label,
  :where([data-theme=dark]) .plate-head .status-label.research,
  :where([data-theme=dark]) .button:is(:hover, :focus-visible),
  :where([data-theme=dark]) .about h2 .ink-mark,
  :where([data-theme=dark]) ::selection { color: var(--on-accent); }

  /* The Modly component in the GPU slot lights green, so its name turns dark with it. */
  :where([data-theme=dark]) .a3-chip-name { transition: fill .3s; }
  :where([data-theme=dark]) .modly-scene[data-phase="0"] .a3-component-encoder .a3-chip-name,
  :where([data-theme=dark]) .modly-scene[data-phase="1"] .a3-component-diffusion .a3-chip-name,
  :where([data-theme=dark]) .modly-scene[data-phase="2"] .a3-component-vae .a3-chip-name { fill: var(--on-accent); }

  /* Project plates: a quieter frame, and a title bar one step above the page. The green rule on top still marks each plate. */
  :where([data-theme=dark]) .case-study { border-color: var(--plate-frame); }
  :where([data-theme=dark]) .project-category.plate-head { background: var(--plate-bar); color: var(--ink); border-bottom: 1px solid var(--plate-frame); }
}

/* The shared API block lights green in the Local AI scene, so its mark stays dark. */
@media screen {
  :where([data-theme=dark]) .dgx-scene[data-phase="3"] .a3-api-mark { stroke: var(--on-accent); }
}

/* The black EARS stand stays dark (scripts/dark-theme.mjs keeps the lightness of .o-dark colors), so its outlines
   take the line color of the headphones around it. */
@media screen {
  :where([data-theme=dark]) .ears-plate .o-dark,
  :where([data-theme=dark]) .ears-plate .o-dark :is(.sheet-edge, .bend-line) { stroke: #747474; }
}

/* The Hermes plate's window draws Hermes Desktop's own dark interface, so it keeps its colors in the dark theme. */
@media screen {
  :where([data-theme=dark]) .hermes-plate {
    --hw-bg: #1c1f1d; --hw-border: #3a403c; --hw-text: #8e968f; --hw-line: #2e3431; --hw-bar: #383e3a; --hw-dot: #4a514c;
    --hw-mark: #9aa19c; --hw-input: #7c847e; --hw-bg-gold: #1a1712; --hw-border-gold: #5a4a1e; --hw-line-gold: #342d1b;
    --hw-input-gold: #4d4020; --hw-gold: #f2bf2c; --hw-gold-lo: #b47a14; --hw-gold-line: #6e5820;
  }
}