/* ============================================================
   Mareas del Sur — Typography Tokens
   Corporate: Montserrat  ·  Auxiliary: Open Sans
   Display & headings use Montserrat (often UPPERCASE, tight
   tracking like the wordmark). Body uses Open Sans.
   ============================================================ */

:root {
  /* Families */
  --font-display: "Montserrat", system-ui, sans-serif;  /* headings, wordmark */
  --font-body: "Open Sans", system-ui, sans-serif;       /* paragraphs, UI    */
  --font-heading: var(--font-display);

  /* Weights — Montserrat */
  --fw-light: 300;      /* @kind font */
  --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 (1.250 major-third-ish, tuned) */
  --fs-display-xl: 4.5rem;   /* 72 — hero */
  --fs-display-lg: 3.5rem;   /* 56 */
  --fs-display-md: 2.75rem;  /* 44 */
  --fs-h1: 2.25rem;          /* 36 */
  --fs-h2: 1.75rem;          /* 28 */
  --fs-h3: 1.375rem;         /* 22 */
  --fs-h4: 1.125rem;         /* 18 */
  --fs-body-lg: 1.125rem;    /* 18 */
  --fs-body: 1rem;           /* 16 */
  --fs-body-sm: 0.875rem;    /* 14 */
  --fs-caption: 0.75rem;     /* 12 */
  --fs-overline: 0.6875rem;  /* 11 */

  /* Line heights */
  --lh-tight: 1.05;     /* @kind font */
  --lh-snug: 1.2;       /* @kind font */
  --lh-heading: 1.25;   /* @kind font */
  --lh-body: 1.6;       /* @kind font */
  --lh-relaxed: 1.75;   /* @kind font */

  /* Letter spacing — Montserrat caps want tight tracking;
     overlines/labels want wide tracking */
  --ls-tighter: -0.02em;  /* @kind font */
  --ls-tight: -0.01em;    /* @kind font */
  --ls-normal: 0;         /* @kind font */
  --ls-wide: 0.04em;      /* @kind font */
  --ls-wider: 0.12em;     /* @kind font */
  --ls-overline: 0.18em;  /* @kind font */
}

/* ---- Optional helper classes (handy in specimens & kits) ---- */
.mds-overline {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}
.mds-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-strong);
}
.mds-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: var(--text-strong); }
.mds-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: var(--text-strong); }
.mds-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-strong); }
.mds-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.mds-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-body); }