/* ------------------------------
 | 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: 15% / 0.15em
 |
 | SCALE:
 | - Ratio: 1.19 - Minor Third
 |
 | 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.6875rem;
  --font-size-1b: 0.8125rem;

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

  /* above the base */
  --font-size-1: 1.1875rem;
  --font-size-2: 1.4375rem;
  --font-size-3: 1.6875rem;
  --font-size-4: 2rem;
  --font-size-5: 2.375rem;
  --font-size-6: 2.8125rem;
  --font-size-7: 3.375rem;
}

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

:root {
  /* below the base */
  --line-height-2b: 1.8182;
  --line-height-1b: 1.5385;

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

  /* above the base */
  --line-height-1: 1.4737;
  --line-height-2: 1.3913;
  --line-height-3: 1.3333;
  --line-height-4: 1.25;
  --line-height-5: 1.2632;
  --line-height-6: 1.1556;
  --line-height-7: 1.1852;
}

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

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

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

  /* above the base */
  --letter-space-1: 0.1216em;
  --letter-space-2: 0.0952em;
  --letter-space-3: 0.0767em;
  --letter-space-4: 0.06em;
  --letter-space-5: 0.0458em;
  --letter-space-6: 0.034em;
  --letter-space-7: 0.0233em;
}

/* ------------------------------
 | 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-3);
  line-height: var(--line-height-3);
  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);
  }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100svh;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}