:root {
  /* Colors */
  --color-navy: #002144;
  --color-black: #000000;
  --color-blue: #0073b2;
  --color-teal: #007d79;
  --color-teal-accent: #00b0ab;
  --color-yellow: #f6e433;
  --color-white: #ffffff;
  --color-dark-grey: #636564;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 2.5rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 3.5rem;
  --spacing-4xl: 4rem;
  --spacing-5xl: 5rem;
  --spacing-6xl: 6rem;
  --spacing-7xl: 7rem;

  /* Container */
  --container-max-width: 1440px;
  --container-padding: 0 5rem;

  /* Transitions */
  --transition-base: 0.3s ease-in-out;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);

  /* fonts */
  --font-12: 12px;
  --font-13: 13px;
  --font-14: 14px;
  --font-62: clamp(2.5rem, 2.225rem + 1.375vw, 3.875rem);
  --font-48: clamp(2.25rem, 2.1rem + 0.75vw, 3rem);
  --font-34: clamp(1.75rem, 1.675rem + 0.375vw, 2.125rem);
  --font-28: clamp(1.1875rem, 1.075rem + 0.5625vw, 1.75rem);
  --font-20: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);
  --font-16: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);

  /* font weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
}

@media (max-width: 981px) {
  /* Container */
  :root {
    --container-padding: 0 3.5rem;
  }
}

@media (max-width: 540px) {
  /* Container */
  :root {
    --container-padding: 0 2.5rem;
  }
}