:root {
  --color-bg: #ffffff;
  --color-surface: #f8f8f8;
  --color-fg: #0b0c0c;
  --color-muted: #505a5f;
  --color-border: #b1b4b6;
  --color-border-strong: #0b0c0c;
  --color-link: #1d70b8;
  --color-link-hover: #003078;
  --color-link-visited: #4c2d8d;
  --color-button-bg: #ffffff;
  --color-button-border: #0b0c0c;
  --color-button-fg: #0b0c0c;
  --color-button-hover-bg: #f3f2f1;
  --color-button-active-bg: #1d70b8;
  --color-button-active-border: #1d70b8;
  --color-button-active-fg: #ffffff;
  --color-focus-ring: #ffdd00;
  --color-focus-ring-text: #0b0c0c;
  --color-error: #d4351c;
  --color-error-bg: #fff0f0;
  --color-error-border: #d4351c;
  --color-success: #00703c;
  --color-success-bg: #eef8f1;
  --color-input-bg: #ffffff;
  --color-input-border: #0b0c0c;
  --color-input-focus: #1d70b8;
  --color-tag-bg: #f3f2f1;
  --color-tag-border: #b1b4b6;
  --color-tag-selected-bg: #1d70b8;
  --color-tag-selected-fg: #ffffff;
  --color-tag-selected-border: #1d70b8;
  --color-diagnostics-bg: #f3f2f1;
  --color-diagnostics-border: #b1b4b6;
  --color-over-limit: #d4351c;

  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Segoe UI Mono", Monaco, Consolas, monospace;

  --text-base: 1.1875rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --leading-base: 1.5;
  --leading-tight: 1.25;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-pill: 9999px;
}

:root[data-theme="dark"] {
  --color-bg: #0b0c0c;
  --color-surface: #1a1a1a;
  --color-fg: #f8f8f8;
  --color-muted: #b1b4b6;
  --color-border: #505a5f;
  --color-border-strong: #f8f8f8;
  --color-link: #4c9fd9;
  --color-link-hover: #8bc9f5;
  --color-link-visited: #b8a0e8;
  --color-button-bg: #1a1a1a;
  --color-button-border: #f8f8f8;
  --color-button-fg: #f8f8f8;
  --color-button-hover-bg: #2a2a2a;
  --color-button-active-bg: #4c9fd9;
  --color-button-active-border: #4c9fd9;
  --color-button-active-fg: #0b0c0c;
  --color-focus-ring: #ffdd00;
  --color-focus-ring-text: #0b0c0c;
  --color-error: #ff7070;
  --color-error-bg: #2a1111;
  --color-error-border: #ff7070;
  --color-success: #4caf50;
  --color-success-bg: #0f2a16;
  --color-input-bg: #1a1a1a;
  --color-input-border: #f8f8f8;
  --color-input-focus: #4c9fd9;
  --color-tag-bg: #2a2a2a;
  --color-tag-border: #505a5f;
  --color-tag-selected-bg: #4c9fd9;
  --color-tag-selected-fg: #0b0c0c;
  --color-tag-selected-border: #4c9fd9;
  --color-diagnostics-bg: #1a1a1a;
  --color-diagnostics-border: #505a5f;
  --color-over-limit: #ff7070;
}