/**
 * Global CSS variables for components
 * Derived from scss/modules/_colors.scss
 */

:root {
  /* Base Colors */
  --color-black: #53565a;
  --color-blue: #427bbf;
  --color-gray: #6b6d75;
  --color-gray-dark: #363636;
  --color-light-gray: #f1f1f1;
  --color-light-gray-2: #aaadb1;
  --color-green: #009900;
  --color-green-light: #bee169;
  --color-orange: #ffaf00;
  --color-red: #d1532e;
  --color-white: #ffffff;
  --color-yellow: #f8f829;
  --color-light-yellow: #f5f08b;
  --color-purple: #a20067;
  --color-dark-purple: #690946;
  --color-light-purple: #bb4791;
  --color-pink: #d70073;
  --color-light-pink: #fee4fc;

  --ff-base: "Gotham", sans-serif;
  --fs-base: 18px;
  --fs-md: 16px;
  --fs-sm: 14px;
  --fs-lg: 20px;
  --lh-base: 150%;

  /* Clamp values below, using screen sizes min:640px and max:1320px calculated with: https://royalfig.github.io/fluid-typography-calculator/
   */

  --fs-heading3xl: clamp(
    2.5rem,
    0.6176470588235294rem + 4.705882352941177vw,
    4.5rem
  ); /* 40px - 72px */
  --fs-heading2xl: clamp(
    2.25rem,
    0.6029411764705883rem + 4.117647058823529vw,
    4rem
  ); /* 36px - 64px */
  --fs-headingxl: clamp(
    2rem,
    0.5882352941176472rem + 3.5294117647058822vw,
    3.5rem
  ); /* 32px - 56px */
  --fs-headinglg: clamp(
    1.75rem,
    0.5735294117647058rem + 2.941176470588235vw,
    3rem
  ); /* 28px - 48px */
  --fs-headingmd: clamp(
    1.75rem,
    1.0441176470588236rem + 1.7647058823529411vw,
    2.5rem
  ); /* 24px - 40px */
  --fs-headingsm: clamp(
    1.5rem,
    0.7941176470588236rem + 1.7647058823529411vw,
    2.25rem
  ); /* 22px - 36px */
  --fs-headingxsm: clamp(
    1.25rem,
    1.0147058823529411rem + 0.5882352941176471vw,
    1.5rem
  ); /* 20px - 24px */
  --fs-headingxs: clamp(
    1.125rem,
    1.0073529411764706rem + 0.29411764705882354vw,
    1.25rem
  ); /* 18px - 20px */
  --fs-headingxxs: clamp(
    0.875rem,
    0.7573529411764706rem + 0.29411764705882354vw,
    1rem
  ); /* 14px - 16px */
  --fs-eyebrow: clamp(
    0.875rem,
    0.6397058823529411rem + 0.5882352941176471vw,
    1.125rem
  ); /* 14px - 18px */

  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
}