/* ============================================================================
   u66-tokens.css — fonte única do sistema visual Urban66
   ============================================================================

   COMO USAR
   Este arquivo define APENAS os tokens canônicos `--u66-*`. Ele não estiliza
   nada e não sabe o que é um card ou um KPI. Cada painel continua com o seu
   `<style>`, mas o `:root` de lá passa a DERIVAR daqui:

       :root{ --gold:var(--u66-brand); --bg:var(--u66-bg); }        <- Controle
       :root{ --brand:var(--u66-brand); --amber:var(--u66-warn); }  <- Performance
       :root{ --amber:var(--u66-brand); --ink:var(--u66-bg); }      <- Central

   Por que não um alias global para cada nome antigo: `--amber` é a cor da MARCA
   na Central e a cor de ALERTA em Performance/Financeiro. Um arquivo comum não
   pode dar dois valores ao mesmo nome — quem resolve a ambiguidade é o `:root`
   de cada painel, que sabe o que aquele nome significa ali.

   ONDE ELE VIVE
   Precisa ser COPIADO para cada build, não servido de um domínio central: a CSP
   usa `style-src 'self'` e cada painel é um projeto Cloudflare Pages com domínio
   próprio (`gerar_dashboard_franquia.py` faz a cópia, ao lado da do logo).

   Carregue ANTES do <style> da página — assim o `:root` local vence em caso de
   sobreposição, que é o comportamento desejado.
   ========================================================================== */

:root{
  /* ── MARCA ────────────────────────────────────────────────────────────────
     O amarelo é acento, nunca fundo de área grande: em bloco ele grita e
     compete com o dado, que é o que a pessoa veio ler. Aparece na pílula do
     logo, no item ativo do menu e em número que precisa de destaque.        */
  --u66-brand:      #F5B800;
  --u66-brand-d:    #C49200;   /* hover/pressed sobre a marca                */
  --u66-brand-dim:  #3E3107;   /* fundo de badge — marca a 12% sobre o preto */
  --u66-brand-glow: rgba(245,184,0,.12);

  /* ── SUPERFÍCIES ──────────────────────────────────────────────────────────
     Escala fria de cinco degraus, herdada da Central. O azulado é sutil (o
     canal B fica ~7 pontos acima do R) e é o que dá temperatura própria — um
     cinza neutro puro é o default de todo dashboard escuro que existe.
     Os degraus existem para hierarquia: página < card < card elevado.       */
  --u66-bg:         #090B11;   /* fundo da página                            */
  --u66-bg-alt:     #0E1119;   /* header, sidebar, barras fixas              */
  --u66-surface:    #141926;   /* card                                       */
  --u66-raised:     #1B2130;   /* card elevado, hover, linha destacada       */
  --u66-line:       #1F2735;   /* borda padrão                               */
  --u66-line-2:     #2A3447;   /* borda de ênfase, divisor forte             */

  /* ── TEXTO ────────────────────────────────────────────────────────────────
     Três níveis bastam; mais que isso vira decisão sem critério. Os valores
     foram CALCULADOS contra a superfície mais clara (--u66-raised), que é o
     pior caso — não herdados a olho. Contraste medido (raised → bg):

       text   13,8 – 16,9 : 1   AA e AAA, qualquer tamanho
       muted   5,0 –  6,1 : 1   AA em texto normal
       dim     3,6 –  4,4 : 1   AA só em texto GRANDE (≥18,66px ou ≥14px bold)

     A escala original da Central tinha --dim em #525C70 = 2,4:1 sobre raised,
     abaixo do mínimo de 3:1 para qualquer texto. Foi clareada.               */
  --u66-text:       #EAEEF6;   /* conteúdo                                   */
  --u66-muted:      #868FA2;   /* rótulo, legenda, apoio                     */
  --u66-dim:        #6B7892;   /* metadado, placeholder, texto grande de      */
                               /* apoio — nunca informação que precise ser    */
                               /* lida para tomar decisão                     */

  /* ── SEMÂNTICA ────────────────────────────────────────────────────────────
     Estas cores CARREGAM SIGNIFICADO e não são intercambiáveis com a marca.
     --u66-warn é âmbar de ALERTA e é deliberadamente diferente do amarelo da
     marca: se fossem iguais, "em dia" e "atenção" ficariam indistinguíveis.  */
  --u66-ok:         #34D399;   /* quitado, em dia, meta atingida             */
  --u66-bad:        #F87171;   /* vencido, inadimplente, erro                */
  --u66-warn:       #FBBF24;   /* a vencer, atenção, divergência a conferir  */
  --u66-info:       #60A5FA;   /* neutro informativo, sugestão do sistema    */

  /* ── TIPOGRAFIA ───────────────────────────────────────────────────────────
     Três papéis, cada um com uma função clara. Declarar não carrega a fonte:
     o <link> do Google Fonts da página precisa trazer as três famílias.      */
  --u66-font-display: 'Saira Condensed', 'Inter', -apple-system, sans-serif;
  --u66-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --u66-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── RITMO ────────────────────────────────────────────────────────────────
     Escala de espaçamento em múltiplos de 4. O raio acompanha o tamanho do
     objeto: chip < botão < card.                                            */
  --u66-r-sm:  7px;
  --u66-r:     10px;
  --u66-r-lg:  14px;
}

/* Número em tabela ou KPI usa tabular-nums: sem isso as colunas de dinheiro
   dançam a cada dígito e a comparação vertical — o motivo de existir a coluna
   — deixa de funcionar. */
.u66-num{
  font-family: var(--u66-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Quem pediu para reduzir movimento leva a sério. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}