/* ============================================================
   themes.css — THEME CATALOG (token overrides). Load AFTER core.css.
   ------------------------------------------------------------
   A theme is just an alternate set of the core tokens. The DEFAULT
   ("dark") lives in core.css :root, so this file only holds ALTERNATE
   themes as html[data-theme="..."] blocks. theme.js sets data-theme
   (+ data-mode + an optional --red accent override) at load.

   Catalog (shipping): dark (default).
   Add a new theme = add one block here + list it in the admin
   Appearance panel + tools (no per-component edits anywhere).

   Shared by ALL three areas (site / suite app / admin): any area can
   select any theme. The selection is per-area; the catalog is shared.
   ============================================================ */

/* dark — the default; tokens already defined in core.css :root. */
html[data-theme="dark"] { /* no overrides needed */ }

/* ------------------------------------------------------------------
   LIGHT MODE — token overrides. Driven by the mode toggle:
     data-mode="light"  → always light
     data-mode="auto"   → light only when the OS prefers light
   Same brand (red accent), light surfaces + dark text, AA contrast.
   Default mode is "dark", so the marketing site is unaffected unless
   light is selected in the Appearance panel (or by a visitor toggle).
   ------------------------------------------------------------------ */
html[data-mode="light"] {
  --surface: #FFFFFF;  --panel: #F5F6F8;  --panel2: #ECEEF2;  --panel3: #E2E5EB;
  --line:    #DDE0E7;  --line2: #C7CCD6;
  --text:    #15161A;  --dim:   #5B606B;  --faint: #6B7079; /* was #9AA0AC — failed WCAG AA on white; now ~5:1 */
  --green:   #1F8F3A;  --yellow: #9A7400;   /* darkened for contrast on light */
}
@media (prefers-color-scheme: light) {
  html[data-mode="auto"] {
    --surface: #FFFFFF;  --panel: #F5F6F8;  --panel2: #ECEEF2;  --panel3: #E2E5EB;
    --line:    #DDE0E7;  --line2: #C7CCD6;
    --text:    #15161A;  --dim:   #5B606B;  --faint: #6B7079; /* was #9AA0AC — failed WCAG AA on white; now ~5:1 */
    --green:   #1F8F3A;  --yellow: #9A7400;
  }
}