/* Camada de tokens compartilhada — Familia Cipriano.
   Carregue este arquivo ANTES do CSS de cada tela.

   Fonte de verdade unica para marca, raio, elevacao e movimento. Cada tela
   continua com seus proprios nomes locais (--red, --brand); eles agora apontam
   para os tokens daqui em vez de repetir valores hex.

   O app do entregador (entregador.css) ainda nao carrega este arquivo: o
   service worker usa cache.addAll() e a lista de copia de scripts/sync-delivery-web.mjs
   e explicita, entao incluir um CSS novo la exige mudanca coordenada. Os valores
   de marca do entregador ja sao identicos aos daqui. */

/* Inter auto-hospedada. O CSP em _headers nao declara font-src, entao a regra
   default-src 'self' vale para fonte: servico de terceiro seria bloqueado em
   producao. O arquivo e a Inter variavel oficial reduzida ao subset latino, com
   o eixo wght de 100 a 900 preservado. E o eixo que faz os pesos declarados no
   CSS existirem de verdade; sem ele o navegador arredondava tudo para bold.
   font-display: swap mostra o texto na fonte do sistema enquanto a Inter carrega,
   entao o pedido nunca fica invisivel esperando fonte. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/InterVariable-latin.woff2") format("woff2");
}

:root {
  /* Marca. --brand-600 e o vermelho oficial, o mesmo do theme-color em index.html. */
  --brand-400: #b8262c;
  --brand-500: #a3161d;
  --brand-600: #8f1117;
  --brand-700: #7a0e13;
  --brand-800: #661015;

  /* Escala de raio. As telas migram para ela na fase de refino. */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Elevacao em tres niveis, no lugar dos 25 box-shadow avulsos de hoje. */
  --elev-1: 0 1px 2px rgba(61, 30, 17, 0.06), 0 4px 12px rgba(61, 30, 17, 0.05);
  --elev-2: 0 2px 4px rgba(61, 30, 17, 0.06), 0 8px 24px rgba(61, 30, 17, 0.08);
  --elev-3: 0 4px 8px rgba(61, 30, 17, 0.07), 0 18px 44px rgba(61, 30, 17, 0.12);

  /* Movimento discreto: curto o bastante para nao atrasar leitura em tela
     operacional. Usado pelas fases de interacao e animacao. */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 220ms;

  /* Foco de teclado. Anel solido com respiro branco: fica visivel sobre fundo
     claro e sobre botao vermelho preenchido. A variante clara e para a sidebar
     e outros fundos escuros, onde o anel vermelho sumiria. */
  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--brand-600);
  --focus-ring-light: 0 0 0 3px rgba(255, 255, 255, 0.9);

  /* Escala de peso. O painel tinha 46 das 54 declaracoes em 800 ou 900: quando
     tudo e pesado, nada tem enfase. Com a Inter variavel carregada esses pesos
     finalmente se distinguem, entao vale usar a escala inteira em vez de
     empilhar tudo no topo. --weight-heavy fica reservado a numero e valor, que
     e o que o operador procura na tela com pressa. */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Tipografia. A Inter precisa ser auto-hospedada: o CSP em _headers nao
     declara font-src, entao fonte de terceiro e bloqueada em producao. */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
}

/* Respeita quem pediu menos movimento no sistema. Precisa existir antes de
   qualquer animacao entrar no projeto. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}