/* ==================================================
   NEUROONKO — TYPOGRAFIA
================================================== */

/* ==================================================
   ZASADY STOSOWANIA
   <p class="text-body-m font-regular">
   Treść akapitu
   </p>
================================================== */

/* ==================================================
   ZMIENNE TYPOGRAFICZNE
================================================== */

:root {
  /* Font families */
  --font-inter: "Inter", Arial, sans-serif;
  --font-sora: "Sora", Arial, sans-serif;
  --font-noto-serif-display: "Noto Serif Display", Georgia, serif;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Display 1 */
  --font-size-display-1: 61px;
  --line-height-display-1: 1.1;
  --letter-spacing-display-1: -0.03em;

  /* H0 */
  --font-size-h0: 45px;
  --line-height-h0: 1.3;
  --letter-spacing-h0: -0.01em;

  /* H1 */
  --font-size-h1: 34px;
  --line-height-h1: 1.3;
  --letter-spacing-h1: -0.01em;

  /* H2 */
  --font-size-h2: 25px;
  --line-height-h2: 1.3;
  --letter-spacing-h2: -0.01em;

  /* Body */
  --font-size-body-s: 14px;
  --font-size-body-m: 16px;
  --font-size-body-l: 19px;
  --line-height-body: 1.5;
  --letter-spacing-body: 0;

  /* Caption */
  --font-size-caption-s: 10px;
  --font-size-caption-m: 12px;
  --line-height-caption: 1.5;
  --letter-spacing-caption: 0;

  /* Button */
  --font-size-button-s: 14px;
  --font-size-button-m: 16px;
  --font-size-button-l: 22px;
  --line-height-button: 1;
  --letter-spacing-button: 0;

  /* Colors */
  --color-text-heading: var(--Primary-colors-Dark-Blue-700);
  --color-text-display-italic: var(--Primary-colors-Blue-500);
  --color-text-body: var(--Primary-colors-Dark-Blue-600);
}


/* ==================================================
   TYPOGRAFIA BAZOWA
================================================== */

body {
  font-family: var(--font-inter);
  font-size: var(--font-size-body-m);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

button,
input,
textarea,
select {
  font: inherit;
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}


/* ==================================================
   DISPLAY 1
   Sora
   61 px / 110% / -3%
================================================== */

.text-display-1 {
  margin: 0;
  font-family: var(--font-sora);
  font-size: var(--font-size-display-1);
  font-style: normal;
  line-height: var(--line-height-display-1);
  letter-spacing: var(--letter-spacing-display-1);
}

.text-display-1-italic {
  margin: 0;
  font-family: var(--font-noto-serif-display);
  font-size: var(--font-size-display-1);
  font-style: italic;
  line-height: var(--line-height-display-1);
  letter-spacing: var(--letter-spacing-display-1);
}


/* ==================================================
   H0
   Sora
   45 px / 130% / -1%
================================================== */

.text-h0 {
  margin: 0;
  font-family: var(--font-sora);
  font-size: var(--font-size-h0);
  font-style: normal;
  line-height: var(--line-height-h0);
  letter-spacing: var(--letter-spacing-h0);
}

.text-h0-italic {
  margin: 0;
  font-family: var(--font-noto-serif-display);
  font-size: var(--font-size-h0);
  font-style: italic;
  line-height: var(--line-height-h0);
  letter-spacing: var(--letter-spacing-h0);
}


/* ==================================================
   H1
   Sora
   34 px / 130% / -1%
================================================== */

.text-h1 {
  margin: 0;
  font-family: var(--font-sora);
  font-size: var(--font-size-h1);
  font-style: normal;
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

.text-h1-italic {
  margin: 0;
  font-family: var(--font-noto-serif-display);
  font-size: var(--font-size-h1);
  font-style: italic;
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}


/* ==================================================
   H2
   Sora
   25 px / 130% / -1%
================================================== */

.text-h2 {
  margin: 0;
  font-family: var(--font-sora);
  font-size: var(--font-size-h2);
  font-style: normal;
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.text-h2-italic {
  margin: 0;
  font-family: var(--font-noto-serif-display);
  font-size: var(--font-size-h2);
  font-style: italic;
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}


/* ==================================================
   BODY S
   Inter
   14 px / 150% / 0
================================================== */

.text-body-s {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--font-size-body-s);
  font-style: normal;
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}


/* ==================================================
   BODY M
   Inter
   16 px / 150% / 0
================================================== */

.text-body-m {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--font-size-body-m);
  font-style: normal;
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}


/* ==================================================
   BODY L
   Inter
   19 px / 150% / 0
================================================== */

.text-body-l {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--font-size-body-l);
  font-style: normal;
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}


/* ==================================================
   BODY L UPPER
   Inter
   19 px / 150% / 0
================================================== */

.text-body-l-upper {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--font-size-body-l);
  font-style: normal;
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  text-transform: uppercase;
}


/* ==================================================
   CAPTION S
   Inter
   10 px / 150% / 0
================================================== */

.text-caption-s {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--font-size-caption-s);
  font-style: normal;
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
}


/* ==================================================
   CAPTION M
   Inter
   12 px / 150% / 0
================================================== */

.text-caption-m {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--font-size-caption-m);
  font-style: normal;
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
}


/* ==================================================
   CAPTION M UPPER
   Inter
   12 px / 150% / 0
================================================== */

.text-caption-m-upper {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--font-size-caption-m);
  font-style: normal;
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
}


/* ==================================================
   BUTTON S
   Inter
   14 px / 100% / 0
================================================== */

.text-button-s {
  margin: 0;
  font-family: var(--font-sora);
  font-size: var(--font-size-button-s);
  font-style: normal;
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
}


/* ==================================================
   BUTTON M / LINK
   Inter Regular
   16 px / 100% / 0
================================================== */

.text-button-m,
.link,
.site-header__menu-link {
  margin: 0;

  font-family: var(--font-sora);
  font-size: var(--font-size-button-m);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
}


/* ==================================================
   BUTTON L
   Sora
   22 px / 100% / 0
================================================== */

.text-button-l {
  margin: 0;

  font-family: var(--font-sora);
  font-size: var(--font-size-button-l);
  font-style: normal;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
}


/* ==================================================
   WAGI FONTÓW
================================================== */

.font-light {
  font-weight: var(--font-weight-light);
}

.font-regular {
  font-weight: var(--font-weight-regular);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}


/* ==================================================
   KOLORY TYPOGRAFII
================================================== */

.text-display-1,
.text-h1,
.text-h1-italic {
  color: var(--color-text-heading);
}

.text-display-1-italic {
  color: var(--color-text-display-italic);
}

.text-body-s,
.text-body-m,
.text-body-l,
.text-body-l-upper,
.text-caption-s,
.text-caption-m,
.text-caption-m-upper {
  color: var(--color-text-body);
}



/* ==================================================
   MOBILE
================================================== */


@media (max-width: 1024px) {

  .text-display-1,
  .text-display-1-italic {
    font-size: 45px;
  }

  .text-h0,
  .text-h0-italic {
    font-size: 39px;
  }

  .text-h1,
  .text-h1-italic {
    font-size: 29px;
  }

}