/*
 * ============================================================
 * TIRZEAPP — SISTEMA TIPOGRÁFICO
 * ============================================================
 * Mobile-first. Escala de fonte por breakpoint via :root.
 * Overflow-wrap e word-break em todos os elementos de texto.
 * Nenhum tamanho fixo abaixo de 11px (legibilidade mínima).
 *
 * Lógica de peso:
 * - Quanto maior o título → mais light o peso
 * - Labels/metadados → semibold + uppercase + tracking positivo
 * - Corpo → regular, tracking neutro
 * ============================================================
 */

/* ─────────────────────────────────────────────
 * ESCALA TIPOGRÁFICA — mobile-first via :root
 * Sobrescreve tokens para cada breakpoint.
 * ─────────────────────────────────────────── */

/* Base: 375px */
:root {
  --fs-hero:    clamp(40px, 10vw, 96px);
  --fs-display: clamp(36px, 9vw, 80px);
  --fs-h1:      clamp(34px, 8.5vw, 62px);
  --fs-h2:      clamp(26px, 6vw, 38px);
  --fs-h3:      clamp(22px, 5vw, 30px);
  --fs-h4:      clamp(18px, 4vw, 24px);
  --fs-h5:      clamp(16px, 3vw, 20px);
  --fs-h6:      clamp(15px, 2.5vw, 17px);
  --fs-body-lg: clamp(15px, 2.5vw, 17px);
  --fs-body:    15px;
  --fs-body-sm: 13px;
  --fs-label:   11px;
  --fs-overline: 10px;
}

/* ════════════════════════════════════════════
   DISPLAY / HERO
   ════════════════════════════════════════════ */

.type-hero {
  font-family: var(--font-family-base);
  font-size: var(--fs-hero);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-hero-title, 1.06);
  letter-spacing: -0.04em;
  color: var(--color-text-heading);
  overflow-wrap: break-word;
  word-break: normal;
}

.type-display {
  font-family: var(--font-family-base);
  font-size: var(--fs-display);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-hero-title, 1.06);
  letter-spacing: -0.04em;
  color: var(--color-text-heading);
  overflow-wrap: break-word;
  word-break: normal;
}

/* ════════════════════════════════════════════
   HEADINGS
   ════════════════════════════════════════════ */

.type-h1,
h1 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h1);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-hero-title, 1.06);
  letter-spacing: -0.03em;
  color: var(--color-text-heading);
  overflow-wrap: break-word;
  word-break: normal;
}

.type-h2,
h2 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-snug);
  letter-spacing: -0.02em;
  color: var(--color-text-heading);
  overflow-wrap: break-word;
  word-break: normal;
}

.type-h3,
h3 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  overflow-wrap: break-word;
}

.type-h4,
h4 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-sub);
  overflow-wrap: break-word;
}

.type-h5,
h5 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-sub);
  overflow-wrap: break-word;
}

.type-h6,
h6 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h6);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-sub);
  overflow-wrap: break-word;
}

/* ════════════════════════════════════════════
   CORPO
   ════════════════════════════════════════════ */

.type-body-lg {
  font-size: var(--fs-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}

.type-body,
p {
  font-size: var(--fs-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-support);
  overflow-wrap: break-word;
}

.type-body-sm {
  font-size: var(--fs-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}

/* ════════════════════════════════════════════
   LABELS / METADADOS
   Uppercase. Tracking positivo. Nunca abaixo de 10px.
   ════════════════════════════════════════════ */

.type-label {
  font-size: var(--fs-label);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}

.type-label-lg {
  font-size: var(--fs-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}

.type-overline {
  font-size: var(--fs-overline);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  overflow-wrap: break-word;
}

/* ════════════════════════════════════════════
   MONO / DADOS
   ════════════════════════════════════════════ */

.type-mono {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: var(--fs-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}

.type-data {
  font-family: var(--font-family-base);
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  overflow-wrap: break-word;
}

/* ════════════════════════════════════════════
   UTILIDADES TIPOGRÁFICAS
   ════════════════════════════════════════════ */

.text-primary    { color: var(--color-text-primary); }
.text-sub        { color: var(--color-text-sub); }
.text-secondary  { color: var(--color-text-secondary); }
.text-tertiary   { color: var(--color-text-tertiary); }
.text-support    { color: var(--color-text-support); }
.text-disabled   { color: var(--color-text-disabled); }

.text-light      { font-weight: var(--font-weight-light); }
.text-regular    { font-weight: var(--font-weight-regular); }
.text-medium     { font-weight: var(--font-weight-medium); }
.text-semibold   { font-weight: var(--font-weight-semibold); }
.text-bold       { font-weight: var(--font-weight-bold); }

.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-label   { letter-spacing: 0.10em; }

/* Divisor tipográfico inline */
.type-divider {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--color-border-default);
  vertical-align: middle;
  margin: 0 var(--space-2);
  flex-shrink: 0;
}