/* ══════════════════════════════════════════════════════════════════════
   TEMA COMPARTILHADO — fonte de verdade visual dos dashboards
   Editar aqui muda Quota e VaideBet ao mesmo tempo.

   Depois de editar, rode nas duas pastas:
     node build.js && npx wrangler deploy

   Os dois dashboards usam nomes de variáveis diferentes por razões
   históricas. Em vez de renomear tudo (arriscado em ~3.000 linhas),
   os dois conjuntos de nomes apontam para as MESMAS cores abaixo.
   Nomes novos devem usar o bloco canônico.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Canônico: use estes em código novo ───────────────────────────── */
  --c-bg:        #07090c;   /* fundo da página          */
  --c-surface:   #0d1117;   /* header, barras           */
  --c-card:      #131a23;   /* cards, inputs            */
  --c-card-alt:  #1a232f;   /* card elevado, hover      */
  --c-border:    #1f2a37;   /* divisórias               */
  --c-border-hi: #2a3947;   /* divisória em destaque    */

  --c-text:      #e8eef5;   /* texto principal          */
  --c-text-mid:  #9aa7b8;   /* texto secundário         */
  --c-text-dim:  #5d6b7e;   /* rótulos, legendas        */

  --c-accent:    #3b82f6;   /* azul da marca            */
  --c-accent-mid:#1d4ed8;
  --c-accent-dim:#0a2540;
  --c-green:     #00d68f;
  --c-red:       #ff4d6d;
  --c-amber:     #ffb547;
  --c-cyan:      #4fc3f7;
  --c-orange:    #ff9800;
  --c-purple:    #b388ff;

  /* fundos suaves (badges, linhas destacadas) */
  --c-green-soft:  rgba(0,214,143,.12);
  --c-accent-soft: rgba(59,130,246,.14);
  --c-red-soft:    rgba(255,77,109,.12);
  --c-amber-soft:  rgba(255,181,71,.12);
  --c-cyan-soft:   rgba(79,195,247,.12);
  --c-orange-soft: rgba(255,152,0,.12);

  --c-radius:    8px;
  --c-radius-lg: 12px;
  --c-header-h:  52px;      /* altura do topo — igual nos dois e no hub */

  --c-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --c-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Aliases do dash QUOTA (não remover: usados no HTML existente) ── */
  --bg-0: var(--c-bg);
  --bg-1: var(--c-surface);
  --bg-2: var(--c-card);
  --bg-3: var(--c-card-alt);
  --line: var(--c-border);
  --line-soft: #161e28;
  --text-0: var(--c-text);
  --text-1: var(--c-text-mid);
  --text-2: var(--c-text-dim);
  --green:  var(--c-green);
  --gs:     var(--c-green-soft);
  --accent: var(--c-accent);
  --as:     var(--c-accent-soft);
  --red:    var(--c-red);
  --rs:     var(--c-red-soft);
  --yellow: var(--c-amber);
  --ys:     var(--c-amber-soft);
  --blue:   var(--c-cyan);
  --bs:     var(--c-cyan-soft);
  --orange: var(--c-orange);
  --os:     var(--c-orange-soft);
  --purple: var(--c-purple);
  --mono:   var(--c-mono);
  --sans:   var(--c-sans);
  --r:      var(--c-radius);

  /* ── Aliases do dash VAIDEBET (não remover) ───────────────────────── */
  --bg:       var(--c-bg);
  --surface:  var(--c-surface);
  --card:     var(--c-card);
  --card2:    var(--c-card-alt);
  --border:   var(--c-border);
  --border2:  var(--c-border-hi);
  --text:     var(--c-text);
  --text2:    var(--c-text-mid);
  --text3:    var(--c-text-dim);
  --vdb:      var(--c-accent);
  --vdb-dim:  var(--c-accent-dim);
  --vdb-mid:  var(--c-accent-mid);
  --bpx:      var(--c-green);
  --bpx-dim:  #052e16;
  --bpx-mid:  #166534;
  --amber:    var(--c-amber);
  --radius:   var(--c-radius);
  --radius-lg:var(--c-radius-lg);
}

/* ══════════════════════════════════════════════════════════════════════
   FUNDO — grade técnica com deriva lenta
   Vale para os dois dashboards. A grade dá profundidade sem competir
   com o conteúdo: as linhas ficam quase no limite do perceptível e o
   movimento é lento o bastante para não distrair quem está lendo número.
   Respeita quem pediu menos animação no sistema.
   ══════════════════════════════════════════════════════════════════════ */
body{
  background-color:var(--c-bg);
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:48px 48px, 48px 48px;
  animation:derivaGrade 90s linear infinite;
}

/* halo suave por cima da grade, para o centro da tela respirar */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(59,130,246,.055), transparent 62%),
    radial-gradient(760px 420px at 96% 4%, rgba(0,214,143,.032), transparent 58%);
}
body > *{position:relative;z-index:1}

@keyframes derivaGrade{
  from{ background-position:0 0, 0 0 }
  to  { background-position:48px 48px, 48px 48px }
}

@media (prefers-reduced-motion:reduce){
  body{animation:none}
}

[data-theme="light"] body{
  background-image:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
}

/* ── Tema claro ────────────────────────────────────────────────────────
   Ligado por  document.documentElement.setAttribute('data-theme','light')
   Só troca fundos e textos: as cores de acento (verde/vermelho/azul)
   continuam as mesmas, senão os gráficos e selos perdem o significado.   */
[data-theme="light"]{
  --c-bg:        #f0f2f5;
  --c-surface:   #ffffff;
  --c-card:      #f7f8fa;
  --c-card-alt:  #eaecef;
  --c-border:    #dde1e7;
  --c-border-hi: #cfd6de;
  --c-text:      #0d1117;
  --c-text-mid:  #4a5568;
  --c-text-dim:  #8a9ab0;

  /* aliases do Quota */
  --bg-0:#f0f2f5; --bg-1:#ffffff; --bg-2:#f7f8fa; --bg-3:#eaecef;
  --line:#dde1e7; --line-soft:#e8eaed;
  --text-0:#0d1117; --text-1:#4a5568; --text-2:#8a9ab0;

  /* aliases do VaideBet */
  --bg:#f0f2f5; --surface:#ffffff; --card:#f7f8fa; --card2:#eaecef;
  --border:#dde1e7; --border2:#cfd6de;
  --text:#0d1117; --text2:#4a5568; --text3:#8a9ab0;
}