/* tema-tokens.css · FONTE ÚNICA dos tokens de cor/superfície (tema "Synax data-grade").

   Por que este arquivo existe
   ---------------------------
   Estes tokens viviam duplicados à mão no <style> de templates/base.html e em
   static/css/dashboard.css · o comentário do base.html admitia "Espelha
   static/css/dashboard.css e tema.py". O espelho quebrou: 7 dos 36 tokens já divergiam, e
   --sub-on-dark existia só no dashboard.css, então templates/login.html (que usa
   var(--sub-on-dark)) renderizava os bullets em preto herdado. Agora há um arquivo só.

   Consumidores (carregam este CSS ANTES de qualquer folha que use os tokens):
   - templates/base.html    · telas admin/config + Mirante e Poker (que dela herdam)
   - static/dashboard.html  · o SPA, antes de dashboard.css

   Ordem importa
   -------------
   Este arquivo traz os DEFAULTS. Quem sobrepõe, por ordem crescente de precedência:
     1. este arquivo (:root e :root[data-theme="light"])
     2. <style id="tema-marca"> e <style id="tema-cliente">   · paleta do tenant
     3. vars aplicadas INLINE no <html> por static/js/tema-nucleo.js  · sempre vencem
   Por isso NÃO mova o <link> deste arquivo para depois dos <style> de marca/cliente: os
   defaults passariam a vencer a paleta do tenant e o white-label pararia de funcionar.

   Relação com tema.py
   -------------------
   tema.py:css_vars gera em runtime um subconjunto destes tokens (accent, accent-deep,
   good, good-deep, br-green, br-green-deep, warn, bad, bg, bg-2, bg-light, bg-2-light,
   accent-soft, ring). Para esses, o valor aqui é apenas o DEFAULT de quando não há tema de
   cliente/marca. Os demais (superfícies, tinta, sombras, sidebar) existem só aqui.
   Atenção: --bg/--bg-2 abaixo são do modo ESCURO; o modo claro vem do bloco
   :root[data-theme="light"], e a variante do tenant chega via --bg-light (ver tema-nucleo.js). */

:root {
  /* Tema "Synax data-grade" (default): superfícies navy escuras, cards escuros,
     tinta clara, âncoras azul/ciano/esmeralda/âmbar/rosa. Ver tema.py CORES_PADRAO. */
  --bg: #0A1120;
  --bg-2: #0E1830;
  --bg-deep: #060B18;                        /* fim do gradiente do fundo (v606, protótipo) */
  /* Cards translúcidos (frosted glass): tinta navy clara sobre o fundo, com desfoque.
     O gradiente da marca aparece através dos cards → "toque translúcido moderno". */
  --panel: rgba(45,64,102,0.58);
  --panel-2: rgba(56,77,120,0.50);
  --panel-solid: #1A2740;                    /* superfície OPACA (ex.: stroke de ponto em gráfico) */
  --border: rgba(191,205,232,0.16);
  --border-strong: rgba(191,205,232,0.28);   /* borda de ênfase (swatches, inputs) */
  --card-blur: blur(16px) saturate(128%);    /* desfoque do vidro fosco (cards/overlays) */
  --card-hi: rgba(255,255,255,0.10);         /* brilho interno no topo do card (mais lift → volta a flutuar) */
  --card-ring: rgba(120,150,210,0.10);       /* aro de luz externo · é ele que faz o card "flutuar" */
  --grid-line: rgba(191,205,232,0.10);       /* linhas de grade dos gráficos · mais sutil que --border */
  --sel-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A6B2CB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  /* Texto DENTRO dos cards (agora escuros → tinta clara) */
  --text: #F1F5FC;
  --text-dim: #B4C0D8;
  --text-faint: #8493B1;
  /* Texto FORA dos cards (sobre fundo navy) */
  --text-on-dark: #F1F5FC;
  --dim-on-dark: #B4C0D8;
  --sub-on-dark: #D2DBEA;
  --faint-on-dark: #8493B1;
  --border-on-dark: rgba(191,205,232,0.16);
  --accent: #2563EB;
  --accent-deep: #1D4ED8;
  --accent-soft: rgba(37,99,235,0.12);
  --ring: rgba(37,99,235,.32);
  --good: #22D3EE;
  --good-deep: #0E7490;
  --warn: #FBBF24;
  --bad: #FB7185;
  --neutral: #93A1BD;
  --br-green: #34D399;
  --br-green-deep: #059669;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 14px 36px rgba(0,0,0,0.48), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-lg: 0 30px 72px rgba(0,0,0,0.58);
  --radius: 16px;
  --sb-w:300px; --sb-wc:76px;
  --sb-bg:color-mix(in srgb, var(--bg), transparent 16%); --sb-item:rgba(233,237,246,.05); --sb-item-hover:rgba(233,237,246,.09);
  --sb-item-on-bg: rgba(37,99,235,0.20);     /* item de menu ATIVO (v606, protótipo) */
  /* Fundo: gradiente derivado da PALETA (accent/good), então acompanha o white-label.
     Valores do protótipo (v606) · termina em --bg-deep em vez de um hex fixo. */
  --bg-layers:
    radial-gradient(680px 440px at 0% -16%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 46%),
    radial-gradient(640px 440px at 110% -2%, color-mix(in srgb, var(--good) 12%, transparent), transparent 46%),
    radial-gradient(760px 760px at 98% 120%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 52%),
    linear-gradient(165deg, var(--bg-2) 0%, var(--bg) 50%, var(--bg-deep) 100%);
}
/* ----- TEMA CLARO (opcional via toggle: cards brancos, fundo claro) ----- */
:root[data-theme="light"] {
  /* Campo slate suave (menos branco → não cansa a vista); cards off-white translúcidos. */
  --bg: #E7ECF4;
  --bg-2: #DDE4EF;
  --bg-deep: #CBD4E4;
  --panel: rgba(255,255,255,0.80);
  --panel-2: rgba(246,249,253,0.72);
  --panel-solid: #FFFFFF;
  --border: rgba(23,34,60,0.12);
  --border-strong: rgba(23,34,60,0.20);
  --card-blur: blur(14px) saturate(118%);
  --card-hi: rgba(255,255,255,0.85);
  --card-ring: rgba(23,34,60,0.06);
  --grid-line: rgba(23,34,60,0.09);
  --sel-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23566079' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --text: #111A2E;
  --text-dim: #46516C;
  --text-faint: #6B7691;
  --text-on-dark: #111A2E;
  --dim-on-dark: #46516C;
  --sub-on-dark: #2E374C;
  --faint-on-dark: #6B7691;
  --border-on-dark: rgba(23,34,60,0.14);
  --sb-bg:color-mix(in srgb, rgba(255,255,255,.84), var(--accent) 5%); --sb-item:rgba(26,36,56,.045); --sb-item-hover:rgba(26,36,56,.085);
  --sb-item-on-bg: rgba(37,99,235,0.10);
  --shadow-sm: 0 1px 2px rgba(15,25,50,0.06), 0 2px 8px rgba(15,25,50,0.05);
  --shadow-md: 0 8px 26px rgba(15,25,50,0.12), 0 2px 6px rgba(15,25,50,0.06);
  --shadow-lg: 0 24px 60px rgba(15,25,50,0.16);
  --bg-layers:
    radial-gradient(900px 560px at 3% -12%, color-mix(in srgb, var(--good) 20%, transparent), transparent 55%),
    radial-gradient(780px 520px at 106% -6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 52%),
    radial-gradient(820px 820px at 96% 118%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg) 62%, #fff) 0%, var(--bg) 55%, var(--bg-deep) 100%);
}
