:root {
  --font-sans: "IBM Plex Sans", system-ui, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
}

/* =========================
   GLOBAL TYPE SCALE (rem)
   Goal: ~24px minimum on a 14" MacBook (root ≈ 24–28px)
   ========================= */

html {
  /* 1rem becomes ~24–28px depending on viewport */
  font-size: clamp(24px, 1vw + 12px, 28px);
}

body {
  /* Optional but recommended for readability */
  line-height: 1.35;
}

/** × SANS SERIF × **/
.text-xs {
  font-family: var(--font-sans);
  font-size: 0.6rem; /* ~24px at minimum */
  font-weight: 250;
} /* small, articles and credits */

.text-s {
  font-family: var(--font-sans);
  font-size: 0.8rem; /* ~24px at minimum */
  font-weight: 300;
} /* small, articles and credits */

.text-sm {
  font-family: var(--font-sans);
  font-size: 1rem; /* ~24px at minimum */
  font-weight: 300;
} /* small, articles and credits */

.text-ms {
  font-family: var(--font-sans);
  font-size: 1.125rem; /* ~27px+ */
  font-weight: 350;
} /* medium2, species */

.text-m {
  font-family: var(--font-sans);
  font-size: 1.25rem; /* ~30px+ */
  font-weight: 400;
} /* medium, featured articles */

.text-l {
  font-family: var(--font-sans);
  font-size: 1.75rem; /* ~42px+ */
  font-weight: 400;
} /* large, main sections */

.text-xl {
  font-family: var(--font-sans);
  font-size: 2.25rem; /* ~54px+ */
  font-weight: 400;
} /* hero text */

/**** SPECIES SERIF ****/
.text-sp-xs {
  font-family: var(--font-serif);
  font-size: 0.8rem; /* ~24px at minimum */
  font-weight: 250;
}

.text-sp-s {
  font-family: var(--font-serif);
  font-size: 1rem; /* ~24px at minimum */
  font-weight: 300;
}

.text-sp-m {
  font-family: var(--font-serif);
  font-size: 1.125rem; /* ~27px+ */
  font-weight: 400;
}

.text-sp-l {
  font-family: var(--font-serif);
  font-size: 1.75rem; /* ~42px+ */
  font-weight: 400;
}

.text-sp-xl {
  font-family: var(--font-serif);
  font-size: 2.25rem; /* ~54px+ */
  font-weight: 400;
}

/**** WEIGHT ****/
.text-light {
  font-weight: 300;
} /* light */
.text-regular {
  font-weight: 400;
} /* regular (normal) */
.text-medium {
  font-weight: 500;
} /* medium */
.text-bold {
  font-weight: 600;
} /* bold */
.text-black {
  font-weight: 700;
} /* black */

/* IBM Plex Sans */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/plex-sans/IBMPlexSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/plex-sans/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/plex-sans/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/plex-sans/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/plex-sans/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Serif */
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fonts/plex-serif/IBMPlexSerif-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fonts/plex-serif/IBMPlexSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fonts/plex-serif/IBMPlexSerif-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fonts/plex-serif/IBMPlexSerif-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fonts/plex-serif/IBMPlexSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}