:root {
  color-scheme: light;
  --font-sans: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-base: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --control-height: 38px;
  --sidebar-width: 288px;
}

body {
  --bg: var(--color-bg);
  --panel: var(--color-panel);
  --panel-strong: var(--color-panel-strong);
  --panel-subtle: var(--color-panel-subtle);
  --line: var(--color-line);
  --line-strong: var(--color-line-strong);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --title: var(--color-title);
  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-strong);
  --accent-soft: var(--color-accent-soft);
  --action: var(--color-action);
  --action-strong: var(--color-action-strong);
  --success: var(--color-success);
  --success-soft: var(--color-success-soft);
  --warning: var(--color-warning);
  --warning-soft: var(--color-warning-soft);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
  --info: var(--color-info);
  --info-soft: var(--color-info-soft);
  --neutral-soft: var(--color-neutral-soft);
  --shadow-card: var(--shadow-1);
  --shadow-popover: var(--shadow-2);
}