/* ============================================================
   NPG WorkFlow — design tokens (fonte unica)
   ============================================================
   Servido de public/, ou seja no mesmo URL (/npg-tokens.css) para
   os tres consumidores:
     - a SPA (index.html carrega-o antes do bundle do Vite);
     - public/npg-rh/       (Turnos & Aprovacao + Reunioes);
     - public/crm-investimento/.

   As duas ultimas sao HTML servido tal e qual pelo nginx, fora do
   build -- nao conseguem importar de src/. Um ficheiro em public/
   e o unico sitio que as tres alcancam sem duplicar valores.
   (P2 item 21 da auditoria de engenharia de 2026-08.)

   Antes disto havia tres paletas com os MESMOS nomes e valores
   DIFERENTES: --danger era #e11d48 na SPA e #ef4444 no RH, e o RH
   era escuro (--bg:#0f1115) dentro de um shell claro. Ao alterar
   um valor aqui, ele muda nos tres sitios -- e essa a intencao.

   NAO acrescentar tokens novos so para um consumidor: se so uma
   pagina precisa de uma cor, ela que a declare no seu proprio CSS.
   ============================================================ */

:root {
  /* ── Marca ─────────────────────────────────────────────── */
  --brand:       #f20530;
  --brand-hover: #d5556c;
  --brand-deep:  #c0034c;   /* fim do gradiente; hero do CRM Investimento */
  --brand-light: #fff1f2;
  --brand-ring:  rgba(242, 5, 48, .15);
  --brand-grad:  linear-gradient(135deg, #f20530, #c0034c);
  --ink:         #000000;   /* preto da marca: barra lateral, barras de topo */

  /* ── Superficies ───────────────────────────────────────── */
  --bg:        #f8fafc;
  --surface:   #ffffff;
  --surface-2: #f1f5f9;     /* cabecalhos de tabela, campos, chips */
  --surface-3: #e2e8f0;     /* estado premido/realce sobre --surface-2 */
  --border:    #e2e8f0;
  --border-2:  #cbd5e1;     /* contorno mais marcado (hover, tracejados) */

  /* ── Texto ─────────────────────────────────────────────── */
  --text:   #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;

  /* ── Barras pretas (lateral da SPA, topo das apps embebidas) ──
     Texto proprio: sobre --ink, --text-2 nao tem contraste. */
  --sb-w:           260px;
  --tb-h:           64px;
  --sb-bg:          #000000;
  --sb-text:        #94a3b8;
  --sb-hover:       rgba(255, 255, 255, .08);
  --sb-active:      rgba(225, 29, 72, .15);
  --sb-active-text: #ffffff;
  --sb-border:      #000000;

  /* ── Estados ───────────────────────────────────────────── */
  --success: #10b981; --success-bg: #ecfdf5; --success-border: #a7f3d0;
  --warning: #f59e0b; --warning-bg: #fffbeb; --warning-border: #fde68a;
  --danger:  #e11d48; --danger-bg:  #fef2f2; --danger-border:  #fecaca;
  --info:    #3b82f6; --info-bg:    #eff6ff; --info-border:    #bfdbfe;

  /* ── Forma ─────────────────────────────────────────────── */
  --radius:      10px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ── Sombras ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow:    0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);

  /* ── Tipografia ────────────────────────────────────────── */
  /* O Inter vem do Google Fonts no style.css da SPA. No kiosk, sem
     internet, cai no system-ui -- e sempre foi assim. */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
}