/* ============================================================
   tokens.css — CAMADA 1 (comum a todas as entidades)
   Neutros, estados, raios, tipografia, dimensões.
   Valores extraídos sem alteração do tema-base.css original
   (canónico: frontend/crm/index.html do CRM MEM).

   NÃO contém cores de marca. Essas vivem na camada 3
   (marca-<entidade>.css), que define as variáveis --brand-*
   e --surface-dark. Ver marca-exemplo-mem.css.

   Fonte: Outfit (ficheiro /fonts/outfit.css, a incluir à parte
   no <head> de cada página). Se não estiver presente, o
   fallback é Segoe UI / system-ui.

   Alterações face ao tema-base.css original:
   - --g200 removido (duplicado exato de --g300).
   - Cores hardcoded dos componentes passam a usar estas variáveis.
   - Acrescentadas variáveis para fundos/tintas de estado já
     usadas nos badges (--ok-*, --warn-*, --danger-*, --neutral-*).
   - Acrescentados raios (--radius-*), que estavam repetidos
     como 4px / 8px / 20px nos componentes.
   - Espaçamento: no original era ad hoc (4, 5, 6, 8, 10, 12, 14,
     16, 20px) e NÃO foi convertido em escala, para não alterar
     o aspeto. Decisão por tomar: definir escala de espaçamento.
   ============================================================ */

:root {
  /* ── Neutros ── */
  --g900: #1E2D32;
  --g700: #4A6370;
  --g500: #8FA3AB;
  --g300: #D8E6E9;
  --g100: #F8FAFB;
  --w:    #FFFFFF;

  /* ── Estados (cor principal) ── */
  --done:   #2E7D52;
  --warn:   #8C5E00;
  --danger: #8C2020;
  --alert:  #F59E0B;   /* ponto de alerta (animado) */

  /* ── Estados (fundo + tinta para badges e avisos) ── */
  --ok-bg:       #E6F4EC;  --ok-ink:     #1B5E3B;
  --warn-bg:     #FFF3D6;  --warn-ink:   #6B4500;
  --danger-bg:   #FDEAEA;  --danger-ink: #7A1A1A;
  --neutral-bg:  #E8EEF0;  --neutral-ink: #4A6370;

  /* ── Tipografia ── */
  --font: 'Outfit', 'Segoe UI', system-ui, sans-serif;

  /* ── Raios ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 20px;

  /* ── Dimensões de layout ── */
  --sidebar-w: 220px;
}