/* Uma única escolha governa a superfície de todas as áreas. Carregado depois
   da composição do protótipo para não voltar a variar o fundo por menu. */
:root{color-scheme:dark;--theme-link:var(--brand)}
:root[data-tema="escuro"]{
  --s0:#050506;--s1:#0b0b0d;--s2:#121215;--s3:#1a1a1e;
  --s4:#25252b;--s5:#34343c;
  --line:#383840;--line-forte:#54545e;
  --t1:#f7f7f9;--t2:#dedee5;--t3:#b8b8c3;--t4:#aaaab7;
  --panel-line:rgba(255,255,255,.12);
  --row-hover:rgba(194,243,74,.055);
  --bg:var(--s1);--bg2:var(--s2);--card:var(--s3);--card2:var(--s4);
  --text:var(--t1);--muted:var(--t3);
}
:root[data-tema="claro"]{
  color-scheme:light;
  --s0:#e9e4f0;--s1:#f5f2f8;--s2:#fbfaff;--s3:#ffffff;
  --s4:#eee9f4;--s5:#e2d9ed;
  --line:#d6cde1;--line-forte:#b5a5c6;
  --t1:#21172e;--t2:#443550;--t3:#5e506b;--t4:#675674;
  /* No papel branco o lima não serve como texto ou foco. O roxo da marca
     assume as ações; a bola do logotipo continua lima. */
  --brand:#572789;--brand2:#452080;--on-brand:#ffffff;
  --accent2:#6d39a2;--purple:#572789;
  --ok:#187047;--ok-bg:#e5f6ed;--ok-borda:#97cfaf;
  --perigo:#a8293d;--perigo-bg:#fff0f1;--perigo-borda:#e5a9b2;
  --alerta:#8d5410;--alerta-bg:#fff4dc;--alerta-borda:#dcb979;
  --info:#324e9c;--info-bg:#edf1ff;--info-borda:#acbde8;
  --row-hover:#f3eef9;--panel-line:#ddd5e7;
  --bg:var(--s1);--bg2:var(--s2);--card:var(--s3);--card2:var(--s4);
  --text:var(--t1);--muted:var(--t3);
  --theme-link:var(--brand);
}

/* A franquia afeta ações, abas, links de destaque e marcadores. O cálculo
   no PHP entrega duas versões da MESMA cor: legível sobre preto e sobre
   branco. A paleta de superfícies continua exclusivamente do tema. */
.aro-game-shell.has-team{
  --brand:var(--team-accent-dark);
  --brand2:color-mix(in srgb,var(--team-accent-dark) 88%,#ffffff);
  --on-brand:#111318;--accent:var(--team-accent-dark);--accent2:var(--team-accent-dark);
  --row-hover:color-mix(in srgb,var(--team-accent-dark) 7%,transparent);
}
:root[data-tema="claro"] .aro-game-shell.has-team{
  --brand:var(--team-accent-light);
  --brand2:color-mix(in srgb,var(--team-accent-light) 88%,#000000);
  --on-brand:#fff;--accent:var(--team-accent-light);
  --row-hover:color-mix(in srgb,var(--team-accent-light) 7%,transparent);
}
.aro-game-shell.has-team .top-nav::before{
  background:linear-gradient(90deg,var(--brand),var(--team-secondary),transparent 75%);
}
.aro-game-shell.has-team .tn-avatar{background:var(--brand);color:var(--on-brand)}
.aro-game-shell.has-team :is(.gmh-next-btn,.gmh-coach-ava){background:var(--brand);color:var(--on-brand)}
.aro-game-shell.has-team .gmh-next-btn:hover{color:var(--on-brand)}
.aro-game-shell :is(.ot-tag,.gc-mine,.era-sel-icon,.inbox-badge,.tab-badge,.plan-badge,.wiz-step-dot.active .wiz-dot,.badge-live,.tag){
  background:var(--brand);color:var(--on-brand)
}
.aro-game-shell .tn-logout{color:var(--t3)}
.aro-game-shell .tn-logout:hover{color:var(--brand2)}
.aro-game-shell .bl-invertido :is(.bl-kicker,.bl-corpo,.bl-rodape,.bl-tabela .pos,.bl-tabela .reg){
  color:color-mix(in srgb,var(--on-brand) 78%,transparent)
}
.aro-game-shell .bl-invertido .bl-tabela td{border-top-color:color-mix(in srgb,var(--on-brand) 18%,transparent)}
.aro-game-shell .bl-invertido .bl-tabela .eu td{
  background:color-mix(in srgb,var(--on-brand) 12%,transparent);color:var(--on-brand)
}
.aro-game-shell .bl-invertido:hover{box-shadow:0 0 0 2px var(--line-forte)}

/* Componentes antigos ainda tinham fundos literais. Estes são os que cobrem
   grandes áreas e criariam ilhas de roxo/azul ao trocar de modo. */
.card{background:var(--s3)}
.ph2-right{background:var(--s2)}
.tp-search,.gm-input{background:var(--s4)}
.ps-prog{background:var(--s4)}
.award-card,.lottery-ball.top-pick{background:var(--s3)}
.gmodal-titulo{color:var(--t1)}
.gmodal-texto{color:var(--t2)}
.gmodal-fundo{background:color-mix(in srgb,var(--s0) 80%,transparent)}
.auth-left{background:radial-gradient(640px 640px at 50% -18%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 62%),var(--s2)}
.auth-right{background:radial-gradient(760px 520px at 85% 12%,color-mix(in srgb,var(--purple) 11%,transparent),transparent 62%),var(--s1)}
.auth-form-box{background:var(--s3)}
.auth-field input{background:var(--s4)}
.cfg-card .auth-field input{background:var(--s4)}
.saves-layout{background:radial-gradient(1200px 600px at 50% -5%,color-mix(in srgb,var(--brand) 7%,transparent),transparent 60%),var(--s1)}
.wizard-overlay{background:color-mix(in srgb,var(--s0) 97%,transparent)}
.slot-new{background:var(--s2);border-color:var(--line)}

:root[data-tema="claro"] .al-features li,
:root[data-tema="claro"] .al-features li strong{color:var(--t1)}
:root[data-tema="claro"] img.brand-lockup,
:root[data-tema="claro"] .al-logo img.brand-lockup,
:root[data-tema="claro"] .logo img.brand-lockup,
:root[data-tema="claro"] .saves-topbar .logo-row img.brand-lockup{filter:none}
:root[data-tema="claro"] .al-quote,
:root[data-tema="claro"] .auth-separator{color:var(--t3)}
:root[data-tema="claro"] .auth-links a,
:root[data-tema="claro"] .saves-topbar .logout-link:hover{color:var(--brand)}
:root[data-tema="claro"] :is(.saves-topbar .logo-row span,.auth-brand-name){
  background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--t1)
}
:root[data-tema="claro"] .slot-card{border-color:var(--line)}
:root[data-tema="claro"] .slot-body .slot-info strong{color:var(--t1)}
:root[data-tema="claro"] .slot-new:hover{background:var(--s4)}
:root[data-tema="claro"] .nav-item.active,
:root[data-tema="claro"] .tn-tab.active{color:var(--t1)}
:root[data-tema="claro"] .tn-phase-pill{background:var(--s4);border-color:var(--line)}
:root[data-tema="claro"] .tn-tab:hover{color:var(--t1)}
:root[data-tema="claro"] .tn-logout{color:var(--t3)}
:root[data-tema="claro"] .tn-logout:hover{color:var(--brand)}
:root[data-tema="claro"] .cap-alert{background:var(--alerta-bg);color:var(--alerta)}
:root[data-tema="claro"] :is(.cap-ok,.board-goal.goal-cumprida .goal-badge,.h2h-w){background:var(--ok-bg);color:var(--ok)}
:root[data-tema="claro"] :is(.cap-over,.board-goal.goal-falhou .goal-badge,.h2h-l,.badge-inj,.btn-danger,.trade-msg.no){background:var(--perigo-bg);color:var(--perigo)}
:root[data-tema="claro"] :is(.cap-under,.g-c){background:var(--alerta-bg);color:var(--alerta)}
:root[data-tema="claro"] .g-a{background:var(--ok-bg);color:var(--ok)}
:root[data-tema="claro"] .g-b{background:var(--info-bg);color:var(--info)}
:root[data-tema="claro"] .g-d{background:var(--perigo-bg);color:var(--perigo)}
:root[data-tema="claro"] .gmodal-caixa{box-shadow:0 30px 70px rgba(29,15,45,.18)}
:root[data-tema="claro"] .leitura-painel{box-shadow:0 14px 34px rgba(29,15,45,.18)}
:root[data-tema="escuro"] .hub-body{background:var(--s1)}

/* Amostras deixam explícito que a escolha troca toda a interface. */
.lp-temas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.lp-tema{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:7px 3px}
.lp-amostra{display:block;width:28px;height:18px;border-radius:4px;border:1px solid var(--line-forte)}
.lp-amostra-claro{background:linear-gradient(90deg,#f5f2f8 55%,#fff 55%)}
.lp-amostra-padrao{background:linear-gradient(90deg,#170d24 55%,#24163a 55%)}
.lp-amostra-escuro{background:linear-gradient(90deg,#0b0b0d 55%,#1a1a1e 55%)}
.cfg-temas{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.tema-escolha{display:flex;align-items:center;gap:9px;min-width:100px;padding:9px 12px;
  background:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--t2);font:inherit;font-size:.8125rem;font-weight:700;cursor:pointer}
.tema-escolha:hover{background:var(--s5);color:var(--t1)}
.tema-escolha.tema-ativo{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);color:var(--t1)}

@media(prefers-contrast:more){
  :root[data-tema="claro"]{--t3:#493858;--t4:#493858;--line:#9b89ae;--panel-line:#a996ba}
  :root[data-tema="escuro"]{--t3:#d2d2d9;--t4:#d2d2d9;--line:#777780;--panel-line:#777780}
}