/* ===========================================================
   CLICK ENTREGAS — tokens
   Arquivo único de tokens dos três painéis (motoboy, loja, admin).
   Nenhuma cor solta no código: tudo referencia daqui.

   Estrutura, escala e forma vêm do briefing de redesenho; a paleta é a
   identidade CLICK em tema claro (decisão registrada: o briefing especificava
   fundo escuro, mantivemos claro para não divergir do painel da loja).
   =========================================================== */

/* ---------- Tipografia self-hosted ----------
   Inter (interface) e Archivo (títulos e números) servidas pelo próprio
   Express. A CSP do app não permite host externo e a PWA precisa funcionar
   offline — por isso nada de Google Fonts em runtime. São fontes variáveis:
   um arquivo cobre toda a faixa de pesos. */
@font-face{
  font-family:'Inter';
  src:url('/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('/fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---------- Camadas (stacking) ----------
     Escala única do app. O mapa é o piso: o Leaflet usa z-index próprio de até
     1000 em panes e controles, então o container do mapa ISOLA esse mundo
     (isolation:isolate) e fica na camada 0. Assim nada de dentro do mapa
     alcança header, navegação, modal ou toast — sem número arbitrário. */
  --camada-mapa:0;
  --camada-conteudo:1;
  --camada-sobreposto:2;   /* selos e chips desenhados sobre o mapa */
  --camada-header:20;
  --camada-nav:40;
  --camada-modal:60;
  --camada-toast:80;
  --camada-tutorial:100;

  /* ---------- Superfícies ---------- */
  --bg:#F4F6F8;          /* fundo do app */
  --surface:#FFFFFF;     /* cartão, folha, barra */
  --surface-2:#F1F4F7;   /* bloco dentro de cartão */
  --line:#E2E7EC;        /* traço divisor */

  /* ---------- Texto ---------- */
  --txt:#14181D;
  --muted:#68727E;
  --faint:#98A1AC;

  /* ---------- Marca ---------- */
  --orange:#E16407;
  --orange-2:#F0812B;
  --orange-soft:#FDEBDD;

  /* ---------- Estados ---------- */
  --green:#12A150;
  --green-soft:#E4F6EC;
  --red:#D92D20;
  --red-soft:#FDECEA;
  --amber:#B25E00;
  --amber-soft:#FFF3E0;
  --blue:#1668D6;
  --blue-soft:#E7F1FD;
  --purple:#6D45D9;
  --purple-soft:#EFE9FC;

  /* ---------- Forma ---------- */
  --r-sm:11px;
  --r-md:16px;
  --r-lg:22px;
  --r-full:999px;
  --nav-h:64px;

  /* ---------- Sombra ---------- */
  --sh-sm:0 1px 2px rgba(16,24,40,.05);
  --sh:0 2px 8px rgba(16,24,40,.07);
  --sh-lg:0 12px 30px rgba(16,24,40,.14);
  --sh-up:0 -12px 30px rgba(16,24,40,.10);

  /* ---------- Espaçamento (escala 4px) ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* ---------- Famílias ---------- */
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ff-num:'Archivo','Inter',system-ui,sans-serif;

  /* ---------- Escala de tipo (só estes valores) ---------- */
  --fs-caps:11px;      /* rótulo em caixa alta */
  --fs-sec:13px;       /* texto secundário */
  --fs-body:14.5px;    /* corpo */
  --fs-block:19px;     /* título de bloco */
  --fs-screen:26px;    /* título de tela */
  --fs-hero:40px;      /* valor herói */

  --fw-normal:400; --fw-medio:500; --fw-forte:600; --fw-destaque:700; --fw-black:800;

  /* ---------- Alvos de toque ---------- */
  --alvo:48px;         /* mínimo tocável */
  --btn-h:56px;        /* ação principal */

  /* ---------- Apoio (derivados usados em componentes) ---------- */
  --orange-line:#F3D9C4;      /* borda sobre fundo laranja suave */
  --orange-ink:#A94A05;       /* texto sobre laranja suave */
  --wa:#0C7A3E; --wa-soft:#F2FBF5; --wa-line:#C6EAD2;
  --call:#1257A8; --call-soft:#F3F8FF; --call-line:#CFE0F5;
  --sk-base:#EEF1F4; --sk-brilho:#E3E8EE;
  --tracking-bg:#EDEFF1;

  /* ---------- Área segura ---------- */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ===========================================================
   Aliases de compatibilidade
   O app.css nasceu com outros nomes. Em vez de duplicar valores, os nomes
   antigos apontam para os tokens acima — um valor, um lugar.
   =========================================================== */
:root{
  --laranja:var(--orange);
  --laranja-600:#C95605;
  --laranja-700:#A94A05;
  --laranja-soft:var(--orange-soft);
  --laranja-ring:rgba(225,100,7,.22);
  --grafite:var(--txt);
  --grafite-700:#2A2F35;
  --grafite-500:#4A525B;
  --cinza:var(--muted);
  --cinza-300:#C9CFD6;
  --cinza-200:var(--line);
  --cinza-100:#EEF1F4;
  --cinza-50:var(--surface-2);
  --branco:var(--surface);
  --ok:var(--green);
  --ok-soft:var(--green-soft);
  --online:var(--green);
  --erro:var(--red);
  --erro-soft:var(--red-soft);
  --alerta:var(--amber);
  --alerta-soft:var(--amber-soft);
  --info:var(--blue);
  --info-soft:var(--blue-soft);
  --etapa-rota:var(--blue);
  --etapa-rota-soft:var(--blue-soft);
  --etapa-entrega:var(--green);
  --etapa-entrega-soft:var(--green-soft);
  --etapa-retorno:var(--purple);
  --etapa-retorno-soft:var(--purple-soft);
  --r-xs:8px;
  --r:12px;
  --r-md-legado:14px;
  --r-xl:var(--r-lg);
  --sh-lg-legado:var(--sh-lg);
  --safe-b-legado:var(--safe-b);
  --card-pad:var(--sp-4);
  --borda:1px solid var(--line);
  --btn-r:var(--r-md);
  --btn-h-sm:40px;
  --campo-h:50px;
  --fs-titulo:var(--fs-screen);
  --fs-secao:var(--fs-block);
  --fs-valor:26px;
  --fs-corpo:var(--fs-body);
  --fs-desc:var(--fs-sec);
  --fs-legenda:var(--fs-caps);
}

/* ===========================================================
   Base comum aos três painéis
   =========================================================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--txt);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}
/* Números monetários sempre com largura fixa de dígito. */
.num,.money,[data-num]{font-variant-numeric:tabular-nums}
/* Foco visível no teclado, invisível no toque. */
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}