:root {
  /* Colors */
  --color-white: #ffffff;
  --color-off-white: #f5f5f5;
  --color-primary: #ec2027;
  --color-primary-light: #f3565c;
  --color-gray-100: #cfcfcf;
  --color-gray-200: #b3b3b3;
  --color-gray-300: #9f9f9f;
  --color-gray-400: #979797;
  --color-gray-500: #797979;
  --color-gray-600: #717171;
  --color-gray-700: #515151;
  --color-gray-800: #333333;
  --color-black: #000000;

  /* Typography */
  --font-primary: "Geologica", sans-serif;

  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Font sizes */
  --fs-h1: 128px;
  --fs-h2: 88px;
  --fs-h3: 50px;
  --fs-h4: 48px;
  --fs-h5: 32px;
  --fs-h6: 28px;
  --fs-h7: 24px;
  --fs-h8: 20px;
  --fs-h9: 18px;
  --fs-h10: 17px;
  --fs-h11: 16px;
  --fs-h12: 15px;
  --fs-h13: 14px;
  --fs-h14: 14px;
  --fs-h145: 13px;
  --fs-h15: 12px;

  /* Semantic color aliases */
  --color-red: #ec2027;
  --color-red-hover: #f3565c;
  --color-grey-bg: #f5f5f5;
  --color-grey-light: #cfcfcf;
  --color-grey-mid: #9f9f9f;
  --color-grey-mid-dark: #717171;
  --color-grey-dark: #515151;

  /* Spacing */
  --section-spacing: 120px;
  --section-spacing-mobile: 50px;

  /* Container */
  --container-width: 94%;
  --container-width-mobile: 92%;
}