/* ===================================================================
   DOFNY — Typography tokens
   Three families: Montserrat (headings/UI, local), Manrope (body,
   Google Fonts), Inter (prices, Google Fonts). Sizes transcribed
   from the .fig — note the un-rounded scale (13px, 22px, 32px …).
=================================================================== */

:root {
  /* ---- Families ------------------------------------------------ */
  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-price: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Weights ------------------------------------------------- */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black: 900;     /* @kind font */

  /* ---- Type scale (px, from source) ---------------------------- */
  --fs-10: 10px;   /* micro labels, eyebrow caps */
  --fs-11: 11px;
  --fs-12: 12px;   /* fine print, meta */
  --fs-13: 13px;   /* dense card data */
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;   /* base body / nav */
  --fs-18: 18px;   /* emphasised body, buttons */
  --fs-20: 20px;   /* card titles */
  --fs-22: 22px;   /* price */
  --fs-24: 24px;   /* section headings */
  --fs-30: 30px;
  --fs-32: 32px;   /* page titles */

  /* ---- Line heights -------------------------------------------- */
  --lh-solid: 100%;    /* the file sets most UI text to 100% */
  --lh-tight: 1.2;     /* @kind font */
  --lh-snug: 1.4;      /* @kind font */
  --lh-body: 1.6;      /* @kind font */

  /* ---- Letter spacing ------------------------------------------ */
  --ls-caps: 1.5px;    /* uppercase footer / eyebrow labels */

  /* ================= SEMANTIC ALIASES ========================== */
  --text-page-title: var(--fw-bold) var(--fs-32) / var(--lh-solid) var(--font-display);
  --text-section-title: var(--fw-bold) var(--fs-24) / var(--lh-solid) var(--font-display);
  --text-card-title: var(--fw-bold) var(--fs-20) / var(--lh-solid) var(--font-display);
  --text-nav: var(--fw-bold) var(--fs-16) / var(--lh-solid) var(--font-ui);
  --text-button: var(--fw-bold) var(--fs-18) / var(--lh-solid) var(--font-ui);
  --text-body-base: var(--fw-regular) var(--fs-16) / var(--lh-body) var(--font-body);
  --text-price: var(--fw-bold) var(--fs-22) / 28px var(--font-price);
  --text-eyebrow: var(--fw-bold) var(--fs-10) / var(--lh-solid) var(--font-ui);
}