/*
 * m3-comexis-typeface.css
 *
 * Extensión del sistema base de tipografía con:
 *   1. Token `--md-ext-typeface-mono` (JetBrains Mono)
 *   2. Cuatro CSS variables que parametrizan los contextos direccionales
 *      (chrome / data / verb / prose)
 *   3. Cuatro clases utility (.t-chrome, .t-data, .t-verb, .t-prose)
 *   4. Selectores automáticos para las clases del demo
 *
 * Ver docs/01-tipografia.md para la regla completa.
 *
 * Orden de carga: después de m3-ext / m3-ext-polyfill / m3-core.
 */

/* === Token: mono típeface ============================================== */
:root {
  --md-ext-typeface-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* === Variables direccionales ===========================================
 * Parametrizan los cuatro contextos. Por default usan las families del
 * sistema (Inter para chrome/verb/prose, mono para data).
 * ====================================================================== */
:root {
  /* chrome — UI labels, eyebrows, captions */
  --md-ext-typo-chrome-family:  var(--md-ext-typeface-plain);
  --md-ext-typo-chrome-weight:  var(--md-ext-typeface-weight-medium);
  --md-ext-typo-chrome-spacing: 0.18em;

  /* data — gauges, sensors, counters, code */
  --md-ext-typo-data-family:    var(--md-ext-typeface-mono);
  --md-ext-typo-data-weight:    var(--md-ext-typeface-weight-regular);
  --md-ext-typo-data-spacing:   0.04em;

  /* verb — action buttons, CTAs */
  --md-ext-typo-verb-family:    var(--md-ext-typeface-plain);
  --md-ext-typo-verb-weight:    var(--md-ext-typeface-weight-medium);
  --md-ext-typo-verb-spacing:   0.04em;

  /* prose — body, leads, descriptions */
  --md-ext-typo-prose-family:   var(--md-ext-typeface-plain);
  --md-ext-typo-prose-weight:   var(--md-ext-typeface-weight-regular);
  --md-ext-typo-prose-spacing:  0;
}

/* === Utility classes =================================================== */

.t-chrome {
  font-family:    var(--md-ext-typo-chrome-family);
  font-weight:    var(--md-ext-typo-chrome-weight);
  letter-spacing: var(--md-ext-typo-chrome-spacing);
  text-transform: uppercase;
}

.t-data {
  font-family:    var(--md-ext-typo-data-family);
  font-weight:    var(--md-ext-typo-data-weight);
  letter-spacing: var(--md-ext-typo-data-spacing);
  text-transform: none;
}

.t-verb {
  font-family:    var(--md-ext-typo-verb-family);
  font-weight:    var(--md-ext-typo-verb-weight);
  letter-spacing: var(--md-ext-typo-verb-spacing);
  text-transform: none;
}

.t-prose {
  font-family:    var(--md-ext-typo-prose-family);
  font-weight:    var(--md-ext-typo-prose-weight);
  letter-spacing: var(--md-ext-typo-prose-spacing);
  text-transform: none;
}

/* === Aplicación automática a clases convencionales =====================
 * Para reducir la necesidad de añadir .t-* manualmente, las clases más
 * comunes del demo reciben la categoría correcta por defecto.
 * ====================================================================== */

/* CHROME por defecto */
.eyebrow,
.card-eyebrow,
.swatch,
.controls h4,
.ctrl > label,
.ctrl-toggle > label,
.toggle-group button,
.theme-btn,
section p.meta {
  font-family:    var(--md-ext-typo-chrome-family);
  font-weight:    var(--md-ext-typo-chrome-weight);
  letter-spacing: var(--md-ext-typo-chrome-spacing);
  text-transform: uppercase;
}

/* DATA por defecto */
.card-foot,
.ctrl output,
code.inline,
.lead code,
.btn.is-status,
.btn.is-status * {
  font-family:    var(--md-ext-typo-data-family);
  font-weight:    var(--md-ext-typo-data-weight);
  letter-spacing: var(--md-ext-typo-data-spacing);
  text-transform: none;
}

/* VERB por defecto */
.re-rand,
.btn.is-action,
.btn.is-action *,
.cta {
  font-family:    var(--md-ext-typo-verb-family);
  font-weight:    var(--md-ext-typo-verb-weight);
  letter-spacing: var(--md-ext-typo-verb-spacing);
  text-transform: none;
}

/* PROSE por defecto */
.lead,
.card-body {
  font-family:    var(--md-ext-typo-prose-family);
  font-weight:    var(--md-ext-typo-prose-weight);
  letter-spacing: var(--md-ext-typo-prose-spacing);
}