/* ===== Renewable / Smart Energy Color System (tokens) ===== */
:root {
  --bg: #f0f7f4;
  --bg-elev: #ffffff;
  --ink: #103c2d;
  --muted: #517364;
  --line: #d4e9df;
  --charcoal: #0d3225;
  --slate: #135443;
  --green: #00b483;
  --yellow: #f9d648;
  --red: #ff5a4c;
  --blue: #00a3c4;
  --glow-green: 0 0 24px rgba(0, 180, 131, .30);
  --glow-yellow: 0 0 24px rgba(249, 214, 72, .30);
  --glow-red: 0 0 24px rgba(255, 90, 76, .35);
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --shadow-1: 0 6px 24px rgba(0, 0, 0, .06);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, .12);
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 40px;
  --s7: 56px;
  --s8: 72px;
  --s9: 96px;
  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head: "Manrope", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --h1: clamp(32px, 5vw, 56px);
  --h2: clamp(24px, 3.4vw, 36px);
  --lead: clamp(16px, 1.9vw, 20px);
  --container: min(1180px, 96vw);
  --grid-gap: 20px;
}

[data-theme="outage"] {
  --bg: #0f1318;
  --bg-elev: #121821;
  --ink: #eaf2f7;
  --muted: #a8b5bf;
  --line: #233041;
  --shadow-1: 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-2: 0 14px 46px rgba(0, 0, 0, .45);
}