:root {
  --font-display: "Afacad", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --color-primary: #3b6afd;
  --color-primary-strong: #2452e4;
  --color-primary-soft: rgba(59, 106, 253, 0.12);
  --color-heading: #12203a;
  --color-text: #1a1c20;
  --color-text-muted: #566377;
  --color-text-subtle: #8592a6;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f7fb;
  --color-border: #d8e3ef;

  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;

  --shadow-card: 0 24px 56px rgba(14, 33, 68, 0.1);
  --shadow-button: 0 16px 32px rgba(59, 106, 253, 0.22);

  --container-width: 87rem;
  --container-gutter: 2.2rem;
  @media (max-width: 46rem) {
    --container-gutter: 0.9375rem;
  }
}