/* ==========================================================================
   theClimate — Design tokens
   Brand hue: Slate / storm blue-gray (checked against the family color
   registry — UNIVERSAL_DESIGN_PLAYBOOK.md §3.1 — against theURL/amber,
   theJSON/indigo, theMilliseconds/brown, theApps/emerald,
   theRegex/electric-blue, quickPDFs/red, theEdito/cyan, theDiff/magenta;
   a desaturated storm blue-gray neighbors none of them, and reads naturally
   as "overcast sky / barometric" for a weather tool).
     - Default (no class needed)  : "Storm Front"  — deep slate-charcoal
                                    chrome with a cool storm-blue accent.
     - body.theme-light           : "Clear Skies"  — soft sky-white chrome
                                    with a deeper slate-blue ink.

   Weather semantics (temperature heat scale, precipitation, alerts) are
   DELIBERATELY separate tokens from the brand accent — weather-icon colors
   (sun yellow, rain blue, snow white/ice-blue, storm purple-gray) are
   near-universal conventions users already recognize, and hijacking them
   with the brand slate for novelty would hurt scannability, not help
   branding ("is that cloud icon gray because it's the brand, or because it
   means overcast?").
   ========================================================================== */

:root {
  /* Chrome layers */
  --bg-page: #12161c;
  --titlebar-bg: #171c24;
  --toolbar-bg: #141920;
  --card-bg: #1b212a;
  --panel-bg: #171c24;
  --bg-elevated: #222933;
  --bg-overlay: rgba(8, 10, 14, 0.75);
  --statusbar-bg: #3f5468;
  --statusbar-text: #eef3f7;

  /* Brand accent (slate / storm blue-gray) */
  --accent: #7dabc9;
  --accent-hover: #9cc0da;
  --accent-ink: #9cc0da;
  --accent-ink-hover: #bfd9ea;
  --accent-dim: rgba(125, 171, 201, 0.14);
  --accent-contrast-text: #0e1a24;

  /* Weather semantics — kept separate from the brand accent (see banner) */
  --temp-hot: #f97316;
  --temp-cold: #38bdf8;
  --precip: #38bdf8;
  --precip-dim: rgba(56, 189, 248, 0.14);
  --uv-high: #f59e0b;
  --alert: #fb7185;
  --alert-dim: rgba(251, 113, 133, 0.14);

  /* Air Quality Index bands — standard EPA color convention, kept as-is
     since it's a recognized public-health color code, not a brand choice */
  --aqi-good: #4ade80;
  --aqi-moderate: #facc15;
  --aqi-sensitive: #fb923c;
  --aqi-unhealthy: #f87171;
  --aqi-very-unhealthy: #c084fc;
  --aqi-hazardous: #9f1239;

  /* Generic status (reused for non-weather messaging — errors, warnings) */
  --success: #4ade80;
  --success-dim: rgba(74, 222, 128, 0.14);
  --warning: #fbbf24;
  --warning-dim: rgba(251, 191, 36, 0.14);
  --danger: #fb7185;
  --danger-dim: rgba(251, 113, 133, 0.14);

  /* Text */
  --text-1: #eef1f4;
  --text-2: #9aa7b4;
  --text-3: #647184;

  /* Borders / shadows */
  --border: #2a323d;
  --border-subtle: #232a33;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* Inputs */
  --input-bg: #10141a;
  --input-border: var(--border);

  color-scheme: dark;
}

body.theme-light {
  --bg-page: #f4f7fa;
  --titlebar-bg: #ffffff;
  --toolbar-bg: #eaf1f6;
  --card-bg: #ffffff;
  --panel-bg: #eaf1f6;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(20, 30, 40, 0.35);
  --statusbar-bg: #3f5468;
  --statusbar-text: #eef3f7;

  --accent: #3f6a8a;
  --accent-hover: #34586f;
  --accent-ink: #2f5064;
  --accent-ink-hover: #223a49;
  --accent-dim: rgba(63, 106, 138, 0.1);
  --accent-contrast-text: #ffffff;

  --temp-hot: #ea580c;
  --temp-cold: #0284c7;
  --precip: #0284c7;
  --precip-dim: rgba(2, 132, 199, 0.1);
  --uv-high: #b45309;
  --alert: #be123c;
  --alert-dim: rgba(190, 18, 60, 0.1);

  --aqi-good: #16a34a;
  --aqi-moderate: #ca8a04;
  --aqi-sensitive: #ea580c;
  --aqi-unhealthy: #dc2626;
  --aqi-very-unhealthy: #9333ea;
  --aqi-hazardous: #881337;

  --success: #15803d;
  --success-dim: rgba(21, 128, 61, 0.1);
  --warning: #a16207;
  --warning-dim: rgba(161, 98, 7, 0.1);
  --danger: #be123c;
  --danger-dim: rgba(190, 18, 60, 0.1);

  --text-1: #172431;
  --text-2: #55677a;
  --text-3: #7d8ea0;

  --border: #dbe5ec;
  --border-subtle: #e6edf2;
  --shadow-sm: 0 2px 8px rgba(20, 40, 60, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 40, 60, 0.1);
  --shadow-lg: 0 24px 60px rgba(20, 40, 60, 0.16);

  --input-bg: #ffffff;
  --input-border: var(--border);

  color-scheme: light;
}

/* ==========================================================================
   Base / reset
   ========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-1);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
}

button {
  font-family: inherit;
}

a {
  color: var(--accent-ink);
}

a:hover {
  color: var(--accent-ink-hover);
}

code, pre, .mono {
  font-family: "JetBrains Mono", "Consolas", monospace;
}

::selection {
  background: var(--accent-dim);
  color: var(--text-1);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Scrollbar (thin)
   ========================================================================== */

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}