/* ============================================================
   DIGITAL PREMIUM — TYPOGRAPHY TOKENS (línea gráfica oficial)
   Headlines: Montserrat heavy ITALIC, uppercase, one or two
   words flipped to lime. Labels: Oswald uppercase, wide tracking.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display:   'Montserrat', system-ui, sans-serif;  /* headlines */
  --font-body:      'Montserrat', system-ui, sans-serif;  /* body copy */
  --font-condensed: 'Oswald', 'Montserrat', sans-serif;   /* labels, stats */

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

  /* ---- Display (marketing/hero): heavy italic ---- */
  --text-display-xl: italic 900 clamp(3rem, 6vw, 5rem)/0.98 var(--font-display);
  --text-display-lg: italic 800 clamp(2.4rem, 4.5vw, 3.6rem)/1.02 var(--font-display);
  --text-display-md: italic 800 clamp(1.9rem, 3vw, 2.6rem)/1.05 var(--font-display);
  --text-display-sm: italic 800 1.75rem/1.08 var(--font-display);

  /* ---- Headings (product UI): upright bold ---- */
  --text-h1: 800 2rem/1.12 var(--font-display);
  --text-h2: 700 1.5rem/1.18 var(--font-display);
  --text-h3: 700 1.2rem/1.25 var(--font-display);
  --text-h4: 600 1rem/1.3 var(--font-display);

  /* ---- Body ---- */
  --text-lg:   400 1.125rem/1.6 var(--font-body);
  --text-base: 400 1rem/1.6 var(--font-body);
  --text-sm:   400 0.875rem/1.55 var(--font-body);
  --text-xs:   500 0.75rem/1.5 var(--font-body);
  --text-quote: italic 500 1rem/1.5 var(--font-body);

  /* ---- Condensed label (chips, eyebrows, stats) ---- */
  --text-eyebrow: 500 0.8125rem/1 var(--font-condensed);
  --text-label:   600 0.875rem/1.1 var(--font-condensed);
  --text-chip:    500 1rem/1 var(--font-condensed);
  --text-stat:    700 clamp(2.4rem, 5vw, 4rem)/0.92 var(--font-condensed);

  /* ---- Letter-spacing ---- */
  --tracking-eyebrow: 0.16em; /* @kind other */
  --tracking-chip:    0.22em; /* @kind other */
  --tracking-tight:  -0.01em; /* @kind other */
  --tracking-normal:  0; /* @kind other */
  --tracking-wide:    0.04em; /* @kind other */
}

/* Convenience utility classes (optional for consumers) */
.dp-eyebrow {
  font: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-accent);
}
.dp-display { font: var(--text-display-lg); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.dp-display em { color: var(--text-accent); font-style: inherit; }
.dp-stat { font: var(--text-stat); text-transform: uppercase; }