/* ══════════════════════════════════════════════════════════════════════════
   petina-tokens.css — a fonte unica de cor, espaco, raio e tempo do produto.

   Ate 22/09/2026 cada uma das 12 telas carregava a sua PROPRIA copia do bloco
   de tokens. Mudar o teal exigia doze edicoes iguais, e na pratica ninguem
   fazia as doze: o dashboard andava e o pro.html ficava na paleta do mes
   passado. Este arquivo existe pra que exista UM lugar.

   O que mora aqui: token (custom property) e primitiva que vale pra tela
   inteira (foco, rolagem, movimento reduzido).

   O que NAO mora aqui: classe de componente. `tests_refs_front.py` exige que
   toda classe usada em `class="..."` esteja num <style> DO PROPRIO arquivo —
   classe que vier pra ca fica invisivel pro teste e quebra o gate.

   Ordem de carga: este arquivo entra por <link> ANTES do <style> inline. Com
   especificidade igual o inline vence, entao a tela ainda pode sobrescrever
   um token sem tocar aqui.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── MARCA — nao muda com tema ─────────────────────────────────────────────
   O teal e a identidade. O ciano #22D3EE e o MESMO teal com mais brilho, pra
   hover, foco e serie de grafico sobre fundo escuro; nao e uma segunda cor.
   O violeta ja era usado no produto (upgrades, moderacoes, etiquetas) e fica
   como acento RARO — se ele aparecer em tudo, deixa de destacar qualquer
   coisa. */
:root {
  --petina-teal:   #00B5A8;
  --petina-cyan:   #2EDCD0;
  --petina-bright: #22D3EE;
  --petina-dark:   #005F6B;
  --petina-petrol: #006B73;
  --petina-violet: #8B5CF6;

  /* Escala de espaco (4px). Valor fora dela e sintoma de layout torto, nao
     de necessidade — quando bater a vontade, revisar a grade antes. */
  --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. O painel e analitico: cartao muito arredondado rouba area util e
     desalinha o olho entre cartoes vizinhos. */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* Tempo. Nada acima de 250ms: a tela e de uso diario e transicao longa
     em ferramenta de trabalho vira espera. */
  --t-fast: 150ms; --t-base: 200ms; --t-slow: 250ms;
}

/* ── TEMA ESCURO — o padrao do produto desde 22/09/2026 ────────────────────
   Superficie neutra (nao teal): num painel de dado, a cor tem de sobrar pro
   DADO. Fundo colorido gasta o contraste que os numeros precisam.

   #0A0E14 pagina · #111827 cartao · #182233 elevado (menu, modal, tooltip).
   Tres planos bastam; o quarto ninguem distingue. */
:root, [data-theme="dark"] {
  --bg:            #0A0E14;
  --bg2:           #111827;
  --bg3:           #0A0E14;
  --card-bg:       #111827;
  --surface:       #111827;
  --elevated:      #182233;
  --header-bg:     #111827;
  --tab-bg:        #111827;

  --text:          #F3F6FC;
  --muted:         #A8B3C7;
  --logo-text:     #FFFFFF;
  --logo-grupo:    #A8B3C7;

  --accent:        #2EDCD0;
  --accent2:       #22D3EE;
  --th-color:      #2EDCD0;

  --border:        #263244;
  --border2:       #35455C;
  --petina-border: #263244;

  --pale:          rgba(34,211,238,0.10);
  --pale2:         rgba(34,211,238,0.05);
  --petina-pale:   rgba(34,211,238,0.10);

  --grad:          linear-gradient(135deg, #2EDCD0 0%, #22D3EE 100%);
  --grad-soft:     linear-gradient(135deg, rgba(46,220,208,0.12) 0%, rgba(139,92,246,0.10) 100%);
  --table-head:    #151E2C;

  /* Tinta sobre preenchimento de acento. Branco sobre teal da 2,6:1 e REPROVA
     em AA — era o caso de todo botao primario do produto ate hoje. Tinta
     escura sobre o mesmo teal da 7,3:1. */
  --on-accent:     #04121A;

  /* Tinta sobre preenchimento SEMANTICO. Separada de --on-accent porque as
     duas familias tem claridade oposta entre os temas: no escuro o --err e um
     rosa claro (pede tinta escura), no claro e um vermelho fechado (pede
     branco). Um token so serviria a um dos dois e reprovaria no outro. */
  --on-semantic:   #04121A;

  --shadow:        rgba(0,0,0,0.45);
  --modal-overlay: rgba(4,8,14,0.72);
  --focus-ring:    rgba(34,211,238,0.55);

  /* Semanticas. Duas intensidades porque o corpo usa as duas: a forte pinta
     TEXTO e traco, a `-soft` pinta fundo de chip e faixa de aviso. */
  --ok:        #34D399;  --ok-soft:      rgba(52,211,153,0.14);
  --warn:      #FBBF24;  --warn-soft:    rgba(251,191,36,0.14);
  --err:       #FB7185;  --err-soft:     rgba(251,113,133,0.14);
  --info:      #A78BFA;  --info-soft:    rgba(167,139,250,0.14);
  --neutral:   #A8B3C7;  --neutral-soft: rgba(168,179,199,0.12);

  /* ── SERIE DE GRAFICO ──────────────────────────────────────────────────
     Serie nao e estado: "visitas" nao e um aviso so porque e ambar. Por isso
     tem token proprio — reusar --warn aqui amarraria a cor da serie ao dia em
     que alguem decidir que atencao vira laranja.

     Estes descem pro <canvas>, que NAO resolve var(). Quem le e o `_tk()` do
     dashboard.html, que resolve o token em texto antes de entregar ao Chart. */
  --grid:            rgba(255,255,255,0.06);
  --tick:            #A8B3C7;
  --serie-vendas:    #2EDCD0;
  --serie-anterior:  #64748B;
  --serie-visitas:   #FBBF24;
  --serie-ads:       #A78BFA;
  --serie-fechado:   #2EDCD0;
  --serie-parcial:   #FBBF24;
  --serie-proj:      #38BDF8;

  /* Apelidos historicos. O corpo do dashboard usa estes nomes em centenas de
     lugares; apontar pra semantica evita uma migracao de nome sem ganho. */
  --green: var(--ok);
  --red:   var(--err);
  --amber: var(--warn);
}

/* ── APELIDOS DAS OUTRAS TELAS ─────────────────────────────────────────────
   As doze telas nasceram em epocas diferentes e batizaram a mesma coisa com
   nomes diferentes: o fundo de campo e `--field` no admin e `--input-bg` no
   pro; o violeta e `--purple` numa e `--info` noutra.

   Apontar apelido pro token canonico custa uma linha e evita a alternativa
   real, que era reescrever milhares de `var()` espalhados pelas telas. Fora
   de `:root` (e nao dentro de cada tema) porque sao indirecoes: quem muda com
   o tema e o token de destino. */
:root {
  --input-bg:  var(--bg2);
  --field:     var(--bg2);
  --border-2:  var(--border2);
  --purple:    var(--info);
  --green-bg:  var(--ok-soft);
  --amber-bg:  var(--warn-soft);
  --red-bg:    var(--err-soft);
  --shadow-sm: var(--shadow);
}

/* ── TEMA CLARO — paridade, nao sobra ──────────────────────────────────────
   Toda semantica tem de existir nos dois temas com o MESMO nome, senao o
   valor pintado pelo JS some num deles. Os tons aqui sao os escuros da
   familia (green-700, amber-700), porque o claro tem de contrastar com
   BRANCO — o #16A34A que o corpo usava da 3,9:1 e reprova em AA. */
[data-theme="light"] {
  --bg:            #FFFFFF;
  --bg2:           #FFFFFF;
  --bg3:           #F4FBFA;
  --card-bg:       #FFFFFF;
  --surface:       #FFFFFF;
  --elevated:      #FFFFFF;
  --header-bg:     #FFFFFF;
  --tab-bg:        #FFFFFF;

  --text:          #1E2A2C;
  --muted:         #5B6672;
  --logo-text:     #1E2A2C;
  --logo-grupo:    #6B7280;

  --accent:        #00857C;
  --accent2:       #0077A8;
  --th-color:      #00857C;

  --border:        #C8EDEA;
  --border2:       #8ED4CF;
  --petina-border: #C8EDEA;

  --pale:          #E8F8F7;
  --pale2:         #F0FAFA;
  --petina-pale:   #E8F8F7;

  --grad:          linear-gradient(135deg, #00B5A8 0%, #00AEEF 100%);
  --grad-soft:     linear-gradient(135deg, #E8F8F7 0%, #E0F4FD 100%);
  --table-head:    linear-gradient(135deg, #E8F8F7 0%, #E0F4FD 100%);

  --on-accent:     #04121A;
  --on-semantic:   #FFFFFF;

  --shadow:        rgba(16,40,44,0.10);
  --modal-overlay: rgba(30,42,44,0.55);
  --focus-ring:    rgba(0,133,124,0.45);

  --ok:        #15803D;  --ok-soft:      #E6F9F2;
  --warn:      #B45309;  --warn-soft:    #FFF6E0;
  --err:       #DC2626;  --err-soft:     #FEECEC;
  --info:      #6D28D9;  --info-soft:    #EDE9FE;
  --neutral:   #5B6672;  --neutral-soft: #EEF1F4;

  --grid:            rgba(0,0,0,0.05);
  --tick:            #6B7280;
  --serie-vendas:    #00B5A8;
  --serie-anterior:  #94A3B8;
  --serie-visitas:   #D97706;
  --serie-ads:       #7C5CFC;
  --serie-fechado:   #00B5A8;
  --serie-parcial:   #F59E0B;
  --serie-proj:      #00AEEF;

  --green: var(--ok);
  --red:   var(--err);
  --amber: var(--warn);
}

/* ── FOCO ──────────────────────────────────────────────────────────────────
   :focus-visible e nao :focus — o anel so aparece pra quem navega por
   teclado, entao o clique de mouse nao deixa contorno preso no botao. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── ROLAGEM ───────────────────────────────────────────────────────────────
   A barra padrao do Windows e branca e corta o escuro ao meio. */
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border2); border-radius: var(--r-pill);
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

/* ── MOVIMENTO REDUZIDO ────────────────────────────────────────────────────
   Regra de acessibilidade da casa. Vale pro produto inteiro e nao pode
   depender de cada tela lembrar de escrever. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}