/*
  Design tokens — QR_ialo "Turf Neon"
  ------------------------------------
  Escala de espacamento, raio e tipografia derivada da sequencia de
  Fibonacci (1,1,2,3,5,8,13,21,34,55,89,144,233), pedido explicito do
  usuario para telas estruturalmente agradaveis. A proporcao aurea (1.618,
  limite da razao entre termos consecutivos de Fibonacci) governa as
  proporcoes de layout dos paineis principais.

  Paleta inspirada nas telas originais do jogo (qr_ialo_py/design_reference/
  Tela1-5.png, TelaAposta_*.png, TELA_Jkpt.png, SC.png): fundo quase preto,
  gradientes neon laranja/vermelho para o "trilho" de apostas, dourado para
  o acumulado, tipografia condensada em caixa alta.
*/

:root {
  /* -- Escala Fibonacci (espacamento) -- */
  --f1: 1px;
  --f2: 2px;
  --f3: 3px;
  --f5: 5px;
  --f8: 8px;
  --f13: 13px;
  --f21: 21px;
  --f34: 34px;
  --f55: 55px;
  --f89: 89px;
  --f144: 144px;
  --f233: 233px;
  --f377: 377px;
  --f610: 610px;
  --f987: 987px;

  /* -- Razao aurea -- */
  --phi: 1.618;
  --phi-inv: 0.618;
  /* variantes com unidade, para uso direto em grid-template-columns (uma
     custom property sem unidade nao pode virar `fr` via var() sozinha) */
  --phi-fr: 1.618fr;
  --phi-inv-fr: 0.618fr;

  /* -- Raio de borda (Fibonacci) -- */
  --radius-xs: var(--f3);
  --radius-sm: var(--f5);
  --radius-md: var(--f8);
  --radius-lg: var(--f13);
  --radius-xl: var(--f21);
  --radius-pill: 999px;

  /* -- Tipografia (escala baseada em Fibonacci, arredondada para nitidez em tela) -- */
  --text-2xs: 11px;
  --text-xs: var(--f13);
  --text-sm: 15px;
  --text-base: var(--f21);
  --text-md: var(--f21);
  --text-lg: var(--f34);
  --text-xl: var(--f55);
  --text-2xl: var(--f89);
  /* rotulo de acao (botoes F1/F3/F5/F6/F7) — precisa ser lido rapido sob
     pressao operacional; maior que --text-xs de proposito (P1-5) */
  --text-key: 17px;

  --font-display: "Rajdhani", "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  /* -- Cores base --
     Levantadas em relacao a versao anterior (feedback direto do usuario,
     2026-08-15: "achei muito escura a tela") — mesma familia de cor
     (navy quase-preto), luminancia bem mais alta em cada tom. */
  --void-950: #0b0f18;
  --void-900: #121826;
  --void-850: #171f30;
  --surface-800: #1c2740;
  --surface-700: #26324c;
  --surface-600: #324058;
  --surface-border: #435068;

  --text-primary: #f4f7fb;
  --text-secondary: #aab4c8;
  /* --text-muted/--text-dim recalibrados para AA (>=4.5:1) apos auditoria
     visual de 2026-08-14 — os tons anteriores (#6b7690 / #4a5468) mediam
     ~4.0:1 e ~2.65:1 sobre os fundos escuros onde sao usados. */
  --text-muted: #8b96b0;
  --text-dim: #7581a0;

  /* -- Acentos "fogo" (trilho / apostas / odds) -- */
  --fire-100: #ffd9a8;
  --fire-300: #ffab3d;
  --fire-500: #ff8a00;
  --fire-700: #ff3d1f;
  --fire-900: #c4122f;
  --fire-gradient: linear-gradient(135deg, var(--fire-300) 0%, var(--fire-500) 45%, var(--fire-700) 100%);
  --fire-gradient-soft: linear-gradient(135deg, rgba(255,171,61,.22), rgba(255,61,31,.12));

  /* -- Acentos "ouro" (bonus / jackpot) -- */
  --gold-200: #fff3c4;
  --gold-400: #ffdd66;
  --gold-600: #f2b705;
  --gold-800: #a97a00;
  --gold-gradient: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-600) 55%, var(--gold-800) 100%);

  /* -- Acentos "esmeralda" (sucesso / vencedor / credito) -- */
  --emerald-300: #7cf2c0;
  --emerald-500: #23d98a;
  --emerald-700: #0f9e63;
  --emerald-gradient: linear-gradient(135deg, var(--emerald-300), var(--emerald-700));

  /* -- Acentos "safira" (jogador 2 / info / botao "Fechar rodada") -- */
  --sapphire-400: #6fa8ff;
  --sapphire-600: #2e6bff;
  --sapphire-800: #1a3fa0;
  --sapphire-gradient: linear-gradient(135deg, var(--sapphire-400), var(--sapphire-600) 55%, var(--sapphire-800) 100%);

  /* -- Perigo (erros, alertas) -- */
  --danger-400: #ff6b6b;
  --danger-600: #e0263d;

  /* -- Sombras / brilho -- */
  --glow-fire: 0 0 var(--f21) rgba(255, 138, 0, .55);
  --glow-gold: 0 0 var(--f34) rgba(242, 183, 5, .6);
  --glow-emerald: 0 0 var(--f21) rgba(35, 217, 138, .55);
  --shadow-panel: 0 var(--f13) var(--f34) rgba(0,0,0,.55), 0 var(--f2) var(--f5) rgba(0,0,0,.35);
  --shadow-key: 0 var(--f5) 0 rgba(0,0,0,.35), 0 var(--f8) var(--f13) rgba(0,0,0,.45);

  /* -- Duracoes de transicao (Fibonacci em ms, arredondado) -- */
  --dur-instant: 89ms;
  --dur-fast: 144ms;
  --dur-base: 233ms;
  --dur-slow: 377ms;

  --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
}