/* ══ TOKENS — a paleta das telas de conta e de administração ════════════════
   Login, convite, minha conta, sem acesso, /admin e /admin/usuarios. Antes
   cada uma trazia a própria cópia desta paleta no <style>, e as cópias já
   tinham divergido (o vermelho de erro era um tom numa tela e outro na
   vizinha).

   A TV e as páginas analíticas têm paleta própria (tv.html, chassi.css), e o
   menu lateral a dele (layout.css): superfícies diferentes, de propósito.

   Claro é o padrão; o escuro redefine TOKEN, nunca regra. O tema vem de
   /base/pre-pintura.js, que marca <html data-theme="dark">.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:      #f1f5f9;
  --card:    #ffffff;
  --card2:   #f8fafc;
  --border:  #e2e8f0;
  --text:    #0f172a;
  --muted:   #475569;
  /* #64748b, o cinza de apoio do resto do projeto, dá 4,0:1 sobre --bg e
     reprova em texto pequeno. Este passo dá 4,86:1 sobre --bg. */
  --muted2:  #5a6c81;

  --watidy:  #4338ca;
  --waleads: #0d9488;

  --btn:     #4338ca;
  --btn-hov: #3730a3;
  --btn-off: #a5b4fc;
  --anel:    rgba(67, 56, 202, .18);
  --trilho:  #cbd5e1;

  --red:     #b91c1c;
  --red-bg:  #fef2f2;
  --red-bd:  #fecaca;
  --ok:      #15803d;
  --ok-bg:   #f0fdf4;
  --ok-bd:   #bbf7d0;
  --amb:     #92400e;
  --amb-bg:  #fffbeb;
  --amb-bd:  #fde68a;
  --info:    #3730a3;
  --info-bg: #eef2ff;
  --info-bd: #c7d2fe;

  --glow1:   rgba(67, 56, 202, .10);
  --glow2:   rgba(13, 148, 136, .09);
  --sombra:  0 1px 2px rgba(15, 23, 42, .06), 0 12px 40px rgba(15, 23, 42, .10);

  --font: 'Inter', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* Escuro em CINZA NEUTRO, não marinho: o azul é identidade de produto (waTidy)
   e do botão, e some se o fundo também for azul. */
:root[data-theme="dark"] {
  --bg:      #0e0e10;
  --card:    #18181b;
  --card2:   #232327;
  --border:  #34343a;
  --text:    #ececf0;
  --muted:   #a5a5b0;
  --muted2:  #8b8b96;

  --watidy:  #818cf8;
  --waleads: #2dd4bf;

  /* O índigo claro da marca não serve de fundo de botão: branco sobre #818cf8
     fica em 2,8:1. O botão mantém um índigo fundo (6,3:1 com branco). */
  --btn:     #4f46e5;
  --btn-hov: #5b52e8;
  --btn-off: #3730a3;
  --anel:    rgba(129, 140, 248, .25);
  --trilho:  #3f3f46;

  --red:     #f87171;
  --red-bg:  #2a1618;
  --red-bd:  #5c2a2c;
  --ok:      #4ade80;
  --ok-bg:   #132a1b;
  --ok-bd:   #1f4d2e;
  --amb:     #fbbf24;
  --amb-bg:  #2a2214;
  --amb-bd:  #5c4a1a;
  --info:    #c7d2fe;
  --info-bg: #1e1e2b;
  --info-bd: #35355a;

  --glow1:   rgba(99, 102, 241, .06);
  --glow2:   rgba(20, 184, 166, .05);
  --sombra:  0 1px 2px rgba(0, 0, 0, .4), 0 16px 48px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
/* O `[hidden]` do navegador perde para qualquer `display` de classe, e no SVG
   ele não esconde nada. Aqui ele vence sempre. */
[hidden] { display: none !important; }
