:root {
  --surface-0: #ffffff;
  --surface-1: #f8fafc;
  --surface-2: #eef2f7;
  --surface-3: #e2e8f0;
  --text-1: #111827;
  --text-2: #334155;
  --text-3: #64748b;
  --line-soft: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-panel: 0 16px 38px rgba(15, 23, 42, 0.08);
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

html {
  scroll-padding-top: 88px;
}

body {
  color: var(--text-1);
  text-rendering: optimizeLegibility;
}

img {
  image-rendering: auto;
}

:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  outline-offset: 2px;
}