:root {
  --color-page: #f5f5f3;
  --color-surface: #ffffff;
  --color-border: #e5e5e3;
  --color-text: #111111;
  --color-text-2: #888780;

  --color-info: #6470E5;
  --color-notice: #9B6BEF;
  --color-success: #1D9E75;
  --color-warning: #EF9F27;
  --color-danger: #E24B4A;

  --font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-size-display: 32px;
  --font-weight-display: 700;
  --font-size-heading: 22px;
  --font-weight-heading: 600;
  --font-size-subheading: 16px;
  --font-weight-subheading: 600;
  --font-size-body: 15px;
  --font-weight-body: 400;
  --font-size-label: 13px;
  --font-weight-label: 500;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  --radius-badge: 6px;
  --radius-control: 8px;
  --radius-card: 16px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-page: #16161a;
    --color-surface: #1e1e23;
    --color-border: #2d2d33;
    --color-text: #f1f1ee;
    --color-text-2: #97978f;
  }
}