@use '../settings/breakpoints' as *;

:root {
  --ui-base-font-family-primary: 'Inter', 'arial', sans-serif;
  --dyslexia-font-family-primary: 'Lexend', 'Inter', 'arial', sans-serif;
  --font-family-primary: var(--ui-base-font-family-primary);
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-size-xxs: 0.5rem; /* 8px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px */
  --font-size-n1: 3rem; /* 48px */
  --font-size-n2: 2.5rem; /* 40px */
  --font-size-n3: 2rem; /* 32px */
  --font-size-n4: 1.625rem; /* 26px */
  --font-size-n5: 1.25rem; /* 20px */
  --font-size-n6: 1.125rem; /* 18px */
  --font-size-s1: 1.25rem; /* 20px */
  --font-size-s2: 1.125rem; /* 18px */
  --line-height-xs: 1.125rem; /* 18px */
  --line-height-sm: 1.3125rem; /* 21px */
  --line-height-md: 1.5rem; /* 24px */
  --line-height-n1: 5.875rem; /* 94px */
  --line-height-n2: 4.5rem; /* 72px */
  --line-height-n3: 3.75rem; /* 60px */
  --line-height-n4: 3rem; /* 48px */
  --line-height-n5: 2.5rem; /* 40px */
  --line-height-n6: 1.875rem; /* 30px */
  --line-height-s1: 1.875rem; /* 30px */
  --line-height-s2: 1.688rem; /* 27px */
  --letter-spacing-caption: 0.1%;
  --letter-spacing-sm: -0.4%;
  --letter-spacing-md: -0.4%;
  --letter-spacing-s1: 0.1%;
  --letter-spacing-s2: 0.1%;
}

.b1-bold {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--text1);
}

.b1-light {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--text1);
}

p,
.b1-regular {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--text1);
}

.b2-bold {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--text2);
}

.b2-light {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--text2);
}

span,
.b2-regular {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--text2);
}

.caption-bold {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--text2);
}

.caption-light {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--text2);
}

.caption-regular {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--text2);
}

h1,
.n1 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-n1);
  line-height: var(--line-height-n1);
  color: var(--title);
}

h2,
.n2 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-n2);
  line-height: var(--line-height-n2);
  color: var(--title);
}

h3,
.n3 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-n3);
  line-height: var(--line-height-n3);
  color: var(--title);
}

h4,
.n4 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-n4);
  line-height: var(--line-height-n4);
  color: var(--title);
}

h5,
.n5 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-n5);
  line-height: var(--line-height-n5);
  color: var(--title);
}

h6,
.n6 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-n6);
  line-height: var(--line-height-n6);
  color: var(--title);
}

.s1-bold {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-s1);
  line-height: var(--line-height-s1);
  letter-spacing: var(--letter-spacing-s1);
  color: var(--text1);
}

.s1-light {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-s1);
  line-height: var(--line-height-s1);
  letter-spacing: var(--letter-spacing-s1);
  color: var(--text1);
}

.s1-regular {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s1);
  line-height: var(--line-height-s1);
  letter-spacing: var(--letter-spacing-s1);
  color: var(--text1);
}

.s2-bold {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-s2);
  line-height: var(--line-height-s2);
  letter-spacing: var(--letter-spacing-s2);
  color: var(--text1);
}

.s2-light {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-s2);
  line-height: var(--line-height-s2);
  letter-spacing: var(--letter-spacing-s2);
  color: var(--text1);
}

.s2-regular {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s2);
  line-height: var(--line-height-s2);
  letter-spacing: var(--letter-spacing-s2);
  color: var(--text1);
}

@include max-width(md) {
  :root {
    --font-size-n1: 2.5rem;    /* 40px instead of 62px */
    --font-size-n2: 2rem;      /* 32px instead of 48px */
    --font-size-n3: 1.75rem;   /* 28px instead of 40px */
    --font-size-n4: 1.5rem;    /* 24px instead of 32px */
    --font-size-n5: 1.25rem;   /* 20px instead of 26px */
    
    --line-height-n1: 3rem;    /* 48px instead of 94px */
    --line-height-n2: 2.5rem;  /* 40px instead of 72px */
    --line-height-n3: 2.25rem; /* 36px instead of 60px */
    --line-height-n4: 2rem;    /* 32px instead of 48px */
    --line-height-n5: 1.75rem; /* 28px instead of 40px */
  }
}