:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f8f8f8;
  --color-text: #0d0d0d;
  --color-text2: #454545;
  --color-text-muted: #d1d1d1;
  --color-border: #d8d8d8;
  --color-brand: #02265a;
  --color-white: #ffffff;

  --font-body: "Roboto", sans-serif;
  --font-headline: "Roboto Condensed", sans-serif;
  --font-accent: "Inter", sans-serif;

  --container-wide: 93.75rem;
  --container-padding: 2.5rem;

  --section-gap-desktop: 8.75rem;
  --section-gap-tablet: 7.5rem;
  --section-gap-mobile: 6.25rem;

  --radius-round: 999px;
  --radius-none: 0;

  --transition-fast: 0.2s ease;
}

@media (max-width: 1439.98px) {
  :root {
    --container-padding: 2rem;
  }
}

@media (max-width: 991.98px) {
  :root {
    --container-wide: 44.25rem;
    --container-padding: 1.875rem;
  }
}

@media (min-width: 480px) and (max-width: 575.98px) {
  :root {
    --container-padding: 0.9rem;
  }
}

@media (max-width: 479.98px) {
  :root {
    --container-wide: 20rem;
    --container-padding: 1.25rem;
  }
}