/* ------------------------------
 | MODULAR TYPE SCALE
 | ------------------------------
 | Helps you create type scales that bring natural rhythm,
 | consistency, and balance to your designs.
 |
 | BASE VALUES:
 | - Font Size: 16px / 1rem
 | - Line Height: 24px / 1.5
 | - Letter Spacing: 0% / 0em
 |
 | SCALE:
 | - Ratio: 1.33 - Perfect Fourth
 |
 | LINE GRID:
 | - Grid Unit: 4px / 0.25rem
 |
 |
 | Scale ratio is calculated using an equal temperament tuning system.
 | Created with Precise Type / https://precise-type.com
 | Tools & Models by Adonis Raul Raduca
 */

/* --- Font Sizes --- */

:root {
  /* below the base */
  --font-size-2b: 0.5625rem;
  --font-size-1b: 0.75rem;

  /* the base */
  --font-size: 1rem;

  /* above the base */
  --font-size-1: 1.3125rem;
  --font-size-2: 1.8125rem;
  --font-size-3: 2.375rem;
  --font-size-4: 3.1875rem;
  --font-size-5: 4.25rem;
  --font-size-6: 5.6875rem;
}

/* --- Line Heights --- */

:root {
  /* below the base */
  --line-height-2b: 1.7778;
  --line-height-1b: 1.6667;

  /* the base */
  --line-height: 1.5;

  /* above the base */
  --line-height-1: 1.3333;
  --line-height-2: 1.2414;
  --line-height-3: 1.2632;
  --line-height-4: 1.1765;
  --line-height-5: 1.1176;
  --line-height-6: 1.0989;
}

/* --- Letter Spacings --- */

:root {
  /* below the base */
  --letter-space-2b: 0.0233em;
  --letter-space-1b: 0.01em;

  /* the base */
  --letter-space: 0em;

  /* above the base */
  --letter-space-1: -0.0071em;
  --letter-space-2: -0.0134em;
  --letter-space-3: -0.0174em;
  --letter-space-4: -0.0206em;
  --letter-space-5: -0.0229em;
  --letter-space-6: -0.0247em;
}

/* ------------------------------
 | Examples
 */

/* --- Default Text --- */

body {
  font-weight: 400;
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-space);
}

/* --- Headers --- */

:is(h1, h2, h3) {
  font-weight: 600;
}

h1 {
  font-size: var(--font-size-5);
  line-height: var(--line-height-1b);
  letter-spacing: var(--letter-space-3);
}
h2 {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-space-2);
}
h3 {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-space-1);
}

/* --- Alternative Text Sizes --- */

:is(p, span, a, ul, ol, dl, li, dt, dd, label, blockquote, code) {
  .small-text {
    font-size: var(--font-size-1b);
    line-height: var(--line-height-1b);
    letter-spacing: var(--letter-space-1b);
  }
  .large-text {
    font-size: var(--font-size-1);
    line-height: var(--line-height-1);
    letter-spacing: var(--letter-space-1);
  }
}