/* ============================================================
   CAR RUNNER PIX — DESIGN SYSTEM (fonte unica de cor)
   ------------------------------------------------------------
   REGRA: nenhum componente inventa cor. Tom novo nasce como token
   AQUI. Na familia de clones o antipadrao das tres camadas de cor
   (um blob de CSS claro dentro de um .js, um tema claro por cima e
   uma terceira camada de !important tentando escurecer tudo) custou
   dias de depuracao — este site nasce com uma camada so.

   Ordem de carga obrigatoria em toda pagina:
     /tokens.css  ->  /base.css  ->  <style> da pagina

   Excecoes legitimas de cor literal: o logo, as faixas da pista e os
   atributos de SVG que nao herdam var() de forma confiavel (e nesses
   o comentario diz que espelha um token daqui).
   ============================================================ */
:root {
  /* --- superficie: asfalto a noite --- */
  --bg:            #0b0f16;
  --bg-2:          #111722;
  --card:          #161d2b;
  --card-2:        #1d2637;
  --linha:         #26314a;
  --linha-forte:   #38455f;

  /* --- texto --- */
  --txt:           #eef2f8;
  --txt-suave:     #9fadc4;
  --txt-fraco:     #6b7a94;

  /* --- acento: farol/seta de pista --- */
  --acento:        #ff9d2e;
  --acento-forte:  #ffb659;
  --acento-fundo:  #2a1e10;

  /* --- dinheiro --- */
  --ok:            #2fd07a;
  --ok-fundo:      #10281c;
  --alerta:        #ffd45c;
  --erro:          #ff5f56;
  --erro-fundo:    #2b1315;

  /* --- pista (o jogo) --- */
  --pista:         #1a2130;
  --pista-borda:   #2c3a55;
  --faixa:         #4a5a76;
  --carro:         #ff9d2e;
  --obstaculo:     #ff5f56;
  --moeda:         #ffd45c;

  /* --- veu --- */
  /* --overlay: fundo de MODAL (quase opaco).
     --scrim: veu pra escurecer conteudo SEM apagar (gate sobre a pista).
     Trocar um pelo outro apaga a tela que devia ficar visivel. */
  --overlay:       rgba(6, 9, 14, .82);
  --scrim:         rgba(6, 9, 14, .55);

  /* --- forma --- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-full: 999px;

  --sombra:      0 4px 18px rgba(0,0,0,.38);
  --sombra-alta: 0 12px 40px rgba(0,0,0,.55);

  /* --- tipo --- */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Campo de formulario NUNCA abaixo de 16px: o Safari do iPhone da
     zoom no foco quando a fonte e menor, e a tela salta do lugar. */
  --fonte-campo: 16px;

  /* area de toque minima (dedo, nao mouse) */
  --toque: 44px;

  /* respiro do notch/barra de gestos */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}