/* https://www.figma.com/design/uGmRDp2g97EYEKXuZUwq87/TC-Design-System--Internal-?node-id=7842-36176&m=dev */

:root {
  /* Titles */
  --font-size-title-xxl: clamp(64px, calc(64px + (90 - 64) * ((100vw - 320px) / 640)), 90px);
  --font-size-title-xl: clamp(54px, calc(54px + (72 - 54) * ((100vw - 320px) / 640)), 72px);
  --font-size-title-l: clamp(42px, calc(42px + (54 - 42) * ((100vw - 320px) / 640)), 54px);
  --font-size-title-m: clamp(32px, calc(32px + (42 - 32) * ((100vw - 320px) / 640)), 42px);
  --font-size-title-s: clamp(28px, calc(28px + (32 - 28) * ((100vw - 320px) / 640)), 32px);
  --font-size-title-xs: clamp(20px, calc(20px + (28 - 20) * ((100vw - 320px) / 640)), 28px);
  --font-size-title-xxs: clamp(18px, calc(18px + (20 - 18) * ((100vw - 320px) / 640)), 20px);


  /* Display */
  --font-size-display-xl: clamp(48px, calc(48px + (48 - 48) * ((100vw - 320px) / 640)), 48px);
  --font-size-display-l: clamp(32px, calc(32px + (32 - 32) * ((100vw - 320px) / 640)), 32px);
  --font-size-display-m: clamp(24px, calc(24px + (24 - 24) * ((100vw - 320px) / 640)), 24px);
  --font-size-display-s: clamp(20px, calc(20px + (20 - 20) * ((100vw - 320px) / 640)), 20px);
  --font-size-display-xs: clamp(16px, calc(16px + (16 - 16) * ((100vw - 320px) / 640)), 16px);


  /* Body */
  --font-size-body-xl: clamp(24px, calc(24px + (24 - 24) * ((100vw - 320px) / 640)), 24px);
  --font-size-body-l: clamp(20px, calc(20px + (20 - 20) * ((100vw - 320px) / 640)), 20px);
  --font-size-body-m: clamp(18px, calc(18px + (18 - 18) * ((100vw - 320px) / 640)), 18px);
  --font-size-body-s: clamp(16px, calc(16px + (16 - 16) * ((100vw - 320px) / 640)), 16px);
  --font-size-body-xs: clamp(14px, calc(14px + (14 - 14) * ((100vw - 320px) / 640)), 14px);
  --font-size-body-xxs: clamp(12px, calc(12px + (12 - 12) * ((100vw - 320px) / 640)), 12px);
  --font-size-body-xxxs: clamp(10px, calc(10px + (12 - 10) * ((100vw - 320px) / 640)), 12px);


  /* Handwritten */
  --font-size-hand-written-l: clamp(0px, calc(0px + (56 - 0) * ((100vw - 320px) / 640)), 56px);
  --font-size-hand-written-m: clamp(0px, calc(0px + (48 - 0) * ((100vw - 320px) / 640)), 48px);
  --font-size-hand-written-s: clamp(0px, calc(0px + (40 - 0) * ((100vw - 320px) / 640)), 40px);


  /* Line Heights */
  --font-line-height-56: clamp(40px, calc(40px + (56 - 40) * ((100vw - 320px) / 640)), 56px);
  --font-line-height-42: clamp(32px, calc(32px + (42 - 32) * ((100vw - 320px) / 640)), 42px);
  --font-line-height-34: clamp(28px, calc(28px + (34 - 28) * ((100vw - 320px) / 640)), 34px);
  --font-line-height-30: clamp(24px, calc(24px + (30 - 24) * ((100vw - 320px) / 640)), 30px);
  --font-line-height-25: clamp(20px, calc(20px + (25 - 20) * ((100vw - 320px) / 640)), 25px);
  --font-line-height-22: clamp(18px, calc(18px + (22 - 18) * ((100vw - 320px) / 640)), 22px);
  --font-line-height-20: clamp(16px, calc(16px + (20 - 16) * ((100vw - 320px) / 640)), 20px);
  --font-line-height-18: clamp(14px, calc(14px + (18 - 14) * ((100vw - 320px) / 640)), 18px);
  --font-line-height-16: clamp(12px, calc(12px + (16 - 12) * ((100vw - 320px) / 640)), 16px);
  --font-line-height-70: clamp(50px, calc(50px + (70 - 50) * ((100vw - 320px) / 640)), 70px);
  --font-line-height-48: clamp(36px, calc(36px + (48 - 36) * ((100vw - 320px) / 640)), 48px);

  /* multiple variables for easily in future instead of depending on one  */
  --font-family-title: quincy-cf, Georgia, sans-serif;
  --font-family-display: "Plus Jakarta Sans", Verdana, sans-serif;
  --font-family-body: "Plus Jakarta Sans", Verdana, sans-serif;
  --font-family-hand-written: 'square-peg', cursive;
  --font-family-utility: "Plus Jakarta Sans", Verdana, sans-serif;

  /*  for fonts short hand ex:  font: var(--font-title-xl) */
  /* font: [font-style] [font-variant] [font-weight] [font-size] / [line-height] [font-family]; */
  /* ----- TITLE ----- */
  --font-title-xl: 300 var(--font-size-title-xl) / var(--font-line-height-70) var(--font-family-title);
  --font-title-lg: 400 var(--font-size-title-l) / var(--font-line-height-56) var(--font-family-title);
  --font-title-md: 400 var(--font-size-title-m) / var(--font-line-height-42) var(--font-family-title);
  --font-title-sm: 400 var(--font-size-title-s) / var(--font-line-height-34) var(--font-family-title);
  --font-title-xs: 400 var(--font-size-title-xs) / var(--font-line-height-34) var(--font-family-title);
  --font-title-xxs: 400 var(--font-size-title-xxs) / var(--font-line-height-34) var(--font-family-title);

  /* ----- DISPLAY ----- */
  --font-display-xl: 400 var(--font-size-display-xl) / var(--font-line-height-56) var(--font-family-display);
  --font-display-lg: 400 var(--font-size-display-l) / var(--font-line-height-42) var(--font-family-display);
  --font-display-md: 400 var(--font-size-display-m) / var(--font-line-height-30) var(--font-family-display);
  --font-display-sm: 400 var(--font-size-display-s) / var(--font-line-height-25) var(--font-family-display);
  --font-display-xs: 400 var(--font-size-display-xs) / var(--font-line-height-22) var(--font-family-display);

  /* ----- BODY ----- */
  --font-body-xl: 400 var(--font-size-body-xl) / var(--font-line-height-34) var(--font-family-body);
  --font-body-lg: 400 var(--font-size-body-l) / var(--font-line-height-30) var(--font-family-body);
  --font-body-md: 400 var(--font-size-body-m) / var(--font-line-height-25) var(--font-family-body);
  --font-body-sm: 400 var(--font-size-body-s) / var(--font-line-height-25) var(--font-family-body);
  --font-body-xs: 400 var(--font-size-body-xs) / var(--font-line-height-22) var(--font-family-body);
  --font-body-xxs: 400 var(--font-size-body-xxs) / var(--font-line-height-18) var(--font-family-body);
  --font-body-xxxs: 400 var(--font-size-body-xxxs) / var(--font-line-height-16) var(--font-family-body);

  /* ----- HAND-WRITTEN ----- */
  --font-hand-written-lg: 400 var(--font-size-hand-written-l) / var(--font-line-height-70) var(--font-family-hand-written);
  --font-hand-written-md: 400 var(--font-size-hand-written-m) / var(--font-line-height-56) var(--font-family-hand-written);
  --font-hand-written-sm: 400 var(--font-size-hand-written-s) / var(--font-line-height-48) var(--font-family-hand-written);

  /* ----- UTILITY ----- */
  --font-button-lg: 700 16px / var(--font-line-height-25) var(--font-family-utility);
  --font-button-sm: 700 14px / var(--font-line-height-20) var(--font-family-utility);
  --font-button-xs: 700 12px / var(--font-line-height-20) var(--font-family-utility);

  --font-overline-lg: 800 12px / var(--font-line-height-18) var(--font-family-utility);
  --font-overline-sm: 800 10px / var(--font-line-height-16) var(--font-family-utility);
}


.font-weight-regular {
  font-weight: 400px !important;
}

.font-weight-medium {
  font-weight: 500 !important;
  /*important to overwrite class font-weight*/
}

.font-weight-semi-bold {
  font-weight: 600 !important;
  /*important to overwrite class font-weight*/
}

.font-weight-bold {
  font-weight: 700 !important;
  /*important to overwrite class font-weight*/
}

/* title fonts */
.font-title-xl {
  font-family: var(--font-family-title);
  font-size: var(--font-size-title-xl);
  line-height: var(--font-line-height-70);
  font-style: normal;
  font-weight: 300;
}

.font-title-lg {
  font-family: var(--font-family-title);
  font-size: var(--font-size-title-l);
  line-height: var(--font-line-height-56);
  font-style: normal;
  font-weight: 400;
}

.font-title-md {
  font-family: var(--font-family-title);
  font-size: var(--font-size-title-m);
  line-height: var(--font-line-height-42);
  font-style: normal;
  font-weight: 400;
}

.font-title-sm {
  font-family: var(--font-family-title);
  font-size: var(--font-size-title-s);
  line-height: var(--font-line-height-34);
  font-style: normal;
  font-weight: 400;
}

.font-title-xs {
  font-family: var(--font-family-title);
  font-size: var(--font-size-title-xs);
  line-height: var(--font-line-height-34);
  font-style: normal;
  font-weight: 400;
}

.font-title-xxs {
  font-family: var(--font-family-title);
  font-size: var(--font-size-title-xxs);
  line-height: var(--font-line-height-34);
  font-style: normal;
  font-weight: 400;
}


/* font display */
.font-display-xl {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-xl);
  line-height: var(--font-line-height-56);
  font-style: normal;
  font-weight: 400;
}

.font-display-lg {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-l);
  line-height: var(--font-line-height-42);
  font-style: normal;
  font-weight: 400;
}

.font-display-md {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-m);
  line-height: var(--font-line-height-30);
  font-style: normal;
  font-weight: 400;
}

.font-display-sm {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-s);
  line-height: var(--font-line-height-25);
  font-style: normal;
  font-weight: 400;
}


.font-display-xs {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-xs);
  line-height: var(--font-line-height-22);
  font-style: normal;
  font-weight: 400;
}


/* font body */

.font-body-xl {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-xl);
  line-height: var(--font-line-height-34);
  font-style: normal;
  font-weight: 400;
}

.font-body-lg {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-l);
  line-height: var(--font-line-height-30);
  font-style: normal;
  font-weight: 400;
}

.font-body-md {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-m);
  line-height: var(--font-line-height-25);
  font-style: normal;
  font-weight: 400;
}

.font-body-sm {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-s);
  line-height: var(--font-line-height-25);
  font-style: normal;
  font-weight: 400;
}

.font-body-xs {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-xs);
  line-height: var(--font-line-height-22);
  font-style: normal;
  font-weight: 400;
}

.font-body-xxs {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-xxs);
  line-height: var(--font-line-height-18);
  font-style: normal;
  font-weight: 400;
}

.font-body-xxxs {
  font-feature-settings: 'dlig' on;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-xxxs);
  line-height: var(--font-line-height-16);
  font-style: normal;
  font-weight: 400;
}

/* font handwritten */
.font-hand-written-lg {
  font-family: var(--font-family-hand-written);
  font-size: var(--font-size-hand-written-l);
  line-height: var(--font-line-height-70);
  font-style: normal;
  font-weight: 400;
}

.font-hand-written-md {
  font-family: var(--font-family-hand-written);
  font-size: var(--font-size-hand-written-m);
  line-height: var(--font-line-height-56);
  font-style: normal;
  font-weight: 400;
}

.font-hand-written-sm {
  font-family: var(--font-family-hand-written);
  font-size: var(--font-size-hand-written-s);
  line-height: var(--font-line-height-48);
  font-style: normal;
  font-weight: 400;
}

/* utility fonts */

.font-button-lg {
  font-family: var(--font-family-utility);
  font-size: 16px;
  line-height: var(--font-line-height-25);
  font-style: normal;
  font-weight: 700;
}

.font-button-sm {
  font-family: var(--font-family-utility);
  font-size: 14px;
  line-height: var(--font-line-height-20);
  font-style: normal;
  font-weight: 700;
}

.font-overline-lg {
  font-family: var(--font-family-utility);
  font-size: 12px;
  line-height: var(--font-line-height-18);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.font-overline-sm {
  font-family: var(--font-family-utility);
  font-size: 10px;
  line-height: var(--font-line-height-16);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}