:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f7f8fb;
  --color-text: #101828;
  --color-text-muted: #667085;
  --color-primary: #e2090e;
  --color-primary-strong: #c1121a;
  --color-nav-underline: #cc2026;
  --color-border: #e4e7ec;
  --color-surface: #ffffff;
  --color-dark: #0f172a;

  --font-family-base: "Onest", "Nunito", "Segoe UI", Roboto, Arial, sans-serif;
  --font-family-heading: "Onest", "Nunito", "Segoe UI", Roboto, Arial, sans-serif;
  --font-family-nav: "Nunito", "Onest", "Segoe UI", sans-serif;

  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-32: 2rem;
  --font-size-40: 2.5rem;

  --line-height-tight: 1.2;
  --line-height-base: 1.6;

  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 16px 48px rgba(16, 24, 40, 0.12);

  --container-max: 1200px;
  --header-height: 119px;
  --header-padding-x: 64px;
}

@media (max-width: 767px) {
  :root {
    --header-height: 68px;
    --font-size-40: 2.125rem;
    --font-size-32: 1.75rem;
  }
}