/* tokens.css — THE single source of truth for every color, in BOTH themes (§14.1).
 *
 * There is no build step, so JS and CSS can't literally share a constant. Instead
 * every color is a CSS custom property here, and render/palette.js resolves these
 * values at runtime (getComputedStyle) into Phaser color ints. That kills both
 * light/dark drift AND CSS/JS drift in one move.
 *
 * Structure:
 *   :root                              -> DARK theme = the base / "no preference" default
 *   @media (prefers-color-scheme: light) :root  -> auto LIGHT (follows the OS)
 *   :root[data-theme="dark"]           -> manual Dark override (wins over the media query)
 *   :root[data-theme="light"]          -> manual Light override (wins over the media query)
 *
 * Each token keeps its SEMANTIC HUE FAMILY across themes (glucose stays a yellow, ATP
 * an amber, DNA a violet) so players never relearn the legend. The light values are
 * authored deliberately (darker/desaturated to read on cream) — NOT algorithmically
 * inverted. Custom properties inherit across shadow-DOM boundaries, so every Web
 * Component picks these up through the shared constructable stylesheet for free. */

:root {
  /* ---- DARK (default, and the no-preference fallback) ---- */
  --mm-bg:        #12161c;   /* calm flat charcoal-navy field */
  --mm-panel:     #1a2029;   /* HUD surface */
  --mm-panel-2:   #222a35;   /* raised HUD surface */
  --mm-stroke:    #e7edf5;   /* primary stroke / ink on the canvas */
  --mm-stroke-2:  #4a5666;   /* muted lines, dividers, grid */
  --mm-grid:      #2a3340;
  --mm-text:      #e7edf5;
  --mm-text-dim:  #9aa7b6;

  /* ---- molecular legend (§14) ---- */
  --mm-c-atp:      #f4b740;  /* amber  — ATP / mitochondria */
  --mm-c-glucose:  #f2d24b;  /* warm yellow — glucose */
  --mm-c-pyruvate: #f08a3c;  /* orange — pyruvate (between glucose & ATP) */
  --mm-c-o2:       #6fd3e0;  /* pale cyan — oxygen */
  --mm-c-co2:      #8b97a5;  /* cool grey — CO2 */
  --mm-c-water:    #79b8e8;  /* pale blue — water */
  --mm-c-lipid:    #e85aa8;  /* magenta-pink — fatty acids / phospholipid / membrane */
  --mm-c-amino:    #9bd54a;  /* lime green — amino acids / protein */
  --mm-c-mrna:     #c79bf0;  /* light violet — mRNA */
  --mm-c-dna:      #8a6cf0;  /* violet/indigo — nucleotides / DNA / chromosome / nucleus */
  --mm-c-spindle:  #9aa7b6;  /* neutral grey — spindle / tubulin */
  --mm-c-waste:    #9c8b7a;  /* muted brown-grey — lactate / ethanol / waste */
  --mm-c-chloro:   #5cc98f;  /* green — chloroplast */

  /* ---- semantic states ---- */
  --mm-danger:    #ff5a52;   /* clean red — metabolic death / overcrowding ring */
  --mm-warn:      #f0b429;   /* amber warning */
  --mm-good:      #6fcf7f;   /* confirm / rate-up */
  --mm-apoptosis: #7f8a99;   /* calm desaturated fade — NOT red (the contrast is pedagogy) */

  /* ---- type / spacing / motion ---- */
  --mm-font-sans: "MM Sans", system-ui, sans-serif;
  --mm-font-mono: "MM Mono", ui-monospace, monospace;
  --mm-radius:    10px;
  --mm-radius-sm: 6px;
  --mm-gap:       12px;
  --mm-stroke-w:  2px;
  --mm-ease:      cubic-bezier(0.4, 0.0, 0.2, 1);
  --mm-dur:       240ms;
  --mm-shadow:    none; /* the look is flat — never a drop shadow */
}

@media (prefers-color-scheme: light) {
  :root {
    /* ---- LIGHT: cream field, dark ink; hues re-tuned to read on cream (NOT inverted) ---- */
    --mm-bg:        #f7f3ea;
    --mm-panel:     #fffdf7;
    --mm-panel-2:   #efe9dc;
    --mm-stroke:    #1d232b;
    --mm-stroke-2:  #b9b0a0;
    --mm-grid:      #e4ddcf;
    --mm-text:      #1d232b;
    --mm-text-dim:  #6c6658;

    --mm-c-atp:      #c9871a;
    --mm-c-glucose:  #b89400;
    --mm-c-pyruvate: #cf6a1f;
    --mm-c-o2:       #1f93a8;
    --mm-c-co2:      #6c7681;
    --mm-c-water:    #2b73b0;
    --mm-c-lipid:    #c11e7e;
    --mm-c-amino:    #5a8f15;
    --mm-c-mrna:     #7d4fc4;
    --mm-c-dna:      #5a3fc0;
    --mm-c-spindle:  #6c7681;
    --mm-c-waste:    #7a6a58;
    --mm-c-chloro:   #1f9a5e;

    --mm-danger:    #d62f27;
    --mm-warn:      #b9760a;
    --mm-good:      #2f9e44;
    --mm-apoptosis: #8a93a0;
  }
}

/* Manual overrides — hard-win over the media query so a deliberate choice sticks. */
:root[data-theme="dark"] {
  --mm-bg:#12161c; --mm-panel:#1a2029; --mm-panel-2:#222a35;
  --mm-stroke:#e7edf5; --mm-stroke-2:#4a5666; --mm-grid:#2a3340;
  --mm-text:#e7edf5; --mm-text-dim:#9aa7b6;
  --mm-c-atp:#f4b740; --mm-c-glucose:#f2d24b; --mm-c-pyruvate:#f08a3c;
  --mm-c-o2:#6fd3e0; --mm-c-co2:#8b97a5; --mm-c-water:#79b8e8;
  --mm-c-lipid:#e85aa8; --mm-c-amino:#9bd54a; --mm-c-mrna:#c79bf0;
  --mm-c-dna:#8a6cf0; --mm-c-spindle:#9aa7b6; --mm-c-waste:#9c8b7a; --mm-c-chloro:#5cc98f;
  --mm-danger:#ff5a52; --mm-warn:#f0b429; --mm-good:#6fcf7f; --mm-apoptosis:#7f8a99;
}
:root[data-theme="light"] {
  --mm-bg:#f7f3ea; --mm-panel:#fffdf7; --mm-panel-2:#efe9dc;
  --mm-stroke:#1d232b; --mm-stroke-2:#b9b0a0; --mm-grid:#e4ddcf;
  --mm-text:#1d232b; --mm-text-dim:#6c6658;
  --mm-c-atp:#c9871a; --mm-c-glucose:#b89400; --mm-c-pyruvate:#cf6a1f;
  --mm-c-o2:#1f93a8; --mm-c-co2:#6c7681; --mm-c-water:#2b73b0;
  --mm-c-lipid:#c11e7e; --mm-c-amino:#5a8f15; --mm-c-mrna:#7d4fc4;
  --mm-c-dna:#5a3fc0; --mm-c-spindle:#6c7681; --mm-c-waste:#7a6a58; --mm-c-chloro:#1f9a5e;
  --mm-danger:#d62f27; --mm-warn:#b9760a; --mm-good:#2f9e44; --mm-apoptosis:#8a93a0;
}

/* Global resets that belong at document level (component styles live in shadow roots). */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--mm-bg);
  color: var(--mm-text);
  font-family: var(--mm-font-sans);
  /* a short eased background crossfade on theme switch (gated for reduced-motion below) */
  transition: background-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease);
  overflow: hidden;
}

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