:root {
  /* Colors - Light mode */
  --color-bg: #fafafa;
  --color-panel: #ffffff;
  --color-panel-stroke: rgba(0, 0, 0, 0.08);
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-accent-run: #1a1a1a;
  --color-accent-bike: #ff9500;
  --color-success: #22c55e;
  --color-danger: #ef4444;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", monospace;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0a0a;
    --color-panel: #1a1a1a;
    --color-panel-stroke: rgba(255, 255, 255, 0.08);
    --color-text-primary: #ffffff;
    --color-text-secondary: #999999;
    --color-text-tertiary: #666666;
  }
}