/*
  Text styles — one class per Figma text style, using the 03 Typography tokens.
  Headings get their matching style automatically; use the .text-* classes when a
  style is needed on another element, so the look stays separate from the HTML meaning.
  Sizes switch between Figma's Mobile and Desktop modes in tokens.css.
*/

/* ---------- Font files (/assets/fonts) ---------- */
/* WOFF2 first (smallest); browsers that can't read it use the .otf/.ttf instead.
   font-display: swap shows fallback text right away, then swaps in the font once loaded. */

@font-face {
  font-family: "Biago";
  src:
    url("../assets/fonts/biago-light.woff2") format("woff2"),
    url("../assets/fonts/biago-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Biago";
  src:
    url("../assets/fonts/biago-regular.woff2") format("woff2"),
    url("../assets/fonts/biago-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Biago";
  src:
    url("../assets/fonts/biago-semibold.woff2") format("woff2"),
    url("../assets/fonts/biago-semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Batuphat Script";
  src:
    url("../assets/fonts/batuphat-script.woff2") format("woff2"),
    url("../assets/fonts/batuphat-script.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nersans Two";
  src:
    url("../assets/fonts/nersans-two.woff2") format("woff2"),
    url("../assets/fonts/nersans-two.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body,
.text-paragraph {
  font-family: var(--paragraph-font-family);
  font-weight: var(--paragraph-font-weight);
  font-size: var(--paragraph-font-size);
  line-height: var(--paragraph-line-height);

  letter-spacing: var(--paragraph-letter-spacing);
}

body {
  color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
}

h1, .text-h1 {
  font-family: var(--h1-font-family);
  font-weight: var(--h1-font-weight);
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);

  letter-spacing: var(--h1-letter-spacing);
}

h2, .text-h2 {
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);

  letter-spacing: var(--h2-letter-spacing);
}

h3, .text-h3 {
  font-family: var(--h3-font-family);
  font-weight: var(--h3-font-weight);
  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);

  letter-spacing: var(--h3-letter-spacing);
}

h4, .text-h4 {
  font-family: var(--h4-font-family);
  font-weight: var(--h4-font-weight);
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);

  letter-spacing: var(--h4-letter-spacing);
}

h5, .text-h5 {
  font-family: var(--h5-font-family);
  font-weight: var(--h5-font-weight);
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);

  letter-spacing: var(--h5-letter-spacing);
}

h6, .text-h6 {
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  font-size: var(--h6-font-size);
  line-height: var(--h6-line-height);

  letter-spacing: var(--h6-letter-spacing);
}

.text-body-xl {
  font-family: var(--body-xl-font-family);
  font-weight: var(--body-xl-font-weight);
  font-size: var(--body-xl-font-size);
  line-height: var(--body-xl-line-height);

  letter-spacing: var(--body-xl-letter-spacing);
}

.text-body-l {
  font-family: var(--body-l-font-family);
  font-weight: var(--body-l-font-weight);
  font-size: var(--body-l-font-size);
  line-height: var(--body-l-line-height);

  letter-spacing: var(--body-l-letter-spacing);
}

.text-body-m {
  font-family: var(--body-m-font-family);
  font-weight: var(--body-m-font-weight);
  font-size: var(--body-m-font-size);
  line-height: var(--body-m-line-height);

  letter-spacing: var(--body-m-letter-spacing);
}

.text-body-s {
  font-family: var(--body-s-font-family);
  font-weight: var(--body-s-font-weight);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);

  letter-spacing: var(--body-s-letter-spacing);
}

.text-body-xs {
  font-family: var(--body-xs-font-family);
  font-weight: var(--body-xs-font-weight);
  font-size: var(--body-xs-font-size);
  line-height: var(--body-xs-line-height);

  letter-spacing: var(--body-xs-letter-spacing);
}

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

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

.text-nav-menu {
  font-family: var(--nav-menu-font-family);
  font-weight: var(--nav-menu-font-weight);
  font-size: var(--nav-menu-font-size);
  line-height: var(--nav-menu-line-height);

  letter-spacing: var(--nav-menu-letter-spacing);
}

.text-accent {
  font-family: var(--accent-font-family);
  font-weight: var(--accent-font-weight);
  font-size: var(--accent-font-size);
  line-height: var(--accent-line-height);

  letter-spacing: var(--accent-letter-spacing);
}

.text-footer-menu {
  font-family: var(--footer-menu-font-family);
  font-weight: var(--footer-menu-font-weight);
  font-size: var(--footer-menu-font-size);
  line-height: var(--footer-menu-line-height);

  letter-spacing: var(--footer-menu-letter-spacing);
}

/* ---------- Defaults for plain elements ---------- */
/* h1–h6 get their Figma style above; body text uses "paragraph". */

p + p {
  margin-top: var(--space-md);
}

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

a:hover {
  color: var(--color-text-primary);
  text-decoration-thickness: var(--focus-ring-width);
}

strong, b {
  font-weight: var(--strong-font-weight);
}

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

/* One highlighted word or phrase inside a heading, e.g. "<span class="text-highlight">Healthy</span> made delicious!" */
.text-highlight { color: var(--color-text-accent); }