/* ============================================================
   INNER WORTH — Typography tokens
   Display  → Montserrat (uppercase, black/bold, tight tracking)
   Body     → Google Sans (regular, 1.6 line-height)
   Script   → Caveat (handwritten "destacado" accents)
   ============================================================ */

:root {
  /* ---- FAMILIES --------------------------------------------- */
  --font-display: 'Montserrat', system-ui, sans-serif;   /* titulares */
  --font-body:    'Google Sans', system-ui, sans-serif;  /* cuerpo */
  --font-script:  'Caveat', 'Segoe Script', cursive;     /* destacado */

  /* ---- TYPE SCALE (px / fluid) ------------------------------ */
  --t-display:  clamp(48px, 7vw, 88px); /* @kind font */
  --t-h1:       clamp(36px, 5vw, 60px); /* @kind font */
  --t-h2:       40px;
  --t-h3:       28px;
  --t-h4:       21px;
  --t-body-lg:  19px;
  --t-body:     16px;
  --t-small:    14px;
  --t-caption:  12px;
  --t-script:   34px;

  /* ---- WEIGHTS ---------------------------------------------- */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-semi:    600; /* @kind font */
  --w-bold:    700; /* @kind font */
  --w-black:   900; /* @kind font */

  /* ---- TRACKING --------------------------------------------- */
  --track-display: -.02em;
  --track-eyebrow: .28em;   /* uppercase eyebrows */
}

/* ============================================================
   SEMANTIC TYPE CLASSES — opt-in, mirror the product defaults.
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-display);
  line-height: .96;
  letter-spacing: var(--track-display);
  color: var(--fg1);
  text-transform: uppercase;
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--fg1);
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--fg1);
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  line-height: 1.15;
  color: var(--fg1);
}
.ds-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--t-h4);
  line-height: 1.2;
  color: var(--fg1);
}
.ds-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-caption);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--emerald-700);
}
.ds-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg2);
}
.ds-body-lg {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--fg2);
}
.ds-small   { font-family: var(--font-body); font-size: var(--t-small);   line-height: 1.5; color: var(--fg2); }
.ds-caption { font-family: var(--font-body); font-size: var(--t-caption); line-height: 1.4; color: var(--fg3); }
.ds-script {
  font-family: var(--font-script);
  font-weight: var(--w-bold);
  font-size: var(--t-script);
  line-height: 1;
  color: var(--emerald-700);
}