:root {
  color-scheme: light dark;

  /* Palette matches the Snow Removal demo (frost blue + plow-hazard amber,
   * cool frost-gray neutrals) — the house style across all the demos, not
   * just that one. Scale variable NAMES are unchanged so components.css/
   * base.css needed no changes, only what these render as. */
  --color-bg: #f1f6f8;
  --color-surface: #ffffff;
  --color-border: #d9e4e9;
  --color-text: #16232b;
  --color-text-muted: #5c7180;
  --color-primary: #2c6e8f;
  --color-primary-hover: #24596f;
  --color-success: #2c7a56;
  --color-warning: #b4650f;
  --color-danger: #b0413e;
  --color-info: #2c6e8f;

  --flash-success-bg: #e1f1e9;
  --flash-error-bg: #f8e4e2;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Barlow Semi Condensed", var(--font-sans);
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 1px 3px rgba(22, 35, 43, 0.08);
}

/* Dark values, applied two ways:
 * - the media query alone (no manual override yet) - system preference.
 * - :root[data-theme="dark"] - an explicit choice (toggle button or a
 *   ?theme=dark param from a portfolio-site demo link) beats the OS
 *   setting; :not([data-theme="light"]) keeps the OS-preference path
 *   working for anyone who never touched the toggle at all. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0f171c;
    --color-surface: #182229;
    --color-border: #2a3941;
    --color-text: #e4edf1;
    --color-text-muted: #93a7b2;
    --color-primary: #6fb3d6;
    --color-primary-hover: #8fc5e2;
    --color-success: #6bc79a;
    --color-warning: #e8a24f;
    --color-danger: #e08683;
    --color-info: #6fb3d6;

    --flash-success-bg: #173327;
    --flash-error-bg: #3a211f;
  }
}
:root[data-theme="dark"] {
  --color-bg: #0f171c;
  --color-surface: #182229;
  --color-border: #2a3941;
  --color-text: #e4edf1;
  --color-text-muted: #93a7b2;
  --color-primary: #6fb3d6;
  --color-primary-hover: #8fc5e2;
  --color-success: #6bc79a;
  --color-warning: #e8a24f;
  --color-danger: #e08683;
  --color-info: #6fb3d6;

  --flash-success-bg: #173327;
  --flash-error-bg: #3a211f;
}