:root {
  --color-primary: hsl(220 70% 45%);
  --color-primary-600: hsl(220 70% 38%);
  --color-accent: hsl(265 85% 60%);
  --color-accent-600: hsl(265 85% 50%);
  --surface-1: hsl(210 33% 98%);
  --surface-2: hsl(221, 100%, 86%);
  --surface-3: hsl(220 20% 95%);
  --text-1: hsl(225 20% 16%);
  --text-2: hsl(225 12% 40%);
  --text-inv: hsl(0 0% 100%);
  --line: hsl(220 15% 88%);
  --focus: hsl(200 100% 40% / 0.35);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;
  --shadow-1: 0 1px 2px hsl(220 40% 2% / 0.06),
    0 6px 20px hsl(220 40% 2% / 0.06);
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  --font-body: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-heading: var(--font-sans);
  --size-1: 0.875rem;
  --size-2: 1rem;
  --size-3: 1.125rem;
  --size-4: 1.5rem;
  --size-5: 2rem;
  --icon-large: 400px;
}

body.dark-mode {
  --surface-1: hsl(220 18% 10%);
  --surface-2: hsl(220 16% 14%);
  --surface-3: hsl(220 16% 18%);
  --text-1: hsl(0 0% 98%);
  --text-2: hsl(220 14% 70%);
  --line: hsl(220 10% 26%);
  --color-primary: hsl(220 70% 55%);
  --color-primary-600: hsl(220 70% 62%);
}