:root {
  color-scheme: light dark;

  --color-bg: #0d1117;
  --color-bg-elevated: #161c24;
  --color-bg-subtle: #1f2730;
  --color-fg: #e6edf3;
  --color-fg-muted: #9aa6b2;
  --color-border: #2d343d;
  --color-accent: #4493f8;
  --color-accent-contrast: #0d1117;

  --color-status-info: #4493f8;
  --color-status-success: #3fb950;
  --color-status-warning: #d29922;
  --color-status-error: #f85149;

  --color-waveform-data: #e6edf3;
  --color-waveform-clock: #d29922;
  --color-waveform-grid: #2d343d;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

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

  --radius: 0.375rem;
  --focus-ring: 0 0 0 3px var(--color-accent);
}

:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-bg-elevated: #f6f8fa;
  --color-bg-subtle: #eaeef2;
  --color-fg: #1f2328;
  --color-fg-muted: #59636e;
  --color-border: #d0d7de;
  --color-accent: #0969da;
  --color-accent-contrast: #ffffff;
}