/* ============================================================
   CityScope — design tokens
   Two intentionally-designed themes (not a naive invert), plus a
   per-weather accent gradient consumed by the atmosphere layer in
   base.css. Every component in components.css/layout.css reads only
   these variables — no component hardcodes a color.
   ============================================================ */

:root {
  color-scheme: light;

  --background: #eef3f8;
  --surface: #ffffff;
  --text: #12181f;
  --muted: rgba(18, 24, 31, 0.62);

  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 12px 34px rgba(30, 46, 70, 0.12);
  --glass-blur: 18px;

  --primary: #3d7bf0;
  --primary-contrast: #ffffff;
  /* Scoped to .btn-primary/.search-go only (see components.css). White text
     on --primary measures ~3.97:1, below the 4.5:1 AA minimum for their
     14.7px/weight-600 label; this darker shade measures ~5.0:1. Kept
     separate from --primary so links, focus rings, chips, and icon badges
     (which already pass contrast) are unaffected. */
  --btn-primary-bg: #356bd1;
  /* Small accent-coloured text (links, kickers, rain %) — #2d63c8 is
     ~5.6:1 on white, where --primary alone is ~4:1. */
  --accent-text: #2d63c8;
  --success: #1f9d55;
  --warning: #b8860b;
  --danger: #d84343;

  --overlay: rgba(238, 243, 248, 0.72);
  --hairline: rgba(18, 24, 31, 0.1);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Inter is self-hosted (fonts/, SIL OFL 1.1), so no third-party font
     request is made; the system stack is the fallback while it loads. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Categorical series colours for multi-city charts — the dataviz
     reference palette's first four slots, validated for colour-vision
     deficiency on the adjacent pairlist. Colour follows the city (assigned
     on add), never its rank. Dark mode uses that palette's dark steps. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #060910;
    --surface: #11151d;
    --text: #f2f5fa;
    --muted: rgba(242, 245, 250, 0.6);

    --glass-bg: rgba(24, 29, 38, 0.58);
    --glass-bg-strong: rgba(24, 29, 38, 0.82);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);

    --primary: #6d9bff;
    --primary-contrast: #06090f;
    /* Dark-theme --primary-contrast on --primary already measures ~7.4:1,
       well past AA, so the button background just follows --primary here. */
    --btn-primary-bg: var(--primary);
    --accent-text: var(--primary);
    --success: #3fd074;
    --warning: #e0b23a;
    --danger: #ff6b6b;

    --overlay: rgba(6, 9, 16, 0.72);
    --hairline: rgba(255, 255, 255, 0.08);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #060910;
  --surface: #11151d;
  --text: #f2f5fa;
  --muted: rgba(242, 245, 250, 0.6);

  --glass-bg: rgba(24, 29, 38, 0.58);
  --glass-bg-strong: rgba(24, 29, 38, 0.82);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);

  --primary: #6d9bff;
  --primary-contrast: #06090f;
  --btn-primary-bg: var(--primary);
  --accent-text: var(--primary);
  --success: #3fd074;
  --warning: #e0b23a;
  --danger: #ff6b6b;

  --overlay: rgba(6, 9, 16, 0.72);
  --hairline: rgba(255, 255, 255, 0.08);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
}

:root[data-theme="light"] {
  color-scheme: light;
}