/* =====================================================================
   TOKENS — Fase 0 do redesign (fonte única de valores visuais).
   Regra do plano: nenhum hex, tamanho ou espaçamento solto fora daqui.
   Tema único escuro (decisão 2026-08-03: o claro volta quando houver
   paleta clara especificada — não se inventa cor).
   ===================================================================== */
:root {
  /* -------- superfícies -------- */
  --bg: #101416;
  --card: #1A1F22;
  --card2: #20262A;
  --bd: #2E3438;
  --bd2: #3C444A;

  /* -------- texto -------- */
  --t1: #F2F5F7;
  --t2: #B9C1C7;
  --t3: #8E979E;   /* SÓ placeholder e desabilitado. Nunca carrega informação. */

  /* -------- status --------
     Elemento pequeno (badge, pill, contador): fundo vivo + texto -on.
     Elemento grande (faixa, banner): fundo -bg sólido + barra 4px na cor viva.
     Proibido rgba/opacidade em fundo ou borda de status. */
  --or: #FFB020;  --or-on: #3D2400;  --or-bg: #2B1F09;   /* laranja: ação e marca */
  --rd: #FF4B47;  --rd-on: #350807;  --rd-t: #FF7B77;  --rd-bg: #2E1211;
  --gr: #35D07F;  --gr-on: #06331B;  --gr-t: #4FDB93;  --gr-bg: #0D2A1C;
  --bl: #6FB3FF;  --bl-on: #062240;  --bl-bg: #10243B;

  /* Complementos vindos do protótipo (vidacor-crm-esboco.html) */
  --or-h: #FFC04A;        /* hover do botão primário */
  --rd-claro: #FFD3D1;    /* texto sobre faixa de erro */
  --or-claro: #FFDDA6;    /* texto sobre faixa de aviso */
  --bl-claro: #C7DFFB;    /* texto sobre faixa de info */
  --rd-campo: #231416;    /* fundo de campo com erro */
  --input: var(--card2);  /* fundo de controle de formulário */

  /* -------- tipografia (piso absoluto 13px; <14px exige peso 500) --------
     Escala subida em 2026-08-04 a pedido do usuário ("aumentar as letras
     para melhor visualização"), junto com o alargamento do conteúdo.
     O piso agora é 14px: nada mais depende do peso 500 para ser legível. */
  --fs-pagina: 28px;   /* título de página, peso 500 */
  --fs-card: 18px;     /* título de card, peso 500 */
  --fs-corpo: 16px;    /* dado, valor, corpo, peso 400 */
  --fs-rotulo: 14px;   /* rótulo de campo, peso 500 */
  --fs-meta: 14px;     /* metadado, header de tabela, peso 500 */
  --peso-titulo: 500;
  --peso-rotulo: 500;
  --lh-corpo: 1.6;
  --lh-titulo: 1.25;

  /* -------- espaçamento (escala de 4) e medidas -------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --pad-card: 18px;
  --gap-cards: 16px;
  --gap-grid: 16px;
  /* 1280 deixava duas faixas vazias nas laterais em monitor grande. 1600 enche
     a tela cheia num monitor comum e ainda impede a tabela de virar uma linha
     interminável num ultrawide. */
  --max-conteudo: 1600px;
  --max-input: 420px;
  /* controles acompanham o texto maior: 16px dentro de 40px ficava apertado */
  --altura-controle: 42px;
  --altura-botao: 40px;
  --alvo-min: 32px;
  --raio-controle: 8px;
  --raio-card: 12px;
  --nav-largura: 232px;
  --trilho-largura: 360px;   /* sobrou largura; documento e atalho respiram */

  /* -------- fontes -------- */
  --font-titles: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ==================================================================
     ALIASES do código existente → tokens novos.
     Migração gradual: as telas trocam para os nomes novos na Fase 4 e
     estes aliases somem no fim. Não usar em código novo.
     ================================================================== */
  --bg-obsidian: var(--bg);
  --bg-card: var(--card);
  --bg-sidebar: var(--card);
  --border-sage: var(--bd);
  --text-white: var(--t1);
  --text-light: var(--t1);
  --text-muted: var(--t2);
  --primary-green: var(--gr);
  --primary-hover: var(--gr-t);
  --accent-amber: var(--or);
  --amber-hover: var(--or);
  --danger-red: var(--rd);
  --info-blue: var(--bl);
  --glass-green: var(--card);
  --fundo-suave: var(--card2);
  --divisoria: var(--bd);
  --shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.5);  /* sombra não é status */
  --border-radius: var(--raio-card);
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* -------- base tipográfica -------- */
::placeholder { color: var(--t3); }
button:disabled, input:disabled, select:disabled, textarea:disabled { color: var(--t3); }

/* -------- ícones: uma família (lucide), stroke 1.75, currentColor --------
   20px na navegação, 16px inline; a cor segue o texto (--t2 por padrão,
   --or só no item ativo da navegação — aplicado pelo shell na Fase 1). */
svg.lucide, [data-lucide] svg, i[data-lucide] { stroke-width: 1.75; }
.sidebar-nav svg, .menu-item svg { width: 20px; height: 20px; }
.btn svg, td svg, .view-actions svg { width: 16px; height: 16px; }