/*
 * tokens.css — fonte única de cor, espaço e tipografia do painel MobQ.
 *
 * 🔌 NENHUM hexadecimal fora deste arquivo (mesma regra de packages/ui:
 * PR com cor solta em tela volta). Trocar a marca = editar só aqui.
 *
 * Paleta herdada da QKV / MobQ (brand/logo/README.md):
 *   #0d0f12 fundo · #315BCE azul royal · #4261B3 azul secundário ·
 *   #3a68ff azul vivo (acentos de UI) · #FFFFFF texto sobre escuro.
 * O painel é dark-first porque a marca é dark-first (o logo principal vive
 * sobre #0d0f12).
 */

:root {
  /* ---- superfícies ---- */
  --fundo0: #0d0f12; /* fundo da página (cor da marca) */
  --fundo1: #14181f; /* cards, barra lateral */
  --fundo2: #1b212b; /* card elevado, linha alternada */
  --fundo3: #232b38; /* hover, campo de formulário */
  --linha: #2a3341;
  --linha-forte: #384357;

  /* ---- texto ---- */
  --texto1: #f2f5f9;
  --texto2: #a9b4c2;
  --texto3: #6b7686;
  --texto-invertido: #ffffff;

  /* ---- marca ---- */
  --marca: #315bce; /* azul royal QKV — ações primárias */
  --marca-forte: #4261b3; /* azul secundário — pressed */
  --marca-viva: #3a68ff; /* azul vivo — foco, links, seleção */
  --marca-suave: #16203a; /* fundo de destaque */

  /* ---- semânticas ---- */
  --ok: #34c77b;
  --ok-fundo: #102a1e;
  --alerta: #e8b93a;
  --alerta-fundo: #2b2410;
  --erro: #e85d5d;
  --erro-fundo: #2e1516;
  --info: #58a6f0;
  --info-fundo: #14243a;

  /* ---- categorias de veículo (mesmas de packages/ui) ---- */
  --carro: #5aa9e6;
  --moto: #f0a83c;

  /* ---- espaço (base 4) ---- */
  --sp1: 4px;
  --sp2: 8px;
  --sp3: 12px;
  --sp4: 16px;
  --sp5: 20px;
  --sp6: 24px;
  --sp7: 32px;
  --sp8: 40px;

  /* ---- raio ---- */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 20px;
  --raio-full: 999px;

  /* ---- tipografia ---- */
  --fonte: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --fonte-num: 'Segoe UI', system-ui, sans-serif;
  --t-display: 28px;
  --t-h1: 22px;
  --t-h2: 18px;
  --t-corpo: 15px;
  --t-peq: 13px;
  --t-legenda: 12px;

  /* ---- elevação ---- */
  --sombra1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --sombra3: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* ---- layout ---- */
  --lateral: 236px;
  --topo: 60px;
}