/* ============================================================
   CRAQUE CIDADÃO — TYPOGRAPHY TOKENS
   Display: Archivo (athletic grotesque, heavy weights for impact)
   Body:    Mulish (warm humanist sans, highly legible)
   ============================================================ */
:root {
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body:    'Mulish', system-ui, -apple-system, sans-serif;

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

  /* Type scale (rem, 16px base) */
  --fs-display: 4.5rem;   /* 72 — hero numerals / huge statements */
  --fs-h1: 3rem;          /* 48 */
  --fs-h2: 2.25rem;       /* 36 */
  --fs-h3: 1.625rem;      /* 26 */
  --fs-h4: 1.25rem;       /* 20 */
  --fs-lead: 1.25rem;     /* 20 — intro paragraph */
  --fs-body: 1rem;        /* 16 */
  --fs-sm: 0.875rem;      /* 14 */
  --fs-xs: 0.75rem;       /* 12 — labels, eyebrows */

  /* Line heights */
  --lh-tight: 1.04; /* @kind other */
  --lh-snug: 1.18; /* @kind other */
  --lh-body: 1.6; /* @kind other */

  /* Letter spacing */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-eyebrow: 0.14em; /* @kind other */
}

/* ---- Helper classes (optional, semantic primitives) ---- */
.cc-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}
.cc-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--brand-ink);
}
.cc-h1 { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--brand-ink); }
.cc-h2 { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--brand-ink); }
.cc-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--brand-ink); }
.cc-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-body); }
.cc-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }