/* public/theme-tokens.css
 *
 * Single source of truth for MRE2U's color palette, both themes.
 * Loaded BEFORE tailwind-config.js / tailwind-config-public.js on every
 * HTML surface (11 total: 9 admin pages + the 2 SSR shells
 * src/seo/publicPageRender.js renders for /l/:id and /classifieds) — those
 * two config files reference these custom properties instead of literal
 * hex, so one edit here repaints everywhere.
 *
 * :root = light theme (default until a dark override applies).
 * [data-theme="dark"] = dark theme, applied to <html> by theme-toggle.js.
 * No :root:not([data-theme="light"]) prefers-color-scheme block here —
 * unlike a self-contained Artifact, this is a real deployed site with its
 * own toggle that fully owns the data-theme attribute (see
 * theme-toggle.js's FOUC-prevention inline script, which sets data-theme
 * before first paint based on localStorage OR prefers-color-scheme) — so
 * a media-query fallback block would be redundant, not protective.
 */

/* color-scheme tells the browser which palette to draw its OWN controls in:
   the date input's calendar icon, the date picker popup, <select> option
   lists, native scrollbars. Without it they were always drawn for a light
   page, so in dark mode the calendar icon was black on a near-black field
   (LAW, 2026-09-23: "The calendar icon is too dark"). Declared per theme,
   right beside the tokens, so the two can never disagree. */
:root {
  color-scheme: light;
  --color-surface: 253 251 250;
  --color-surface-container-low: 247 243 242;
  --color-surface-container: 241 237 236;
  --color-surface-container-high: 235 231 230;
  --color-surface-container-highest: 229 225 224;
  --color-on-surface: 31 27 27;
  --color-on-surface-variant: 91 100 114;
  --color-background: 253 251 250;
  --color-on-background: 31 27 27;

  --color-primary: 50 69 120;
  --color-on-primary: 255 255 255;
  --color-primary-container: 219 225 255;
  --color-on-primary-container: 0 23 74;

  --color-secondary: 95 65 0;
  --color-on-secondary: 255 255 255;
  --color-secondary-container: 255 222 171;
  --color-on-secondary-container: 40 25 0;

  --color-tertiary: 0 79 88;
  --color-on-tertiary: 255 255 255;
  --color-tertiary-container: 156 240 255;
  --color-on-tertiary-container: 0 31 36;

  --color-warm: 183 121 31;
  --color-on-warm: 61 39 8;
  --color-warm-container: 252 239 216;
  --color-on-warm-container: 122 78 15;

  --color-ai-flag: 94 53 177;
  --color-on-ai-flag: 255 255 255;
  --color-ai-flag-container: 237 231 246;
  --color-on-ai-flag-container: 49 27 87;

  --color-outline: 143 144 154;
  --color-outline-variant: 221 217 217;

  --color-error: 147 0 10;
  --color-on-error: 255 255 255;
  --color-error-container: 255 180 171;
  --color-on-error-container: 105 0 5;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-surface: 5 8 15;
  --color-surface-container-low: 17 13 13;
  --color-surface-container: 31 27 27;
  --color-surface-container-high: 35 31 30;
  --color-surface-container-highest: 45 41 41;
  --color-on-surface: 234 224 224;
  --color-on-surface-variant: 197 198 209;
  --color-background: 5 8 15;
  --color-on-background: 234 224 224;

  --color-primary: 179 197 255;
  --color-on-primary: 26 46 96;
  --color-primary-container: 3 27 78;
  --color-on-primary-container: 115 133 189;

  --color-secondary: 253 187 63;
  --color-on-secondary: 66 44 0;
  --color-secondary-container: 194 137 0;
  --color-on-secondary-container: 61 40 0;

  --color-tertiary: 0 218 243;
  --color-on-tertiary: 0 54 61;
  --color-tertiary-container: 0 35 40;
  --color-on-tertiary-container: 0 148 166;

  --color-warm: 194 137 0;
  --color-on-warm: 66 44 0;
  --color-warm-container: 61 40 0;
  --color-on-warm-container: 255 222 171;

  --color-ai-flag: 187 158 255;
  --color-on-ai-flag: 45 0 92;
  --color-ai-flag-container: 76 41 143;
  --color-on-ai-flag-container: 233 221 255;

  --color-outline: 143 144 154;
  --color-outline-variant: 69 70 79;

  --color-error: 255 180 171;
  --color-on-error: 105 0 5;
  --color-error-container: 147 0 10;
  --color-on-error-container: 255 218 214;
}