:root {
  /* ═══════════════════════════════════════════════════
     NOVOS TOKENS (design system 2026)
     ═══════════════════════════════════════════════════ */

  /* Espaçamento — escala rígida 4/8/12/16/24/32/48/64 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Raio — TRÊS valores, e mais nenhum. Eram cinco (6/8/8/10/12), o que fazia
     input, botão e cartão terem cantos parecidos mas diferentes: o olho lê como
     descuido, não como escala. */
  --raio-sm: 6px;   /* etiqueta, campo, botão */
  --raio:    6px;   /* botão — o mesmo degrau do campo ao lado dele */
  --raio-md: 10px;  /* cartão, painel, tabela */
  --raio-lg: 10px;
  --raio-xl: 14px;  /* contêiner grande */

  /* Tipografia — o que abre a hierarquia é o INTERVALO, não texto menor.
     Decisão do dono em 19/08, corrigindo o próprio brief: ele pedia h2 a 15px,
     o que teria deixado o título de seção MENOR que o corpo. O salto de 32 para
     17 abre a distância do mesmo jeito, e nada encolhe.
     Antes: 24 / 20 / 15 / 13 / 12 — h1 e h2 perto demais, página plana. */
  --fs-display: 32px; --lh-display: 38px; --track-display: -0.021em;
  --fs-h1:      32px; --lh-h1:      37px; --track-h1:      -0.021em;
  --fs-h2:      17px; --lh-h2:      22px; --track-h2:      -0.006em;
  --fs-body:    15px; --lh-body:    22px;
  --fs-label:   12px; --lh-label:   15px; --track-label:   0.06em;
  --fs-metric:  36px; --lh-metric:  36px; --track-metric: -0.02em;
  --fs-caption: 13px; --lh-caption: 18px;

  /* Aliases retrocompatíveis (não remover — 15 views dependem) */
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;

  /* Semânticas (compartilhadas entre temas) */
  --info:    #3B82F6;
  /* PALETA DE PLATAFORMA — ordem FIXA, nunca reciclada.
     EXCEÇÃO ASSUMIDA à regra desta casa de que cor significa ESTADO: aqui cor
     significa PLATAFORMA. A incerteza sai do canal de cor e vira hachura,
     justamente para que os dois eixos — de onde veio, e o quanto sabemos —
     nunca disputem a mesma tinta. Vale nesta tela, não no resto do app.
     Validada contra o fundo escuro: faixa de luminosidade, piso de croma e
     separação para daltonismo em todos os pares. O roxo tem contraste 2,83:1
     e por isso EXIGE rótulo visível — a legenda é o alívio.
     A ordem separa o âmbar do verde de propósito: encostados, são o pior par
     para protanopia. */
  --p-google:    #D97706;
  --p-facebook:  #3B82F6;
  --p-instagram: #DB2777;
  --p-link:      #15803D;
  --p-chatgpt:   #7E22CE;
  --p-nada:      #3F3F46;

  /* Marca WhatsApp — usada SÓ no fluxo de conectar instância, onde o verde é
     marca e não estado. Não use em botão genérico: cor no painel significa
     confiança da atribuição, e um verde solto quebraria essa leitura. */
  --verde:      #10B981;
  --verde-esc:  #059669;

  /* Font stack (Inter carregado via layout; fallback system-ui) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  /* Movimento — uma curva só, e ela desacelera no fim. `ease` puro é o padrão
     do navegador e por isso é o que menos parece escolhido.
     Serve hover de linha, hover de botão, o balão de ajuda e a troca de tema.
     Nada além disso: animação decorativa aqui só faz parecer amador.

     UMA EXCEÇÃO, nomeada em 19/08 pelo dono: o pulso da bolinha `.ponto.on`
     (ver `app.css`). Ela passa porque não é decorativa — o pulso é o que
     separa "estava vivo quando a página carregou" de "está vivo agora", e
     nenhum outro canal diz isso. Toda animação nova precisa passar por essa
     mesma pergunta: que informação ela carrega que a tela parada não carrega? */
  --trans: 140ms cubic-bezier(.2,.6,.3,1);

  /* A ALTURA DA FAIXA DE TOPO, num lugar só.
     Ela vale para DUAS coisas que precisam terminar na mesma linha: a linha do
     grid onde mora a barra de topo, e o bloco do logo na barra lateral. Elas
     eram declaradas separadamente — 56px no grid, e `padding: 20px` mais a
     altura da imagem no logo, o que dava 69px. As duas bordas horizontais
     ficavam 13px fora de esquadro, e o dono viu. */
  --altura-topo: 56px;

  --bord: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════
   TEMA DARK (default do app)
   ═══════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Superfícies em CAMADAS, e elas clareiam conforme sobem.
     Inversão simples é o que denuncia dark mode ruim: o fundo não é preto puro
     (#0A0A0B era quase), o texto não é branco puro, e o campo AFUNDA em vez de
     ficar mais claro que o painel que o contém. */
  --bg-base:     #0E1116;   /* a aplicação */
  --bg-surface:  #161A21;   /* cartão, tabela, painel */
  --bg-afundado: #10141A;   /* campo, área inerte — mais escuro que o painel */
  --bg-elevated: #1D222B;   /* realce: hover de linha e de item de menu */
  --border:      rgba(255,255,255,.07);
  --border-hover:rgba(255,255,255,.13);

  /* Texto */
  --text-primary:   #E8EAED;
  --text-secondary: #9BA3AF;
  /* #6B7280 media 3,61:1 sobre a superfície — reprova o mínimo de 4,5, e é ele
     que pinta o rótulo dos cartões (12px, não conta como texto grande).
     Mesmo defeito que o tema claro tinha; clareado até 4,51:1 no mesmo matiz
     frio. Os dois temas foram medidos no navegador, um a um. */
  --text-tertiary:  #7A8292;

  /* Sombra quase não aparece sobre fundo escuro; quem separa aqui é a borda.
     Por isso as três são mais discretas e a moldura é que carrega a elevação. */
  --sombra-sm: 0 1px 2px rgba(0,0,0,.30);
  --sombra-md: 0 2px 8px rgba(0,0,0,.35);
  --sombra-lg: 0 12px 32px rgba(0,0,0,.45);

  /* Accent = TINTA, não matiz. O botão primário é branco sólido no escuro e
     preto sólido no claro: inconfundível como clicável, e libera o canal de
     cor inteiro pra significar estado. Ver --conf-* abaixo.
     REAFIRMADO em 19/08: o brief da reforma visual pedia o laranja da marca
     aqui, e o dono reverteu o próprio pedido ao ver a colisão — o laranja
     encostaria em `--p-google` (âmbar, plataforma) e `--conf-fallback` (âmbar,
     confiança por horário), três âmbares dizendo três coisas na mesma tela.
     Cor neste produto é DADO; mover cor de dado para acomodar cor de marca
     inverteria a prioridade. */
  --accent:       #E8EAED;
  --accent-fg:    #0E1116;                    /* texto sobre botão accent */
  --accent-muted: rgba(232,234,237,0.10);
  --accent-strong:#FFFFFF;

  /* ── A MARCA, e ela vive só na MOLDURA ───────────────────────
     Regra por zona, decidida em 19/08: laranja manda na moldura (barra lateral
     e topo, que nunca carregam dado), tinta manda no conteúdo. São exatamente
     três usos — trilho do item ativo, fundo do item ativo, e o anel de foco —
     e nenhum outro.
     O anel de foco não compete com o âmbar de dado: ele é transitório, aparece
     um por vez, e só existe quando alguém navega por teclado. */
  --marca:        #FF9333;
  --marca-fraca:  rgba(255,147,51,.14);
  --marca-linha:  rgba(255,147,51,.40);

  /* ── Confiança da atribuição (os 4 estados) ──────────────────
     Cada estado tem uma cor e só uma. Nenhuma delas é a cor de ação. */
  --conf-codigo-fg:   #34D399;  --conf-codigo-bg:   rgba(52,211,153,0.14);
  --conf-manual-fg:   #60A5FA;  --conf-manual-bg:   rgba(96,165,250,0.14);
  --conf-fallback-fg: #FBBF24;  --conf-fallback-bg: rgba(251,191,36,0.14);
  --conf-sem-fg:      #A1A1AA;  --conf-sem-bg:      rgba(161,161,170,0.12);

  /* ── Botões de decisão da fila de comprovantes ───────────────
     EXCEÇÃO ASSUMIDA à regra do accent (decisão do dono, 13/08): nesta tela
     verde CONFIRMA e vermelho DESCARTA. Vale só ali -- tokens próprios, e não
     `--sucesso`/`--critico`, justamente para que a exceção não vaze para o
     resto do app quando alguém mexer nas cores de estado.
     Texto escuro sobre o verde/vermelho claro do tema escuro: branco sobre
     eles mede 2,5:1 e 3,8:1, abaixo do mínimo de 4,5. Assim medem 5,8 e 4,9. */
  --dec-ok-bg:   #10B981;  --dec-ok-fg:   #052E21;
  --dec-no-bg:   #EF4444;  --dec-no-fg:   #2B0707;

  /* Semânticos muted (badges/banners) */
  --danger-muted:  rgba(239,68,68,0.12);
  --warning-muted: rgba(245,158,11,0.12);
  --info-muted:    rgba(59,130,246,0.12);

  /* Semânticos de estado, por tema: sobre fundo escuro eles precisam de mais
     luz para alcançar contraste, e sobre fundo claro de mais profundidade. */
  --sucesso: #35B37E;
  --aviso:   #E0A106;
  --critico: #E5646A;

  /* Aliases retrocompatíveis (views antigas continuam funcionando) */
  --bg:     var(--bg-base);
  --bg-alt: var(--bg-surface);
  --fg:     var(--text-primary);
  --fg-mut: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════
   TEMA LIGHT (mantido, mas dark é o alvo do redesign)
   ═══════════════════════════════════════════════════ */
[data-theme="light"] {
  /* O cinza de fundo puxa levemente para o FRIO. Um #FAFAFA neutro sobre um
     card branco é o começo de qualquer template; a diferença de temperatura é
     o que faz a figura destacar do fundo. */
  --bg-base:     #F6F7F9;
  --bg-surface:  #FFFFFF;
  --bg-afundado: #F1F3F5;
  --bg-elevated: #EEF0F3;
  --border:      rgba(16,20,28,.08);
  --border-hover:rgba(16,20,28,.14);

  --text-primary:   #14181F;
  --text-secondary: #5A6472;
  /* #8B95A3 media 3,03:1 sobre branco -- reprova o mínimo de 4,5 para texto, e
     é justamente ele que pinta o rótulo dos cartões ("CONVERSAS RASTREADAS",
     12px). Escurecido até 4,51:1, mantendo o mesmo matiz frio. Medido no
     navegador, não estimado. */
  --text-tertiary:  #6F7782;

  --sombra-sm: 0 1px 2px rgba(16,20,28,.05);
  --sombra-md: 0 1px 3px rgba(16,20,28,.06), 0 8px 24px -12px rgba(16,20,28,.12);
  --sombra-lg: 0 12px 32px -8px rgba(16,20,28,.18);

  --accent:       #14181F;
  --accent-fg:    #FFFFFF;
  --accent-muted: rgba(20,24,31,0.06);
  --accent-strong:#000000;

  /* O laranja do tema claro precisa ser mais fundo que o do escuro: o #F07E13
     do brief media 2,54:1 sobre o fundo, e um anel de foco é ELEMENTO DE
     INTERFACE — o mínimo dele é 3:1, não os 4,5 de texto. #DA7311 dá 3,04:1 e
     continua o mesmo laranja de marca.
     `--marca-fraca` e `--marca-linha` seguem o tom original: elas são fundo e
     borda, não portadoras de contraste. */
  --marca:        #DA7311;
  --marca-fraca:  rgba(240,126,19,.12);
  --marca-linha:  rgba(240,126,19,.35);

  /* Confiança — mesmos 4 estados, calibrados pro fundo claro (todos ≥ 4.5:1) */
  --conf-codigo-fg:   #047857;  --conf-codigo-bg:   rgba(4,120,87,0.10);
  --conf-manual-fg:   #1D4ED8;  --conf-manual-bg:   rgba(29,78,216,0.10);
  --conf-fallback-fg: #B45309;  --conf-fallback-bg: rgba(180,83,9,0.10);
  --conf-sem-fg:      #52525B;  --conf-sem-bg:      rgba(82,82,91,0.08);

  /* Mesma exceção, calibrada para o fundo claro: aqui o texto é BRANCO, e por
     isso o verde é o #047857 e não o #059669 -- sobre o tom mais claro o branco
     media 3,8:1. Assim medem 5,5 e 4,8. */
  --dec-ok-bg:   #047857;  --dec-ok-fg:   #FFFFFF;
  --dec-no-bg:   #DC2626;  --dec-no-fg:   #FFFFFF;

  --danger-muted:  rgba(239,68,68,0.10);
  --warning-muted: rgba(245,158,11,0.10);
  --info-muted:    rgba(59,130,246,0.10);

  --sucesso: #17784F;
  --aviso:   #B4690E;
  --critico: #B42318;

  --bg:     var(--bg-base);
  --bg-alt: var(--bg-surface);
  --fg:     var(--text-primary);
  --fg-mut: var(--text-secondary);
}