/* ─────────────────────────────────────────────────────────────────────────
 * typography.css — rmorenodotcom type system
 *
 * Two families, strict division of labor:
 *   Coolvetica Rg (display) → wordmark, monogram, the big editorial headlines
 *   Cera Pro (workhorse)    → h1–h6, body, UI, captions — across 6 weights
 *
 * The ramp is token-driven. Each step is a (size, line-height) pair so it can
 * be read from CSS utilities (.t-h1), bare elements (<h1>), or JS. Casing is
 * lowercase-leaning; eyebrows/micro are UPPERCASE + wide tracking; headlines
 * run tight negative tracking; body runs relaxed 1.6 leading.
 *
 * Guards (see base.css) keep big type from clipping: no auto-hyphenation,
 * balanced headline wrapping, and overflow-wrap so long tokens never spill.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* families
   * DISPLAY is now Cera Pro (serious, single-typeface system) — Coolvetica was
   * retired from headlines per brand direction (too retro-pop for the tone).
   * --font-wordmark keeps Coolvetica ALIVE for one job only: the logotype.   */
  --type-family-display: 'Cera Pro', system-ui, sans-serif;
  --type-family-workhorse: 'Cera Pro', system-ui, sans-serif;
  --type-family-mono: 'Cera Pro', 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-wordmark: 'Coolvetica Rg', 'Coolvetica', 'Cera Pro', sans-serif;

  /* weights */
  --type-weight-thin: 200;
  --type-weight-light: 300;
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-semibold: 600;
  --type-weight-bold: 700;
  --type-weight-black: 900;

  /* ── Size + line-height ramp ──────────────────────────────────────────
   * Display steps are fluid (clamp) for hero/editorial use. Heading + body
   * steps are fixed so layouts are predictable; scale them per-context.     */

  /* display — Cera Pro at heavy weight. (--lh-* are unitless line-heights.) */
  --text-hero: clamp(48px, 9vw, 128px);      --lh-hero: 0.92;    /* @kind other */
  --text-display: clamp(40px, 6vw, 88px);    --lh-display: 1.0;  /* @kind other */
  --text-section: clamp(36px, 5vw, 64px);    --lh-section: 1.05; /* @kind other */

  /* headings — Cera Pro */
  --text-h1: 40px;   --lh-h1: 1.1;   /* @kind other */
  --text-h2: 30px;   --lh-h2: 1.18;  /* @kind other */
  --text-h3: 24px;   --lh-h3: 1.28;  /* @kind other */
  --text-h4: 20px;   --lh-h4: 1.35;  /* @kind other */
  --text-h5: 17px;   --lh-h5: 1.4;   /* @kind other */
  --text-h6: 14px;   --lh-h6: 1.45;  /* @kind other */

  /* body — Cera Pro */
  --text-body-lg: 18px;  --lh-body-lg: 1.6;   /* @kind other */
  --text-body: 16px;     --lh-body: 1.6;      /* @kind other */
  --text-body-sm: 14px;  --lh-body-sm: 1.55;  /* @kind other */
  --text-caption: 13px;  --lh-caption: 1.5;   /* @kind other */

  /* labels */
  --text-eyebrow: 12px;
  --text-micro: 11px;

  /* tracking */
  --track-hero: -0.035em;
  --track-display: -0.030em;
  --track-section: -0.025em;
  --track-tight: -0.02em;
  --track-eyebrow: 0.14em;
  --track-micro: 0.1em;

  /* wordmark component tokens */
  --wordmark-family: var(--font-wordmark);
  --wordmark-weight: 400;
  --wordmark-tracking-hero: var(--track-hero);
  --wordmark-tracking-display: var(--track-display);
  --wordmark-tracking-section: var(--track-section);
  --wordmark-tracking-nav: -0.015em;

  /* the dot — ownable proportion: Ø = 0.32 × cap-height of the r */
  --monogram-dot-ratio: 0.32em;
  --wordmark-dot-ratio: 0.18em; /* trailing dot inside the full wordmark */
}

/* ══ Display utilities — Coolvetica ═══════════════════════════════════════ */
.t-hero {
  font-family: var(--type-family-display);
  font-weight: 900;
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--track-hero);
}
.t-display {
  font-family: var(--type-family-display);
  font-weight: 900;
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
.t-section {
  font-family: var(--type-family-display);
  font-weight: 700;
  font-size: var(--text-section);
  line-height: var(--lh-section);
  letter-spacing: var(--track-section);
}

/* ══ Heading utilities — Cera Pro ═════════════════════════════════════════ */
.t-h1 { font-family: var(--type-family-workhorse); font-weight: 700; font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--track-tight); }
.t-h2 { font-family: var(--type-family-workhorse); font-weight: 600; font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: -0.018em; }
.t-h3 { font-family: var(--type-family-workhorse); font-weight: 600; font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: -0.015em; }
.t-h4 { font-family: var(--type-family-workhorse); font-weight: 600; font-size: var(--text-h4); line-height: var(--lh-h4); letter-spacing: -0.01em; }
.t-h5 { font-family: var(--type-family-workhorse); font-weight: 600; font-size: var(--text-h5); line-height: var(--lh-h5); letter-spacing: -0.005em; }
.t-h6 { font-family: var(--type-family-workhorse); font-weight: 700; font-size: var(--text-h6); line-height: var(--lh-h6); letter-spacing: 0; }

/* ══ Body utilities — Cera Pro ════════════════════════════════════════════ */
.t-body-lg { font-family: var(--type-family-workhorse); font-weight: 400; font-size: var(--text-body-lg); line-height: var(--lh-body-lg); }
.t-body    { font-family: var(--type-family-workhorse); font-weight: 400; font-size: var(--text-body); line-height: var(--lh-body); }
.t-body-sm { font-family: var(--type-family-workhorse); font-weight: 400; font-size: var(--text-body-sm); line-height: var(--lh-body-sm); }
.t-caption { font-family: var(--type-family-workhorse); font-weight: 400; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--mute); }

/* ══ Labels ═══════════════════════════════════════════════════════════════ */
.t-eyebrow {
  font-family: var(--type-family-workhorse);
  font-weight: 500;
  font-size: var(--text-eyebrow);
  line-height: 1.2;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
}
.t-micro {
  font-family: var(--type-family-mono);
  font-weight: 600;
  font-size: var(--text-micro);
  line-height: 1.4;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* ══ Bare-element defaults ════════════════════════════════════════════════
 * Sensible defaults so plain <h1>–<h6>/<p> pick up the ramp. Specificity is
 * kept low with :where() so any inline style, utility class, or component
 * override always wins. Headings default to Cera Pro; reach for .t-section/
 * .t-display when you want the Coolvetica editorial voice.                    */
:where(h1) { font-family: var(--type-family-workhorse); font-weight: 700; font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--track-tight); margin: 0; }
:where(h2) { font-family: var(--type-family-workhorse); font-weight: 600; font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: -0.018em; margin: 0; }
:where(h3) { font-family: var(--type-family-workhorse); font-weight: 600; font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: -0.015em; margin: 0; }
:where(h4) { font-family: var(--type-family-workhorse); font-weight: 600; font-size: var(--text-h4); line-height: var(--lh-h4); letter-spacing: -0.01em; margin: 0; }
:where(h5) { font-family: var(--type-family-workhorse); font-weight: 600; font-size: var(--text-h5); line-height: var(--lh-h5); margin: 0; }
:where(h6) { font-family: var(--type-family-workhorse); font-weight: 700; font-size: var(--text-h6); line-height: var(--lh-h6); margin: 0; }
:where(p)  { font-family: var(--type-family-workhorse); font-weight: 400; font-size: var(--text-body); line-height: var(--lh-body); margin: 0; }

/* The live Mexicali clock — tabular figures, never reflows on tick. */
.clock {
  font-family: var(--type-family-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0;
}