:root {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-dark-blue: #081823;
  --color-blue-60: #557786;
  --color-grey-10: #F4F4F4;
  --color-grey-50: #8E8E8E;
  --color-grey-80: #545454;
  --color-accent-1: #A74921;
  --color-dark-blue-alt: #091f28;
  --color-page-bg: #d6d4d4;
  --color-watermark: #bbb;
  --color-title-dark: #0c0c0c;

  --grid-margin: 50px;
  --grid-gutter: 50px;
  --grid-margin-mobile: 20px;
  --grid-col: calc((100vw - 2 * var(--grid-margin) - 11 * var(--grid-gutter)) / 12);
  --grid-col-1: calc(var(--grid-col) + var(--grid-gutter));
  --grid-col-4: calc(4 * var(--grid-col) + 3 * var(--grid-gutter));

  --font-serif: "Playfair Display", serif;
  --font-sans: "Manrope", sans-serif;

  --h1-90-size: clamp(48px, 2.07vw + 40.22px, 90px);
  --h1-90-weight: 200;
  --h1-90-line-height: 1;
  --h1-90-letter-spacing: -0.02em;

  --h2-60-size: clamp(30px, 1.48vw + 24.44px, 60px);
  --h2-60-weight: 200;
  --h2-60-line-height: 1.3;
  --h2-60-letter-spacing: -0.04em;

  --h3-50-size: clamp(26px, 1.19vw + 21.56px, 50px);
  --h3-50-weight: 200;
  --h3-50-line-height: 1.3;
  --h3-50-letter-spacing: -0.04em;

  --h4-30-size: clamp(18px, 0.59vw + 15.78px, 30px);
  --h4-30-weight: 300;
  --h4-30-line-height: 1;
  --h4-30-letter-spacing: -0.04em;

  --h5-24-size: clamp(16px, 0.4vw + 14.52px, 24px);
  --h5-24-weight: 600;
  --h5-24-line-height: 1;
  --h5-24-letter-spacing: -0.04em;

  --label-12-size: 12px;
  --label-12-weight: 800;
  --label-12-line-height: 1;
  --label-12-letter-spacing: -0.02em;

  --display-huge-size: clamp(192px, 4.84vw + 173.85px, 290px);
  --display-stat-size: clamp(44px, 3.75vw + 29.93px, 120px);
}