/* || VARIABLES */
:root {
  --header-container-width: clamp(180px, 20vw, 300px);

  /* COLORS */
  /* Semantic colors - Primary colors */
  --blue: #1c63ec;
  --blue-xr: #2f80ed;
  --ultramarine: #7000ff;
  --green: #1dec86;
  --white: #fff;
  --black: #000000;
  --blue-radial-gradient: radial-gradient(
    50% 50% at 50% 50%,
    #4769ff 37.64%,
    #7000ff 100%
  );

  /* Gray palette */
  --gray-5: #f3f4f5;
  --gray-10: #e8e9ec;
  --gray-20: #ced0d6;
  --gray-30: #b7bac1;
  --gray-40: #9fa3ab;
  --gray-50: #878b95;
  --gray-60: #70747e;
  --gray-70: #595e68;
  --gray-80: #424750;
  --gray-90: #2b3037;
  --gray-100: #091528;

  /* Gray Background */
  --bg-gray-90: #212529;
  --bg-gray-100: #000000;

  /* TYPOGRAPHY */
  /* Display/1 */
  /* Red Hat Display - old */
  --display-1-font-family: "Liter", sans-serif;
  --display-1-font-size: 72px;
  --display-1-line-height: 88px;
  --display-1-letter-spacing: -2px;
  --display-1-light-font: 300 var(--display-1-font-size) /
    var(--display-1-line-height) var(--display-1-font-family);
  --display-1-regular-font: 400 var(--display-1-font-size) /
    var(--display-1-line-height) var(--display-1-font-family);
  --display-1-bold-font: 700 var(--display-1-font-size) /
    var(--display-1-line-height) var(--display-1-font-family);

  /* Display/2 */
  /* Red Hat Display - old */
  --display-2-font-family: "Liter", sans-serif;
  --display-2-font-size: 56px;
  --display-2-line-height: 64px;
  --display-2-letter-spacing: -2px;
  --display-2-light-font: 300 var(--display-2-font-size) /
    var(--display-2-line-height) var(--display-2-font-family);
  --display-2-bold-font: 700 var(--display-2-font-size) /
    var(--display-2-line-height) var(--display-2-font-family);

  /* Heading/1 */
  /* Red Hat Display - old */
  --heading-1-font-family: "Liter", sans-serif;
  --heading-1-font-size: 48px;
  --heading-1-line-height: 56px;
  --heading-1-letter-spacing: -2px;
  --heading-1-light-font: 300 var(--heading-1-font-size) /
    var(--heading-1-line-height) var(--heading-1-font-family);
  --heading-1-medium-font: 500 var(--heading-1-font-size) /
    var(--heading-1-line-height) var(--heading-1-font-family);
  --heading-1-bold-font: 700 var(--heading-1-font-size) /
    var(--heading-1-line-height) var(--heading-1-font-family);

  /* Heading/2 */
  /* Red Hat Display - old */
  --heading-2-font-family: "Liter", sans-serif;
  --heading-2-font-size: 36px;
  --heading-2-line-height: 48px;
  --heading-2-letter-spacing: -1px;
  --heading-2-light-font: 300 var(--heading-2-font-size) /
    var(--heading-2-line-height) var(--heading-2-font-family);
  --heading-2-medium-font: 500 var(--heading-2-font-size) /
    var(--heading-2-line-height) var(--heading-2-font-family);
  --heading-2-bold-font: 700 var(--heading-2-font-size) /
    var(--heading-2-line-height) var(--heading-2-font-family);

  /* Heading/3 */
  /* Red Hat Display - old */
  --heading-3-font-family: "Liter", sans-serif;
  --heading-3-font-size: 24px;
  --heading-3-line-height: 32px;
  --heading-3-letter-spacing: 0px;
  --heading-3-light-font: 300 var(--heading-3-font-size) /
    var(--heading-3-line-height) var(--heading-3-font-family);
  --heading-3-medium-font: 500 var(--heading-3-font-size) /
    var(--heading-3-line-height) var(--heading-3-font-family);
  --heading-3-bold-font: 700 var(--heading-3-font-size) /
    var(--heading-3-line-height) var(--heading-3-font-family);

  /* Heading/4 */
  /* Red Hat Display - old */
  --heading-4-font-family: "Liter", sans-serif;
  --heading-4-font-size: 18px;
  --heading-4-line-height: 24px;
  --heading-4-letter-spacing: 0px;
  --heading-4-light-font: 300 var(--heading-4-font-size) /
    var(--heading-4-line-height) var(--heading-4-font-family);
  --heading-4-medium-font: 500 var(--heading-4-font-size) /
    var(--heading-4-line-height) var(--heading-4-font-family);
  --heading-4-bold-font: 700 var(--heading-4-font-size) /
    var(--heading-4-line-height) var(--heading-4-font-family);

  /* Body Extra Large */
  /* Red Hat Text - old */
  --body-extra-large-font-family: "Liter", sans-serif;
  --body-extra-large-font-size: 24px;
  --body-extra-large-line-height: 40px;
  --body-extra-large-regular-font: 400 var(--body-extra-large-font-size) /
    var(--body-extra-large-line-height) var(--body-extra-large-font-family);
  --body-extra-large-semibold-font: 600 var(--body-extra-large-font-size) /
    var(--body-extra-large-line-height) var(--body-extra-large-font-family);
  --body-extra-large-bold-font: 700 var(--body-extra-large-font-size) /
    var(--body-extra-large-line-height) var(--body-extra-large-font-family);

  /* Body Large */
  /* Red Hat Text - old */
  --body-large-font-family: "Liter", sans-serif;
  --body-large-font-size: 16px;
  --body-large-line-height: 24px;
  --body-large-regular-font: 400 var(--body-large-font-size) /
    var(--body-large-line-height) var(--body-large-font-family);
  --body-large-semibold-font: 600 var(--body-large-font-size) /
    var(--body-large-line-height) var(--body-large-font-family);
  --body-large-bold-font: 700 var(--body-large-font-size) /
    var(--body-large-line-height) var(--body-large-font-family);

  /* Body Medium */
  /* Red Hat Text - old */
  --body-medium-font-family: "Liter", sans-serif;
  --body-medium-font-size: 14px;
  --body-medium-line-height: 18px;
  --body-medium-regular-font: 400 var(--body-medium-font-size) /
    var(--body-medium-line-height) var(--body-medium-font-family);
  --body-medium-semibold-font: 600 var(--body-medium-font-size) /
    var(--body-medium-line-height) var(--body-medium-font-family);
  --body-medium-bold-font: 700 var(--body-medium-font-size) /
    var(--body-medium-line-height) var(--body-medium-font-family);

  /* Body Small */
  /* Red Hat Text - old */
  --body-small-font-family: "Liter", sans-serif;
  --body-small-font-size: 12px;
  --body-small-line-height: 16px;
  --body-small-regular-font: 400 var(--body-small-font-size) /
    var(--body-small-line-height) var(--body-small-font-family);
  --body-small-semibold-font: 600 var(--body-small-font-size) /
    var(--body-small-line-height) var(--body-small-font-family);
  --body-small-bold-font: 700 var(--body-small-font-size) /
    var(--body-small-line-height) var(--body-small-font-family);

  /* ANIMATION */
  --transition-fast-duration: 0.12s;
  --transition-normal-duration: 0.3s;
  --transition-slow-duration: 0.5s;

  --transition-timing-bounce: cubic-bezier(0.47, 1.64, 0.41, 0.8);

  /* RESPONSIVE */
  @media (max-width: 960px) {
    /* Display/1 */
    --display-1-font-size: 48px;
    --display-1-line-height: 56px;
    --display-1-letter-spacing: -2px;

    /* Display/2 */
    --display-2-font-size: 36px;
    --display-2-line-height: 48px;
    --display-2-letter-spacing: -2px;

    /* Heading/1 */
    --heading-1-font-size: 24px;
    --heading-1-line-height: 32px;
    --heading-1-letter-spacing: -1px;

    /* Heading/2 */
    --heading-2-font-size: 20px;
    --heading-2-line-height: 28px;
    --heading-2-letter-spacing: 0px;

    /* Heading/3 */
    --heading-3-font-size: 16px;
    --heading-3-line-height: 24px;
    --heading-3-letter-spacing: 0px;

    /* Heading/4 */
    --heading-4-font-size: 16px;
    --heading-4-line-height: 24px;
    --heading-4-letter-spacing: 0px;
  }
}

/* END - VARIABLES */