:root {
  color-scheme: light dark;
  --color-primary: #2563eb;
  --color-action: #2563eb;
  --color-on-action: #ffffff;
  --color-primary-dark: #0f172a;
  --color-background: #f2f2f7;
  --color-surface: #ffffff;
  --color-surface-secondary: #f2f2f7;
  --color-text: #0f172a;
  --color-text-secondary: #64748b;
  --color-border: #e2e8f0;
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-error: #dc2626;
  --font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-size-page-title: 34px;
  --font-size-section-title: 20px;
  --font-size-card-title: 16px;
  --font-size-body: 16px;
  --font-size-small: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-small: 12px;
  --radius-default: 16px;
  --radius-large: 24px;
  --radius-sheet: 28px;
  --control-min-height: 44px;
  --page-max-width: 960px;
  --navigation-height: 72px;
  --brand-logo-size: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #8ab4ff;
    --color-primary-dark: #f5f5f7;
    --color-background: #000000;
    --color-surface: #1c1c1e;
    --color-surface-secondary: #2c2c2e;
    --color-text: #f5f5f7;
    --color-text-secondary: #a1a1aa;
    --color-border: #38383a;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-error: #ff8a80;
  }
}