/* Generated from the CFM.energy design system tokens.json. Light is the default; dark follows the OS or data-theme. */
:root{
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --surface-100: #f6f9f7;
  --surface-200: #ffffff;
  --surface-300: #e5ede9;
  --surface-deep: #071c34;
  --ink: #0a2540;
  --ink-muted: #456075;
  --ink-on-deep: #eef5f1;
  --border: #c3d0ca;
  --border-strong: #657c72;
  --brand: #0c3558;
  --on-brand: #ffffff;
  --verdant: #17694a;
  --on-verdant: #ffffff;
  --verdant-deep: #1f5c52;
  --solar: #e3cf59;
  --ink-on-solar: #0a2540;
  --focus-ring: #0c3558;
  --success: #0b5f73;
  --success-bg: #e0f2f6;
  --warning: #7a4300;
  --warning-bg: #fcefd6;
  --danger: #a52414;
  --danger-bg: #fbe5e1;
  --info: #1b4f9c;
  --info-bg: #e3ecfa;
  --shadow-sm: 0 1px 2px rgba(10,37,64,0.08);
  --shadow-md: 0 6px 20px rgba(10,37,64,0.12);
  --shadow-glow: 0 0 28px rgba(23,105,74,0.28);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --surface-100: #06172a;
  --surface-200: #0b2640;
  --surface-300: #12355a;
  --surface-deep: #030d19;
  --ink: #eef5f1;
  --ink-muted: #a6bbcb;
  --ink-on-deep: #eef5f1;
  --border: #244766;
  --border-strong: #7f9db8;
  --brand: #9cc6ee;
  --on-brand: #04182c;
  --verdant: #5fcf98;
  --on-verdant: #042a1b;
  --verdant-deep: #267561;
  --solar: #f0de6f;
  --ink-on-solar: #0a2540;
  --focus-ring: #f0de6f;
  --success: #6fd3e6;
  --success-bg: #0a3340;
  --warning: #f5c56b;
  --warning-bg: #3a2a08;
  --danger: #ff9b8a;
  --danger-bg: #45150f;
  --info: #9cc2ff;
  --info-bg: #0f2a52;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 28px rgba(95,207,152,0.30);
}
}
:root[data-theme="dark"]{
  --surface-100: #06172a;
  --surface-200: #0b2640;
  --surface-300: #12355a;
  --surface-deep: #030d19;
  --ink: #eef5f1;
  --ink-muted: #a6bbcb;
  --ink-on-deep: #eef5f1;
  --border: #244766;
  --border-strong: #7f9db8;
  --brand: #9cc6ee;
  --on-brand: #04182c;
  --verdant: #5fcf98;
  --on-verdant: #042a1b;
  --verdant-deep: #267561;
  --solar: #f0de6f;
  --ink-on-solar: #0a2540;
  --focus-ring: #f0de6f;
  --success: #6fd3e6;
  --success-bg: #0a3340;
  --warning: #f5c56b;
  --warning-bg: #3a2a08;
  --danger: #ff9b8a;
  --danger-bg: #45150f;
  --info: #9cc2ff;
  --info-bg: #0f2a52;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 28px rgba(95,207,152,0.30);
}