/*
 * Conta Grana — Typography tokens
 * Display = Montserrat (700–900, tight tracking). Body = Inter (300–600, airy).
 * Roles are fixed: never swap Montserrat for body or Inter for headlines.
 */

:root {

  /* ── Families ────────────────────────────── */
  --font-logo:    'Presicav', sans-serif;   /* Wordmark only */
  --font-display: 'Montserrat', sans-serif; /* Headlines, titles, numbers */
  --font-body:    'Inter', sans-serif;      /* Body, UI, labels, data */
  --font-mono:    'SF Mono', ui-monospace, Menlo, monospace;

  /* ── Display scale (Montserrat) ──────────── */
  --text-hero: clamp(52px, 7vw, 88px);
  --text-h1:   clamp(28px, 3.5vw, 42px);
  --text-h2:   24px;
  --text-h3:   18px;

  /* ── Body scale (Inter) ──────────────────── */
  --text-lead:    17px;
  --text-base:    15px;
  --text-sm:      13px;
  --text-xs:      12px;
  --text-eyebrow: 11px;

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

  /* ── Tracking (letter-spacing) ───────────── */
  --track-hero:    -3px;   /* @kind font */
  --track-h1:      -1px;   /* @kind font */
  --track-h2:      -0.5px; /* @kind font */
  --track-number:  -0.3px; /* @kind font */
  --track-eyebrow: 2.5px;  /* @kind font */
  --track-tag:     1.5px;  /* @kind font */

  /* ── Line height ─────────────────────────── */
  --lh-display: 1.05; /* @kind font */
  --lh-title:   1.15; /* @kind font */
  --lh-lead:    1.7;  /* @kind font */
  --lh-body:    1.75; /* @kind font */

}

/* ─────────────────────────────────────────────
 * Semantic type classes — convenience for specimens & static HTML.
 * Components reference the tokens directly via inline styles.
 * ───────────────────────────────────────────── */
.cg-hero {
  font-family: var(--font-display); font-size: var(--text-hero);
  font-weight: var(--fw-black); line-height: var(--lh-display);
  letter-spacing: var(--track-hero);
}
.cg-h1 {
  font-family: var(--font-display); font-size: var(--text-h1);
  font-weight: var(--fw-extrabold); line-height: var(--lh-title);
  letter-spacing: var(--track-h1);
}
.cg-h2 {
  font-family: var(--font-display); font-size: var(--text-h2);
  font-weight: var(--fw-bold); line-height: var(--lh-title);
}
.cg-h3 {
  font-family: var(--font-display); font-size: var(--text-h3);
  font-weight: var(--fw-bold); line-height: var(--lh-title);
}
.cg-lead {
  font-family: var(--font-body); font-size: var(--text-lead);
  font-weight: var(--fw-light); line-height: var(--lh-lead);
}
.cg-body {
  font-family: var(--font-body); font-size: var(--text-base);
  font-weight: var(--fw-regular); line-height: var(--lh-body);
}
.cg-caption {
  font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: var(--fw-medium); line-height: 1.5; letter-spacing: 0.3px;
}
.cg-eyebrow {
  font-family: var(--font-body); font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.cg-gradient-text {
  background: var(--cg-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}