:root {
  color-scheme: dark;
  --bg: #0f0f0e;
  --surface: #1a1a19;
  --surface-2: #232321;
  --border: #2e2e2b;
  --text: #ffffff;
  --text-2: #c3c2b7;
  --text-3: #8d8c83;

  --good: #0ca30c;
  --warn: #fab219;
  --serious: #ec835a;
  --crit: #d03b3b;
  --maint: #9085e9;
  --idle: #4a4944;

  --s1: #3987e5; /* series: blue */
  --s2: #d95926; /* series: orange */

  --radius: 12px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f1ee;
  --surface: #fcfcfb;
  --surface-2: #f0efec;
  --border: #dedcd6;
  --text: #0b0b0b;
  --text-2: #52514e;
  --text-3: #75746e;
  --idle: #d4d3cd;
  --s1: #2a78d6;
  --s2: #eb6834;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

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

.num { font-variant-numeric: tabular-nums; }

button, input, select, textarea { font: inherit; color: inherit; }