/**
 * Weather chip background gradients keyed by data.current.summary.id.
 * Chip-only — the weather page uses a static --ui-bg (#000024).
 * 90deg linear gradient with 20% black overlay per design spec.
 */
:root {
  --weather-overlay: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  --weather-ui-text: #e1e3e9;
  --weather-ui-text-toned: #c2c6d3;
  --font-mono: "DM Mono", ui-monospace, monospace;
}

.weather-gradient--clear,
.weather-gradient--cloudy,
.weather-gradient--rain-storm,
.weather-gradient--snow-sleet,
.weather-gradient--loading,
.weather-gradient--error {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-clip: border-box;
  background-origin: border-box;
}

.weather-gradient--clear {
  background-color: #1c3b7a;
  background-image: var(--weather-overlay),
    linear-gradient(90deg, #03c2dd 0%, #1c3b7a 100%);
}

.weather-gradient--cloudy {
  background-color: #1e3045;
  background-image: var(--weather-overlay),
    linear-gradient(90deg, #537fa4 0%, #1e3045 100%);
}

.weather-gradient--rain-storm {
  background-color: #0c1c2e;
  background-image: var(--weather-overlay),
    linear-gradient(90deg, #3d2d78 0%, #0c1c2e 100%);
}

.weather-gradient--snow-sleet {
  background-color: #1a3d58;
  background-image: var(--weather-overlay),
    linear-gradient(90deg, #72c4e6 0%, #1a3d58 100%);
}

.weather-gradient--loading {
  background-color: #0f1115;
  background-image: var(--weather-overlay),
    linear-gradient(90deg, #2a2f3a 0%, #0f1115 100%);
}

.weather-gradient--error {
  background-color: #1e3045;
  background-image: var(--weather-overlay),
    linear-gradient(90deg, #537fa4 0%, #1e3045 100%);
}