:root {
  /* Base colors */
  --color-bg: #f9f9f9;
  --color-surface: #eee;
  --color-text: #1a1a1a;
  --color-text-light: #f9f9f9;
  --color-text-mid: #f9f9f9;

  --color-subtle-text: #555;

  /* Accent colors - orange tone */
  --color-accent: #ff6b1a;
  --color-accent-dark: #cc560f;
  --old-color-accent-light: #ffe4d1;
  --color-accent-light: #ffb988;

  /* Borders, dividers */
  --color-border: #ddd;
  --color-shadow: rgba(0, 0, 0, 0.05);

  --color-bar-default: #6fb7e2;
  --color-bar-good: #88bf80;
  --color-bar-bad: #e0a3a3;
}

@media (prefers-color-scheme: dark) {
  placeholer--root {
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-text: #f5f5f5;
    --color-subtle-text: #aaa;
    --color-accent: #ff944d; /* slightly brighter orange */
    --color-border: #333;
  }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f5f5f5;
}