/**
 * Typography scale ported from the 5centsCDN website (src/styles/typo.css).
 *
 * Plain-CSS port of the Tailwind v4 utilities so the same responsive type
 * scale and heading/body classes are available across the blog theme.
 *
 * Breakpoints: md 48rem (768px) · lg 64rem (1024px) · xl 80rem (1280px) · xxl 90rem (1440px)
 *
 * @package FiveCentsCDN_Blog
 */

:root {
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Noto Sans', system-ui, sans-serif;
  --font-body-roboto: 'Roboto', system-ui, sans-serif;
}

/* ============================ Size scale ============================ */

/* XXXL */
.typo-xxxl { font-size: 1.5rem; line-height: 100%; }            /* 24px */
@media (min-width: 48rem) { .typo-xxxl { font-size: 2.375rem; } } /* 38px */
@media (min-width: 64rem) { .typo-xxxl { font-size: 2.5rem; } }   /* 40px */
@media (min-width: 80rem) { .typo-xxxl { font-size: 3.125rem; } } /* 50px */

/* XXL */
.typo-xxl { font-size: 1.4375rem; line-height: 120%; }          /* 23px */
@media (min-width: 48rem) { .typo-xxl { font-size: 1.75rem; } }   /* 28px */
@media (min-width: 64rem) { .typo-xxl { font-size: 2rem; } }      /* 32px */
@media (min-width: 80rem) { .typo-xxl { font-size: 2.375rem; } }  /* 38px */

/* XL */
.typo-xl { font-size: 1.125rem; }                               /* 18px */
@media (min-width: 48rem) { .typo-xl { font-size: 1.375rem; } }   /* 22px */
@media (min-width: 80rem) { .typo-xl { font-size: 1.5625rem; } }  /* 25px */

/* L */
.typo-l { font-size: 0.875rem; font-weight: 600; }              /* 14px */
@media (min-width: 48rem) { .typo-l { font-size: 0.9375rem; } }   /* 15px */
@media (min-width: 64rem) { .typo-l { font-size: 1rem; } }        /* 16px */
@media (min-width: 80rem) { .typo-l { font-size: 1.125rem; } }    /* 18px */

/* M */
.typo-m { font-size: 0.8125rem; }                               /* 13px */
@media (min-width: 48rem) { .typo-m { font-size: 0.875rem; } }    /* 14px */
@media (min-width: 64rem) { .typo-m { font-size: 1rem; } }        /* 16px */

/* S */
.typo-s { font-size: 0.75rem; }                                 /* 12px */
@media (min-width: 48rem) { .typo-s { font-size: 0.8125rem; } }   /* 13px */
@media (min-width: 64rem) { .typo-s { font-size: 0.875rem; } }    /* 14px */

/* XS */
.typo-xs { font-size: 0.625rem; }                               /* 10px */
@media (min-width: 48rem) { .typo-xs { font-size: 0.75rem; } }    /* 12px */

/* XXS */
.typo-xxs { font-size: 0.5rem; }                                /* 8px */
@media (min-width: 48rem) { .typo-xxs { font-size: 0.625rem; } }  /* 10px */

/* ======================= Headings (Montserrat) ===================== */

.typo-h1-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;        /* 24px */
  line-height: 120%;
  letter-spacing: 0;
}
@media (min-width: 48rem) { .typo-h1-title { font-size: 2.375rem; } }  /* 38px */
@media (min-width: 64rem) { .typo-h1-title { font-size: 2.5rem; } }    /* 40px */
@media (min-width: 80rem) { .typo-h1-title { font-size: 3.125rem; } }  /* 50px */

.typo-h2-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4375rem;     /* 23px */
  line-height: 120%;
  letter-spacing: 0;
}
@media (min-width: 48rem) { .typo-h2-heading { font-size: 1.75rem; } } /* 28px */
@media (min-width: 64rem) { .typo-h2-heading { font-size: 2rem; } }    /* 32px */
@media (min-width: 80rem) { .typo-h2-heading { font-size: 2.375rem; } } /* 38px */

.typo-h3-subheading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;      /* 18px */
  letter-spacing: 0;
}
@media (min-width: 48rem) { .typo-h3-subheading { font-size: 1.375rem; } }  /* 22px */
@media (min-width: 80rem) { .typo-h3-subheading { font-size: 1.5625rem; } } /* 25px */

/* ===================== Body / Paragraphs (Noto Sans) =============== */

.typo-p1 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;      /* 14px */
  letter-spacing: 0;
}
@media (min-width: 48rem) { .typo-p1 { font-size: 0.9375rem; } } /* 15px */
@media (min-width: 64rem) { .typo-p1 { font-size: 1rem; } }      /* 16px */
@media (min-width: 80rem) { .typo-p1 { font-size: 1.125rem; } }  /* 18px */

.typo-p2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8125rem;     /* 13px */
  line-height: 1.5385;
  letter-spacing: 0;
}
@media (min-width: 48rem) { .typo-p2 { font-size: 0.875rem; line-height: 1.5714; } }
@media (min-width: 64rem) { .typo-p2 { font-size: 1rem; line-height: 1.75; } }
@media (min-width: 80rem) { .typo-p2 { font-size: 1rem; line-height: 1.5; } }

.typo-p3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;       /* 12px */
  line-height: 1.5;
  letter-spacing: 0;
}
@media (min-width: 48rem) { .typo-p3 { font-size: 0.8125rem; line-height: 1.5385; } }
@media (min-width: 64rem) { .typo-p3 { font-size: 0.875rem; line-height: 1.4286; } }

.typo-p4 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.625rem;      /* 10px */
  line-height: 1.6;
  letter-spacing: 0;
}
@media (min-width: 48rem) { .typo-p4 { font-size: 0.75rem; line-height: 1.5; } }

.typo-p5 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.5rem;        /* 8px */
}
@media (min-width: 48rem) { .typo-p5 { font-size: 0.625rem; } }

/* ========================= Buttons & Caps ========================= */

.typo-b1 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;      /* 14px */
  letter-spacing: 0;
}
@media (min-width: 48rem) { .typo-b1 { font-size: 0.9375rem; } } /* 15px */
@media (min-width: 64rem) { .typo-b1 { font-size: 1rem; } }      /* 16px */
@media (min-width: 80rem) { .typo-b1 { font-size: 1.125rem; } }  /* 18px */

.typo-product-stack,
.typo-title-cap {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;      /* 14px */
  letter-spacing: 0.003em;
  text-transform: uppercase;
}
@media (min-width: 48rem) { .typo-product-stack, .typo-title-cap { font-size: 0.9375rem; } }
@media (min-width: 64rem) { .typo-product-stack, .typo-title-cap { font-size: 1rem; } }
@media (min-width: 80rem) { .typo-product-stack, .typo-title-cap { font-size: 1.125rem; } }