/* Carrossauro — tokens compartilhados (fontes, cores do letreiro, três paletas).
   Usado pela página dos bancos (estilo.css) e pelo mapa ao vivo (aovivo.css). Decisões em DESIGN.md. */

@font-face {
  font-family: "Lilita One";
  src: url("fonts/lilita-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* cores das letras do letreiro do Carrossauro */
  --vermelho: oklch(0.55 0.2 27);
  --amarelo: oklch(0.88 0.16 95);
  --verde: oklch(0.52 0.15 150);
  --verde-claro: oklch(0.78 0.16 145);
  --roxo: oklch(0.5 0.15 330);

  /* marcas dos botões (cores oficiais) */
  --zap: #25d366;
  --zap-texto: #008069;
  --google-texto: #3c4043;

  --f-marca: "Lilita One", "Figtree", sans-serif;
  --f-texto: "Figtree", ui-sans-serif, sans-serif;

  /* escala 1.25, base 17px */
  --t-0: 0.8125rem;
  --t-1: 1.0625rem;
  --t-2: 1.3125rem;
  --t-3: 1.65rem;
  --t-4: clamp(2rem, 8.6vw, 3rem);

  --r-1: 16px;
  --r-2: 24px;
  --doca-h: 70px;
  --seguro: env(safe-area-inset-bottom, 0px);
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);

  --abre: 0; /* leque das fotos, controlado pelo passeio.js */

  /* ---- paleta BRANCA (padrão) ---- */
  --fundo: oklch(0.97 0.012 95);
  --texto: oklch(0.24 0.03 235);
  --texto-2: oklch(0.38 0.03 235);
  --titulo: var(--verde);
  --realce: var(--verde);
  --vidro: oklch(1 0 0 / 0.5);
  --vidro-forte: oklch(1 0 0 / 0.72);
  --vidro-linha: oklch(1 0 0 / 0.7);
  --vidro-filtro: blur(22px) saturate(1.7) brightness(1.12);
  --linha-grade: oklch(0.24 0.03 235 / 0.14);
  --tom-topo: oklch(0.98 0.01 95 / 0.92);
  --tom-base: oklch(0.98 0.01 95 / 0.55);
  --sombra: 0 14px 34px -18px oklch(0.25 0.04 235 / 0.45);
}

:root[data-paleta="verde"] {
  --fundo: oklch(0.42 0.12 150);
  --texto: oklch(0.99 0.005 95);
  --texto-2: oklch(0.93 0.03 140);
  --titulo: var(--amarelo);
  --realce: var(--amarelo);
  --vidro: oklch(0.4 0.12 150 / 0.42);
  --vidro-forte: oklch(0.36 0.11 150 / 0.62);
  --vidro-linha: oklch(1 0 0 / 0.26);
  --vidro-filtro: blur(22px) saturate(1.6);
  --linha-grade: oklch(1 0 0 / 0.2);
  --tom-topo: oklch(0.4 0.12 150 / 0.88);
  --tom-base: oklch(0.36 0.11 150 / 0.6);
  --sombra: 0 14px 34px -18px oklch(0.15 0.06 150 / 0.7);
}

:root[data-paleta="azul"] {
  --fundo: oklch(0.55 0.15 245);
  --texto: oklch(0.99 0.005 95);
  --texto-2: oklch(0.94 0.03 230);
  --titulo: var(--amarelo);
  --realce: var(--amarelo);
  --vidro: oklch(0.5 0.15 245 / 0.4);
  --vidro-forte: oklch(0.45 0.14 245 / 0.62);
  --vidro-linha: oklch(1 0 0 / 0.28);
  --vidro-filtro: blur(22px) saturate(1.6);
  --linha-grade: oklch(1 0 0 / 0.22);
  --tom-topo: oklch(0.52 0.15 245 / 0.88);
  --tom-base: oklch(0.45 0.14 245 / 0.6);
  --sombra: 0 14px 34px -18px oklch(0.2 0.08 250 / 0.7);
}