/* ============================================================
   Ketofia — Typography tokens
   Display = Cabinet Grotesk (titulares, precios, nombres de
   producto). Body = Satoshi (texto corrido, UI, etiquetas).
   Mobile-first scale.
   ============================================================ */
:root {
  --font-display: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --font-body:    'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* type scale (rem @16px base) */
  --text-2xs: 0.6875rem; /* 11px — micro labels */
  --text-xs:  0.75rem;   /* 12px — captions, badges */
  --text-sm:  0.8125rem; /* 13px — secondary */
  --text-base:0.9375rem; /* 15px — body (mobile default) */
  --text-md:  1rem;      /* 16px */
  --text-lg:  1.125rem;  /* 18px — card title */
  --text-xl:  1.375rem;  /* 22px — section head */
  --text-2xl: 1.75rem;   /* 28px — display sm */
  --text-3xl: 2.25rem;   /* 36px — display */
  --text-4xl: 3rem;      /* 48px — hero */

  /* line-heights */
  --lh-tight:  1.05; /* @kind other */
  --lh-snug:   1.2;  /* @kind other */
  --lh-normal: 1.45; /* @kind other */
  --lh-relaxed:1.6;  /* @kind other */

  /* letter-spacing */
  --ls-tight:  -0.02em; /* @kind other */
  --ls-snug:   -0.01em; /* @kind other */
  --ls-normal: 0;       /* @kind other */
  --ls-wide:   0.04em;  /* @kind other */
  --ls-caps:   0.12em;  /* @kind other */
}

/* ---- Helper text roles (optional utility classes) ---- */
.ket-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.ket-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}