/* Design tokens — single source of truth for public site CSS variables */
:root {
  --color-primary: #ae040f;
  --color-primary-text: #efefef;
  --color-bg-page: #efefef;
  --color-footer-bg: #292929;
  --color-text: #292929;
  --color-text-muted: rgba(41, 41, 41, 0.7);
  --radius-card: 30px;
  --wrapper-max: 3240px;
  --page-side-pad: 20px;
  --wrapper-pad: var(--page-side-pad);
  --page-title-align-x: 126px;
  --footer-margin: var(--page-side-pad);
  --content-width: min(var(--wrapper-max), calc(100vw - var(--page-side-pad) * 2));
  --footer-inner-pad-x: 20px;
  --footer-nav-pad-x: var(--footer-inner-pad-x);
  --footer-pad-y-top: 20px;
  --footer-pad-y-bottom: 32px;
  --footer-nav-pad-y-top: 20px;
  --footer-nav-pad-y-bottom: 32px;
  --header-offset-top: 40px;
  --header-max-width: 2160px;
  --header-side-inset: 126px;
  --header-menu-font-size: clamp(15px, 0.78vw, 22px);
  --header-menu-gap: clamp(16px, 2.8vw, 80px);
  --header-inner-pad-x: 40px;
  --hero-logo-header-left: 40px;
  --header-width: min(
    var(--header-max-width),
    calc(100vw - var(--header-side-inset) * 2)
  );
}

@media (max-width: 1800px) {
  :root {
    --header-side-inset: 96px;
    --header-menu-font-size: clamp(14px, 0.74vw, 19px);
    --header-menu-gap: clamp(14px, 2.2vw, 56px);
    --header-inner-pad-x: 32px;
    --hero-logo-header-left: 32px;
  }
}

@media (max-width: 1650px) {
  :root {
    --header-side-inset: 72px;
    --header-menu-font-size: clamp(13px, 0.7vw, 17px);
    --header-menu-gap: clamp(12px, 1.8vw, 40px);
    --header-inner-pad-x: 28px;
    --hero-logo-header-left: 24px;
  }
}

@media (max-width: 1500px) {
  :root {
    --header-side-inset: 56px;
    --header-menu-font-size: clamp(12px, 0.66vw, 16px);
    --header-menu-gap: clamp(10px, 1.5vw, 32px);
    --header-inner-pad-x: 24px;
    --hero-logo-header-left: 20px;
  }
}

@media (max-width: 1350px) {
  :root {
    --header-side-inset: 40px;
    --header-menu-font-size: clamp(12px, 0.62vw, 15px);
    --header-menu-gap: clamp(8px, 1.2vw, 24px);
    --header-inner-pad-x: 20px;
    --hero-logo-header-left: 16px;
  }
}

@media (max-width: 1150px) {
  :root {
    --header-side-inset: 20px;
    --header-inner-pad-x: 12px;
    --hero-logo-header-left: 0px;
  }
}

@media (min-width: 1920px) {
  :root {
    --footer-inner-pad-x: 160px;
    --footer-nav-pad-x: 160px;
  }
}

@media (min-width: 2560px) {
  :root {
    --page-side-pad: 200px;
    --page-title-align-x: 200px;
    --header-side-inset: 200px;
    --footer-inner-pad-x: 120px;
    --footer-nav-pad-x: 120px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-side-pad: 15px;
    --page-title-align-x: 15px;
    --footer-inner-pad-x: 15px;
    --footer-nav-pad-x: 15px;
    --footer-pad-y-top: 16px;
    --footer-pad-y-bottom: 24px;
    --footer-nav-pad-y-top: 16px;
    --footer-nav-pad-y-bottom: 20px;
  }
}