/* ============================================================
   TANGRAM · TYPOGRAPHY
   Display: Clash Display (geometric, confident, headlines)
   Text:    Poppins (rounded-geometric, friendly, body & UI)
   ============================================================ */

:root {
  --tg-font-display: "Clash Display", "Poppins", system-ui, sans-serif;
  --tg-font-text: "Poppins", system-ui, -apple-system, sans-serif;

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

  /* Type scale — fluid-friendly fixed steps (px) */
  --tg-text-xs: 12px;
  --tg-text-sm: 14px;
  --tg-text-base: 16px;
  --tg-text-md: 18px;
  --tg-text-lg: 22px;
  --tg-text-xl: 28px;
  --tg-display-sm: 36px;
  --tg-display-md: 48px;
  --tg-display-lg: 64px;
  --tg-display-xl: 88px;

  /* Line heights */
  --tg-leading-tight: 1.04;
  --tg-leading-snug: 1.18;
  --tg-leading-normal: 1.5;
  --tg-leading-relaxed: 1.65;

  /* Letter spacing */
  --tg-tracking-tight: -0.02em;
  --tg-tracking-normal: 0;
  --tg-tracking-wide: 0.04em;
  --tg-tracking-caps: 0.14em; /* uppercase eyebrows / tagline */
}

/* ---- Optional helper classes (consumers may use directly) ---- */
.tg-display {
  font-family: var(--tg-font-display);
  font-weight: var(--tg-fw-medium); /* Clash titles: medium (500), CAIXA ALTA */
  text-transform: uppercase;
  line-height: var(--tg-leading-tight);
  letter-spacing: -0.005em;
  color: var(--tg-text);
}
/* Highlight words inside a Clash title go semibold (600) */
.tg-display b,
.tg-display strong,
.tg-display .tg-em {
  font-weight: var(--tg-fw-semibold);
}
.tg-eyebrow {
  font-family: var(--tg-font-text);
  font-weight: var(--tg-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-caps);
  font-size: var(--tg-text-sm);
  color: var(--tg-primary);
}
.tg-body {
  font-family: var(--tg-font-text);
  font-weight: var(--tg-fw-regular);
  font-size: var(--tg-text-base);
  line-height: var(--tg-leading-relaxed);
  color: var(--tg-text);
}

/* ============================================================
   LEGIBILITY RULE — Clash Display is a DISPLAY face only.
   Use Clash for large headlines (H1 / hero / big numbers).
   For everything small — body copy, text inside boxes/cards,
   chips, labels, captions, and ALL app/UI text — use Poppins.
   Clash loses legibility below headline sizes, so anything that
   isn't a large heading defaults to var(--tg-font-text).
   ============================================================ */
.tg-box,
.tg-ui,
.tg-caption,
.tg-label {
  font-family: var(--tg-font-text);
}