/* ===================================================================
   PAINEL OPERACIONAL — GRUPO ADEMAR CUNHA
   tokens.css · camada única de tokens do painel inteiro
   (dashboard, fechamentos, saldos, orçamento de compras, metas)

   A marca é VERMELHO + PRETO. Não existe azul em lugar nenhum —
   inclusive foco de teclado, links, trilhos e barra de progresso.
   Verde e âmbar são status semântico, nunca decoração.

   ── TOKENS ANTIGOS QUE MORREM ─────────────────────────────────────
   --color-progress  (azul)  → agora #1A1A1A (preto). "Em progresso"
                               é fato neutro, não cor de marca.
   --color-focus     (azul)  → RETONALIZADO para #C8102E. O nome fica: as
                               telas já migradas o consomem. --focus-ring
                               é o alias novo, com a mesma cor.
   --color-link      (azul)  → REMOVIDO. Link = --ac-red / hover
                               --ac-red-dark.
   --color-info      (azul)  → REMOVIDO. Informação neutra usa
                               --color-progress (preto) sobre
                               --color-progress-soft.
   --color-primary   (azul)  → REMOVIDO. Ação primária = --ac-red.
   --radius-pill             → REMOVIDO. Raio máximo é 3px.
   --shadow-md/-lg           → REMOVIDOS. Estrutura vem de filete e
                               zebra, não de elevação. Só sobrevive
                               --shadow-card (sussurro) e
                               --shadow-savebar.
   ── COMPATIBILIDADE ───────────────────────────────────────────────
   Nenhum nome de token é apagado: as telas já migradas (Conferência
   de caixa, Compras, Visão geral) consomem a família --color-* de
   texto, superfície e filete. Aqui ela é ALIAS da escala --ac-*, e
   não uma segunda paleta — um hexadecimal, um lugar.

   As fontes vêm do próprio painel, nunca da Google: a CSP destas
   telas é `style-src 'self'; font-src 'self'`, e um @import para
   fonts.googleapis.com é bloqueado pelo navegador — a tela abriria
   em Georgia/system-ui sem avisar.
   =================================================================== */
@import url('/painel/vendor/fontes.css');

:root {
  /* ---------- Marca ---------- */
  --ac-red:            #C8102E;  /* acento, ação primária, dado principal */
  --ac-red-dark:       #8B0B1F;  /* profundidade, hover, mês corrente */
  --ac-red-soft:       #FEF2F2;  /* tint de aviso / insight */
  --ac-red-soft-2:     #F5DADE;  /* tint de trilho */

  /* ---------- Neutros estruturais ---------- */
  --ac-black:          #1A1A1A;  /* texto, cabeçalho de tabela, filete forte */
  --ac-white:          #FFFFFF;  /* cartão, papel */
  --ac-surface:        #F5F5F5;  /* canvas do painel, zebra */
  --ac-surface-alt:    #FAFAFA;  /* célula âncora, estado vazio */

  /* ---------- Escala de texto ---------- */
  --ac-text:           #1A1A1A;
  --ac-text-secondary: #3D3D3D;
  --ac-text-muted:     #6B6B6B;
  --ac-text-faint:     #8A8A8A;
  --ac-text-fainter:   #9A9A9A;

  /* ---------- Filetes ---------- */
  --ac-border:         #E5E5E5;
  --ac-border-soft:    #EEEEEE;
  --ac-border-dashed:  #C9C9C9;

  /* ---------- Status semântico (nomes fixos, todos AA) ---------- */
  --color-ok:          #0E5F36;  /* meta com folga (≥120%) / conferido */
  --color-onpace:      #437F17;  /* meta batida (100–119%) */
  --color-attention:   #96590A;  /* RESSALVA DE DADO — fora da escala de % */
  --color-failure:     #C8102E;  /* abaixo da meta (<100%) / rotina falhou */
  --color-progress:    #1A1A1A;  /* fato neutro executado por script */
  --color-inert:       #6F6F6F;  /* sem dado, fora do período */

  --color-ok-soft:        #EAF4EE;
  --color-onpace-soft:    #F4F8EC;
  --color-attention-soft: #FDF3E2;
  --color-failure-soft:   #FEF2F2;
  --color-progress-soft:  #F0F0F0;
  --color-inert-soft:     #F5F5F5;

  /* Glifo por estado — o estado sobrevive em P&B sem a cor */
  --glyph-ok:        '\25B2';  /* ▲ */
  --glyph-onpace:    '\25B3';  /* △ */
  --glyph-attention: '\25C6';  /* ◆ */
  --glyph-failure:   '\2715';  /* ✕ */
  --glyph-progress:  '\25CF';  /* ● */
  --glyph-inert:     '\2013';  /* – */

  /* Escala de % da meta — 3 níveis. Âmbar NÃO entra aqui. */
  --scale-under:  var(--color-failure);   /* <100%     */
  --scale-hit:    var(--color-onpace);    /* 100–119%  */
  --scale-over:   var(--color-ok);        /* ≥120%     */

  /* ---------- Cinzas de gráfico / rampa de calor ---------- */
  --ac-chart-gray:   #B0B0B0;
  --ac-chart-gray-2: #CFCFCF;
  --ac-chart-gray-3: #E2E2E2;
  --ac-heat-1: #FADDE2;
  --ac-heat-2: #F0A9B4;
  --ac-heat-3: #DE5E72;
  --ac-heat-4: #C8102E;
  --ac-heat-empty: #F0F0F0;

  /* ---------- Tipografia ---------- */
  --font-display: 'Zilla Slab', Georgia, serif;      /* títulos, eyebrows, rótulos — NUNCA números */
  --font-body:    'Source Sans 3', system-ui, sans-serif; /* corpo, tabela, campo, TODOS os números */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --fs-display-xl: 54px;
  --fs-display-lg: 42px;
  --fs-display-md: 26px;
  --fs-card-title: 18px;
  --fs-eyebrow:  13px;
  --ls-eyebrow:  0.16em;
  --fs-lead:  15px;
  --fs-body:  14px;
  --fs-table: 13px;
  --fs-small: 12px;
  --fs-micro: 11px;
  --fs-kpi:        36px;
  --fs-kpi-anchor: 28px;
  --ls-kpi:  -0.025em;
  --ls-label: 0.08em;
  --tt-label: uppercase;
  --lh-tight: 1.0;
  --lh-snug:  1.45;
  --lh-body:  1.6;
  --num-features: tabular-nums lining-nums;

  /* ---------- Espaçamento ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 14px; --sp-4: 18px;
  --sp-5: 22px; --sp-6: 28px; --sp-7: 34px; --sp-8: 48px;
  --pad-card-y: 20px;
  --pad-card-x: 22px;

  /* ---------- Raio (nunca pill) ---------- */
  --radius-sm: 2px;
  --radius-md: 3px;

  /* ---------- Filetes ---------- */
  --bw-hairline: 1px;
  --bw-rule:     2px;
  --bw-accent:   3px;
  --bw-cover:   10px;
  --rule-width: 38px;

  /* ---------- Sombra ---------- */
  --shadow-card:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-savebar: 0 -2px 8px rgba(0,0,0,0.07);

  /* ---------- Aliases --color-* (contrato das telas já migradas) ----
     Mesmo valor, outro nome. Trocar a escala --ac-* acima reflete em
     todas as telas do painel de uma vez. */
  --color-brand:          var(--ac-red);
  --color-brand-deep:     var(--ac-red-dark);
  --color-ink:            var(--ac-text);
  --color-ink-body:       var(--ac-text-secondary);
  --color-ink-muted:      var(--ac-text-muted);
  --color-ink-faint:      var(--ac-text-faint);
  --color-ink-fainter:    var(--ac-text-fainter);
  --color-surface:        var(--ac-white);
  --color-surface-raised: var(--ac-white);
  --color-surface-soft:   var(--ac-surface-alt);
  --color-surface-zebra:  var(--ac-surface);
  --color-line:           var(--ac-border);
  --color-line-soft:      var(--ac-border-soft);
  --color-line-dashed:    var(--ac-border-dashed);
  --color-on-strong:      var(--ac-white);

  /* Impressão: no papel o filete precisa de mais contraste que o da
     tela, e a célula vazia de um cinza que a impressora não lave. */
  --color-line-print:     #BFBFBF;
  --color-surface-print:  #F2F2F2;

  /* ---------- Foco de teclado (vermelho/preto, nunca azul) ---------- */
  --color-focus:      var(--ac-red);
  --focus-ring:       var(--color-focus);
  --focus-ring-width: 2px;
  --focus-ring-offset: 1px;

  /* ---------- Larguras de shell ---------- */
  --shell-side:  232px;
  --shell-top:   60px;
  --page-max:    1440px;
}

/* Foco visível global do painel — vermelho sobre branco, preto sobre
   fundo vermelho. Nenhum outline azul do agente do usuário. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.btn.pri:focus-visible,
[data-on-red]:focus-visible { outline-color: var(--ac-black); }