/* ==========================================================================
   Typography – fonts, element defaults and one class per Figma text style.
   Uses typography and semantic tokens from tokens.css only.
   Font sizes switch between Figma's Desktop and Mobile modes inside
   tokens.css, so these classes are responsive automatically.
   ========================================================================== */

/* ---------- Fonts (self-hosted in /assets/fonts) ---------- */

/* Sharpie Black – Indian Type Foundry, free via Fontshare (fontshare.com/terms).
   One file covers every weight so the browser never fakes a bolder Sharpie. */
@font-face {
  font-family: "Sharpie";
  src: url("../assets/fonts/SharpieBlack.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* DM Sans – variable font (weights 400–700), SIL Open Font License (DMSans-OFL.txt).
   Split into Latin and Latin Extended so browsers only download what a page uses. */
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans-Italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans-Italic-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Element defaults ---------- */

/* Figma: paragraph */
body {
  font-family: var(--paragraph-font-family);
  font-size: var(--paragraph-font-size);
  font-weight: var(--paragraph-font-weight);
  line-height: var(--paragraph-line-height);
  letter-spacing: var(--paragraph-letter-spacing);
  color: var(--color-text-primary);
  /* DM Sans adjusts its letter shapes to the text size. Measured against
     Figma, "auto" (the browser default) matches Figma's text widths. */
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-block: 0 var(--spacing-stack-md);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-link-hover);
}

h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  text-transform: uppercase; /* fixed in Figma: always capitals */
}

h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: uppercase; /* fixed in Figma: always capitals */
}

h3 {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  text-transform: uppercase; /* fixed in Figma: always capitals */
}

h4 {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}

h5 {
  font-family: var(--h5-font-family);
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
}

h6 {
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
}

/* ---------- Text style classes (one per Figma text style) ---------- */

/* Figma: h1 */
.text-h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  text-transform: uppercase; /* fixed in Figma: always capitals */
}

/* Figma: h2 */
.text-h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: uppercase; /* fixed in Figma: always capitals */
}

/* Figma: h3 */
.text-h3 {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  text-transform: uppercase; /* fixed in Figma: always capitals */
}

/* Figma: h4 */
.text-h4 {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  text-transform: none; /* undo the h1–h3 capitals when a big heading tag uses this style */
}

/* Figma: h5 */
.text-h5 {
  font-family: var(--h5-font-family);
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
  text-transform: none; /* undo the h1–h3 capitals when a big heading tag uses this style */
}

/* Figma: h6 */
.text-h6 {
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
  text-transform: none; /* undo the h1–h3 capitals when a big heading tag uses this style */
}

/* Figma: paragraph */
.text-paragraph {
  font-family: var(--paragraph-font-family);
  font-size: var(--paragraph-font-size);
  font-weight: var(--paragraph-font-weight);
  line-height: var(--paragraph-line-height);
  letter-spacing: var(--paragraph-letter-spacing);
}

/* Figma: body extra large */
.text-body-xl {
  font-family: var(--body-xl-font-family);
  font-size: var(--body-xl-font-size);
  font-weight: var(--body-xl-font-weight);
  line-height: var(--body-xl-line-height);
  letter-spacing: var(--body-xl-letter-spacing);
}

/* Figma: body large */
.text-body-l {
  font-family: var(--body-l-font-family);
  font-size: var(--body-l-font-size);
  font-weight: var(--body-l-font-weight);
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
}

/* Figma: body medium */
.text-body-m {
  font-family: var(--body-m-font-family);
  font-size: var(--body-m-font-size);
  font-weight: var(--body-m-font-weight);
  line-height: var(--body-m-line-height);
  letter-spacing: var(--body-m-letter-spacing);
}

/* Figma: body small */
.text-body-s {
  font-family: var(--body-s-font-family);
  font-size: var(--body-s-font-size);
  font-weight: var(--body-s-font-weight);
  line-height: var(--body-s-line-height);
  letter-spacing: var(--body-s-letter-spacing);
}

/* Figma variables only (no text style): body-xs */
.text-body-xs {
  font-family: var(--body-xs-font-family);
  font-size: var(--body-xs-font-size);
  font-weight: var(--body-xs-font-weight);
  line-height: var(--body-xs-line-height);
  letter-spacing: var(--body-xs-letter-spacing);
}

/* Figma: button large */
.text-button-l {
  font-family: var(--button-l-font-family);
  font-size: var(--button-l-font-size);
  font-weight: var(--button-l-font-weight);
  line-height: var(--button-l-line-height);
  letter-spacing: var(--button-l-letter-spacing);
}

/* Figma: button medium */
.text-button-m {
  font-family: var(--button-m-font-family);
  font-size: var(--button-m-font-size);
  font-weight: var(--button-m-font-weight);
  line-height: var(--button-m-line-height);
  letter-spacing: var(--button-m-letter-spacing);
}

/* Figma: nav menu */
.text-nav-menu {
  font-family: var(--nav-menu-font-family);
  font-size: var(--nav-menu-font-size);
  font-weight: var(--nav-menu-font-weight);
  line-height: var(--nav-menu-line-height);
  letter-spacing: var(--nav-menu-letter-spacing);
}

/* Figma: accent */
.text-accent {
  font-family: var(--accent-font-family);
  font-size: var(--accent-font-size);
  font-weight: var(--accent-font-weight);
  line-height: var(--accent-line-height);
  letter-spacing: var(--accent-letter-spacing);
}

/* Figma: footer menu */
.text-footer-menu {
  font-family: var(--footer-menu-font-family);
  font-size: var(--footer-menu-font-size);
  font-weight: var(--footer-menu-font-weight);
  line-height: var(--footer-menu-line-height);
  letter-spacing: var(--footer-menu-letter-spacing);
}

/* Figma: testimonial */
.text-testimonial {
  font-family: var(--testimonial-font-family);
  font-size: var(--testimonial-font-size);
  font-weight: var(--testimonial-font-weight);
  line-height: var(--testimonial-line-height);
  letter-spacing: var(--testimonial-letter-spacing);
}

/* ---------- Text color helpers ---------- */

.text-secondary {
  color: var(--color-text-secondary);
}

/* Accent colours, e.g. for the highlighted words in a two-colour heading */
.text-accent-orange {
  color: var(--color-text-accent-orange);
}

.text-accent-purple {
  color: var(--color-text-accent-purple);
}

.text-accent-purple-light {
  color: var(--color-text-accent-purple-light);
}