:root {
  --sl-bg-page: #f3f4f6;
  --sl-bg-surface: #ffffff;
  --sl-bg-subtle: #f8fafc;
  --sl-border: #dbe1ea;
  --sl-border-strong: #c5d0df;
  --sl-text-primary: #0f172a;
  --sl-text-secondary: #475569;
  --sl-text-muted: #64748b;
  --sl-accent: #0ea5e9;
  --sl-accent-strong: #0284c7;
  --sl-accent-soft: #e0f2fe;
  --sl-success: #16a34a;
  --sl-warning: #ca8a04;
  --sl-danger: #dc2626;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;

  --type-2xs: 0.625rem;
  --type-xs: 0.75rem;
  --type-sm: 0.875rem;
  --type-md: 1rem;
  --type-lg: 1.125rem;
  --type-xl: 1.25rem;
  --type-2xl: 1.5rem;

  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 0.875rem;
  --radius-2xl: 1rem;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 20px -16px rgba(15, 23, 42, 0.45);
  --shadow-lg: 0 16px 30px -22px rgba(15, 23, 42, 0.55);

  --ring: 0 0 0 3px rgba(14, 165, 233, 0.28);
}

body {
  background: var(--sl-bg-page);
  color: var(--sl-text-primary);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
}