:root {
  --bg: #191919;
  --surface: #222222;
  --surface2: #2a2a2a;
  --surface-nav: #1c1c1c;
  --border: #2e2e2e;
  --border-h: #3a3a3a;
  --accent: #4a9eff;
  --accent-h: #6fb2ff;
  --green: #4caf7d;
  --red: #e05c5c;
  --yellow: #c49a3c;
  --purple: #b07fff;
  --text: #dddddd;
  --text-muted: #888888;
  --text-dim: #555555;
  --text-secondary: #888888;
  --text-on-accent: #ffffff;
  --radius: 8px;
  --shadow: none;
  --sidebar-w: 220px;

  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-h3: 15px;
  --fs-body: 13px;
  --fs-body-strong: 13px;
  --fs-label: 11px;
  --fs-caption: 12px;

  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-3xl: 48px;
}

[data-theme="light"] {
  --bg: #f4f4f4;
  --surface: #ffffff;
  --surface2: #eeeeee;
  --surface-nav: #ffffff;
  --border: #e0e0e0;
  --border-h: #cccccc;
  --accent: #2878d6;
  --accent-h: #1a60be;
  --green: #2d7a4f;
  --red: #bf3030;
  --yellow: #8a6820;
  --purple: #7c4fb5;
  --text: #1a1a1a;
  --text-muted: #555555;
  --text-dim: #888888;
  --text-secondary: #555555;
  --text-on-accent: #ffffff;
}