:root {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --color-bg: #f5f7fb;
  --color-bg-elevated: #ffffff;
  --color-bg-elevated-2: #eef2f9;
  --color-text: #101625;
  --color-text-muted: #5b6479;
  --color-border: #dde3ee;
  --color-accent-production: #0c8fa8;
  --color-accent-production-soft: rgba(12, 143, 168, 0.12);
  --color-accent-consumption: #c97a0a;
  --color-accent-consumption-soft: rgba(201, 122, 10, 0.14);
  --color-shadow: rgba(16, 22, 37, 0.08);
}

:root[data-theme="dark"] {
  --color-bg: #0b1220;
  --color-bg-elevated: #121b2e;
  --color-bg-elevated-2: #1a2540;
  --color-text: #e7ecf5;
  --color-text-muted: #8b98b3;
  --color-border: #253357;
  --color-accent-production: #34d8f2;
  --color-accent-production-soft: rgba(52, 216, 242, 0.14);
  --color-accent-consumption: #f6a723;
  --color-accent-consumption-soft: rgba(246, 167, 35, 0.16);
  --color-shadow: rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b1220;
    --color-bg-elevated: #121b2e;
    --color-bg-elevated-2: #1a2540;
    --color-text: #e7ecf5;
    --color-text-muted: #8b98b3;
    --color-border: #253357;
    --color-accent-production: #34d8f2;
    --color-accent-production-soft: rgba(52, 216, 242, 0.14);
    --color-accent-consumption: #f6a723;
    --color-accent-consumption-soft: rgba(246, 167, 35, 0.16);
    --color-shadow: rgba(0, 0, 0, 0.4);
  }
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}