/* Weex Design System — Typography Tokens */
/* Figtree — fonte principal (brand) · todos os pesos 300–900 */
/* DM Sans — fonte secundária · substituta quando Figtree não disponível */
/* Usar stack: 'Figtree', system-ui, sans-serif */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {

  /* ── FONT FAMILIES ── */
  --font-sans: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-brand: 'Figtree', sans-serif;       /* principal — sempre que possível */
  --font-fallback: 'DM Sans', sans-serif;    /* substituta — e-mail, Office, sistemas */
  --font-mono: 'Courier New', monospace;

  /* ════════════════════════════════════════════════════════════════════ */
  /*  SISTEMA DE TIPO — ESTILOS DE TEXTO (a unidade de decisão)            */
  /*                                                                       */
  /*  Não escolha um TAMANHO; escolha um PAPEL. Cada papel é um estilo    */
  /*  fechado: tamanho + peso + entrelinha + tracking. São 9 papéis — a   */
  /*  reconciliação dos ~26 tamanhos que existiam soltos no produto.      */
  /*                                                                       */
  /*  Vizinhos são diferenciados por PESO/COR, nunca por +1px. Onde quiser */
  /*  mais ênfase no mesmo papel, suba o peso (ex.: page-title 700 → 800   */
  /*  no valor de KPI), não invente um tamanho novo.                       */
  /* ════════════════════════════════════════════════════════════════════ */

  /* ── RAMPA PRIMITIVA — valor = px (mesma convenção de --space-*) ──      */
  /*  9 degraus reais. Banda de UI (11–17) linear, para controle fino;     */
  /*  banda de display (20–46) expansiva (~1,25×), para hierarquia/drama.  */
  /*  Use os PAPÉIS abaixo no dia a dia; a rampa é a fonte única deles.    */
  --text-11: 11px;
  --text-13: 13px;
  --text-14: 14px;   /* corpo base */
  --text-15: 15px;
  --text-17: 17px;
  --text-20: 20px;
  --text-24: 24px;
  --text-30: 30px;
  --text-46: 46px;

  /* ── PAPÉIS (a API: consuma estes nos componentes/telas) ──             */
  /*  Cada papel expõe -size / -weight / -leading / -tracking.            */

  /* overline — labels estruturais, TH de tabela, contadores, eyebrows · CAIXA ALTA */
  --text-overline:          var(--text-11);
  --text-overline-weight:   var(--font-bold);     /* 700 */
  --text-overline-leading:  1.3;
  --text-overline-tracking: 0.07em;

  /* caption — metadados, badges, helper, hints, datas */
  --text-caption:          var(--text-13);
  --text-caption-weight:   var(--font-medium);    /* 500 */
  --text-caption-leading:  1.4;
  --text-caption-tracking: 0em;

  /* body — o cavalo de batalha: célula de tabela, descrição, texto secundário */
  --text-body:          var(--text-14);
  --text-body-weight:   var(--font-regular);      /* 400 */
  --text-body-leading:  1.5;
  --text-body-tracking: 0em;

  /* body-strong — inputs, botões, nav, nome em lista · PISO do que se lê para AGIR */
  --text-body-strong:          var(--text-15);
  --text-body-strong-weight:   var(--font-semibold);  /* 600 */
  --text-body-strong-leading:  1.5;
  --text-body-strong-tracking: 0em;

  /* subtitle — título de card, título de modal, nome de pessoa, label de seção */
  --text-subtitle:          var(--text-17);
  --text-subtitle-weight:   var(--font-bold);     /* 700 */
  --text-subtitle-leading:  1.35;
  --text-subtitle-tracking: -0.01em;

  /* title — título de atividade (app), cabeçalho de bloco */
  --text-title:          var(--text-20);
  --text-title-weight:   var(--font-bold);        /* 700 */
  --text-title-leading:  1.25;
  --text-title-tracking: -0.01em;

  /* page-title — H1 do gestor · valor de KPI usa o mesmo tamanho com peso 800 */
  --text-page-title:          var(--text-24);
  --text-page-title-weight:   var(--font-bold);   /* 700 (KPI: 800) */
  --text-page-title-leading:  1.2;
  --text-page-title-tracking: -0.02em;

  /* display — boas-vindas, heros de seção */
  --text-display:          var(--text-30);
  --text-display-weight:   var(--font-extrabold); /* 800 */
  --text-display-leading:  1.1;
  --text-display-tracking: -0.03em;

  /* hero — headline de Login E número-herói (Força / Termômetro / NPS unificados) */
  --text-hero:          var(--text-46);
  --text-hero-weight:   var(--font-extrabold);    /* 800 */
  --text-hero-leading:  1.05;
  --text-hero-tracking: -0.03em;

  /* ── EXCEÇÃO DE MARCA (fora do sistema de papéis) ──                    */
  /*  Wordmark "weex": Figtree itálico, peso 700, tamanho CONTEXTUAL       */
  /*  (~26px em headers, ~64px no Login). É elemento de marca, não corpo   */
  /*  de texto — não tem token de tamanho próprio e não entra na régua.    */

  /* ── PISOS DE ACESSIBILIDADE (WCAG 2.1 AA — 1.4.3 / 1.4.4) ──           */
  /*  O mínimo depende do PAPEL FUNCIONAL, não é único para a interface:   */
  /*   ≥ 15px  AÇÃO       — ler para agir (CTA, label de form, enunciado)  */
  /*   ≥ 14px  CONTEXTO   — contextualiza uma ação (nome, progresso, step) */
  /*   ≥ 13px  ESTRUTURAL — consulta, não leitura contínua (tab, badge)    */
  /*   ≥ 11px  SUPRIMIDO  — info hierarquizada abaixo (futuro/bloqueado)   */
  /*   8px     DECORATIVO — isenção 1.4.3: só iniciais de avatar ≤ 22px    */

  /* ── LINE HEIGHTS ── */
  --leading-tight:  1.2;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  /* ── FONT WEIGHTS ── */
  --font-light:     300;   /* textos longos, captions */
  --font-regular:   400;   /* corpo, parágrafos */
  --font-medium:    500;   /* UI labels, inputs */
  --font-semibold:  600;   /* botões, nav, destaques */
  --font-bold:      700;   /* títulos de página, KPIs */
  --font-extrabold: 800;   /* hero, display, branding */
  --font-black:     900;   /* impacto máximo */

  /* ── LETTER SPACING ── */
  --tracking-tight:   -0.02em;   /* números e headlines grandes */
  --tracking-normal:   0em;
  --tracking-wide:     0.02em;
  --tracking-wider:    0.04em;   /* table headers */
  --tracking-widest:   0.07em;   /* badge/overline uppercase */
}