/* ============================================================
   LoL Live Fusion · Redesign 2026-09 · interface de produção
   tokens.css — única fonte de cor, tipo, espaço, raio, sombra e motion.
   Regras:
   - Azul/vermelho só identificam LADO do mapa (nunca time fixo na série).
   - Dourado só para relógio, placas e eventos especiais (nunca valor de dado comum).
   - Verde = confirmado / ao vivo / fresco. Laranja = atrasado. Vermelho-alerta = conflito/erro.
   - Roxo = Barão. Branco-dourado = Ancião.
   - Ausência de dado é "—" em --text-3 com motivo; nunca zero, nunca célula vazia.
   ============================================================ */
:root{
  color-scheme:dark;

  /* superfícies */
  --bg:#050A0E;
  --bg-deep:#03070A;
  --panel:#0C151B;
  --panel-2:#101C23;
  --panel-3:#142430;
  --line:#22343F;
  --line-soft:#182731;
  --line-strong:#2E4552;

  /* texto */
  --text:#EAF4FA;
  --text-2:#A9BDCA;   /* secundário: 9.4:1 sobre --panel */
  --text-3:#7A93A2;   /* rótulos pequenos: 5.4:1 sobre --panel */
  --text-4:#4F6573;   /* decorativo apenas (linhas, separadores) */

  /* lados */
  --blue:#42A9FF;
  --blue-soft:#1C4C73;
  --blue-dim:rgba(66,169,255,.16);
  --red:#FF4E74;
  --red-soft:#6E2538;
  --red-dim:rgba(255,78,116,.16);

  /* destaque e estados */
  --gold:#FFD04F;
  --gold-dim:rgba(255,208,79,.16);
  --green:#42E8A0;
  --green-dim:rgba(66,232,160,.14);
  --stale:#FF9D3D;
  --stale-dim:rgba(255,157,61,.16);
  --conflict:#FF5F69;
  --conflict-dim:rgba(255,95,105,.16);
  --unknown:#7A93A2;
  --unknown-dim:rgba(122,147,162,.14);

  /* buffs */
  --baron:#AD64FF;
  --baron-dim:rgba(173,100,255,.22);
  --elder:#FFF2BD;
  --elder-dim:rgba(255,242,189,.22);

  /* dragões (glifos originais, silhueta + cor identificam o elemento) */
  --drag-infernal:#F26C23;
  --drag-ocean:#67C4B0;
  --drag-cloud:#ADD2ED;
  --drag-mountain:#A8805D;
  --drag-hextech:#81D9F5;
  --drag-chemtech:#A4B72B;
  --drag-elder:#C9BCDC;
  --drag-unknown:#7A93A2;

  /* minimapa */
  --map-ground:#0B1319;
  --map-river:#123344;
  --map-lane:#1B2E3A;
  --map-jungle:#0E1A22;
  --map-wall:#152330;
  --map-edge:#22343F;

  /* tipografia */
  --font-sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;

  --fs-display:34px;  /* placar de kills */
  --fs-clock:20px;
  --fs-team:19px;
  --fs-h1:28px;
  --fs-h2:18px;
  --fs-body:13px;
  --fs-small:12px;
  --fs-label:10px;
  --fs-micro:10px;

  /* espaço */
  --s-1:2px; --s-2:4px; --s-3:6px; --s-4:8px; --s-5:12px; --s-6:16px; --s-7:20px; --s-8:24px; --s-9:32px; --s-10:40px;

  /* raio */
  --r-1:4px; --r-2:6px; --r-3:10px; --r-4:14px; --r-5:18px; --r-pill:999px;

  /* elevação (mesa tática: camadas ligeiramente elevadas, sombras coerentes vindas de cima-esquerda) */
  --el-0:none;
  --el-1:0 1px 0 rgba(255,255,255,.03) inset, 0 2px 6px rgba(0,0,0,.35);
  --el-2:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.45);
  --el-3:0 1px 0 rgba(255,255,255,.05) inset, 0 14px 40px rgba(0,0,0,.55);
  --el-table:0 24px 60px rgba(0,0,0,.6), 0 0 0 1px var(--line);

  /* foco (nunca só cor: anel duplo) */
  --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--gold);

  /* motion */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in:cubic-bezier(.6,0,.8,.4);
  --ease-flip:cubic-bezier(.4,0,.2,1);
  --t-fast:120ms;
  --t-base:200ms;
  --t-slow:320ms;
  --t-kill-in:180ms;     /* meia-volta de saída */
  --t-kill-hold:840ms;   /* retrato da vítima visível */
  --t-kill-out:180ms;    /* meia-volta de retorno  → total 1.2s */
  --t-kill-gap:1100ms;   /* intervalo entre kills de um multikill */
  --t-multikill-badge:1600ms;
  --t-pulse:1400ms;
  --t-aura:2400ms;

  /* larguras críticas */
  --w-roster:180px;
  --w-rail:44px;
  --w-map:520px;
  --w-map-min:350px;
  --w-max:1440px;
  --h-touch:44px;
}

/* Desktop padrão 1024–1439 */
@media (max-width:1439px){
  :root{ --w-roster:168px; --w-rail:40px; --w-map:460px; --fs-display:32px; }
}
/* Desktop mínimo 821–1023: reduz retratos, espaçamentos e rails; nunca esconde campeão */
@media (max-width:1023px){
  :root{ --w-roster:150px; --w-rail:32px; --w-map:380px; --fs-display:28px; --fs-team:16px; --fs-clock:18px; }
}
/* Telefone ≤820: layout mobile empilhado */
@media (max-width:820px){
  :root{ --fs-display:26px; --fs-team:15px; --fs-clock:18px; --fs-h1:24px; }
}