:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #f5f6fa;
  --color-primary: #314eb8;
  --color-primary-strong: #233c9a;
  --color-text: #29292b;
  --color-text-muted: #55555a;
  --color-border: #dedee3;
  --color-shadow: rgba(26, 31, 70, 0.08);
  --font-display: "Montserrat", Arial, sans-serif;
  --font-body: "Lato", Arial, sans-serif;
  --shell-width: min(1180px, calc(100vw - 3rem));
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --shadow-card: 0 22px 60px -28px var(--color-shadow);
  --transition-fast: 180ms ease;
  --transition-base: 320ms ease;
}

@media (min-width: 48rem) {
  :root {
    --space-xl: 4rem;
    --space-2xl: 7rem;
  }
}