/* ═══════════════════════════════════════════════════════════════════
   Park Aquático 3J — Design tokens (ESCURO padrão; claro via botão no
   header, que grava data-theme="light" + localStorage — ver tema.js).
   Compartilhado por mapa, cardápio, pedido e tour.
   Fonte: Gabarito (variável, self-hosted). Ícones: /img/icons.svg.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Gabarito';
  src: url('/fonts/gabarito-var.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gabarito';
  src: url('/fonts/gabarito-var-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── ESCURO (padrão do site; o botão no topo alterna) ── */
  --bg:            #0e1b24;
  --bg-2:          #162732;
  --bg-3:          #0a141b;
  --ink:           #e9eef1;
  --ink-2:         #a7b6bf;
  --ink-3:         #6d7e88;
  --linha:         #24363f;

  --marca:         #1d6d80;
  --marca-forte:   #0f4c5c;
  --sobre-marca:   #f2fbfd;

  /* No escuro o acento clareia e o texto do botão vira quase-preto (6:1) */
  --acento:        #f0680f;
  --acento-forte:  #f97f2e;
  --sobre-acento:  #231005;

  --ok:            #3fb872;
  --ok-suave:      #143526;
  --aviso:         #d9a13a;
  --aviso-suave:   #37290e;
  --erro:          #e06a5b;
  --erro-suave:    #3c1b16;
  --neutro:        #8b979e;
  --neutro-suave:  #1d2c34;

  --sombra-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);
  --sombra-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);

  /* ── Tokens independentes de tema ── */
  /* Texto corrido: fonte do sistema em telas 1x (o Gabarito variável não tem
     hinting e fica embaçado no Windows em monitor comum). Em telas de alta
     densidade (celular/retina) o Gabarito assume tudo — lá renderiza liso. */
  --fonte: system-ui, 'Segoe UI', Roboto, -apple-system, sans-serif;
  --fonte-display: 'Gabarito', system-ui, 'Segoe UI', sans-serif;
  --raio:          14px;
  --raio-pill:     999px;
  --ease: cubic-bezier(.16,1,.3,1);
  --t-rapido: .16s;
  --t-medio:  .3s;
  --z-sticky:  100;
  --z-drawer:  500;
  --z-modal:   600;
  --z-toast:   700;

  color-scheme: dark;
}

:root[data-theme="light"] {
  /* ── Superfícies (claro) ── */
  --bg:            #f4f2ec;   /* areia clara */
  --bg-2:          #ffffff;   /* superfície elevada: cards, barras */
  --bg-3:          #eae7de;   /* recesso: trilhas, chips inativos */
  --ink:           #14303f;   /* texto principal: azul-tinta profundo */
  --ink-2:         #51616c;   /* texto secundário */
  --ink-3:         #8a959d;   /* texto terciário / placeholders */
  --linha:         #dcd8cc;   /* hairlines */

  /* ── Marca ── */
  --marca:         #0f4c5c;   /* petróleo profundo (evolução do azul atual) */
  --marca-forte:   #0a3947;
  --sobre-marca:   #f2fbfd;   /* texto sobre a marca */

  /* ── Acento único (CTAs) — contraste AA com --sobre-acento ── */
  --acento:        #c2410c;   /* coral queimado (5.1:1 com o texto claro) */
  --acento-forte:  #9a3412;
  --sobre-acento:  #fff8f4;

  /* ── Estados semânticos (disponibilidade, status) ── */
  --ok:            #1e8a4c;
  --ok-suave:      #e0f2e7;
  --aviso:         #b07a10;
  --aviso-suave:   #f7ecd4;
  --erro:          #c03a2b;
  --erro-suave:    #f9e4e0;
  --neutro:        #77828a;
  --neutro-suave:  #e8e6e0;

  --sombra-1: 0 1px 2px rgba(20,48,63,.06), 0 4px 14px rgba(20,48,63,.07);
  --sombra-2: 0 2px 6px rgba(20,48,63,.08), 0 12px 32px rgba(20,48,63,.12);

  color-scheme: light;
}

@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  :root { --fonte: 'Gabarito', system-ui, 'Segoe UI', Roboto, sans-serif; }
}

/* Títulos e números de destaque sempre na fonte da marca (tamanho grande
   não sofre com a falta de hinting) */
h1, h2, h3, .secao-titulo, .codigo, .status-cod {
  font-family: var(--fonte-display);
}

/* ── Base ── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}
img { max-width: 100%; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Ícones (sprite /img/icons.svg) ── */
.ic {
  width: 1.15em; height: 1.15em;
  fill: currentColor;
  vertical-align: -0.2em;
  flex-shrink: 0;
}

/* ── Foco visível consistente ── */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Header padrão do site ── */
.site-header {
  background: var(--marca-forte);
  color: var(--sobre-marca);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.site-header img.logo { height: 40px; width: auto; flex-shrink: 0; }
.site-header h1 {
  margin: 0; font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.01em; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 640px) {
  .site-header { padding: 14px 24px; }
  .site-header img.logo { height: 46px; }
  .site-header h1 { font-size: 1.15rem; }
}
/* No celular os botões do header ficam só com o ícone (o nome do parque
   precisa do espaço; senão trunca/quebra). */
@media (max-width: 639px) {
  .site-header .rotulo { display: none; }
  .site-header .btn { width: 38px; height: 38px; padding: 0; gap: 0; }
  .site-header h1 { font-size: .98rem; }
  .site-header img.logo { height: 34px; }
}

/* ── Botões ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none;
  font-weight: 700; font-size: .92rem;
  padding: 10px 20px; border-radius: var(--raio-pill);
  transition: background var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-acento { background: var(--acento); color: var(--sobre-acento); box-shadow: var(--sombra-1); }
.btn-acento:hover { background: var(--acento-forte); }
.btn-marca { background: var(--marca); color: var(--sobre-marca); }
.btn-marca:hover { background: var(--marca-forte); }
.btn-quieto {
  background: transparent; color: var(--ink-2);
  border: 1.5px solid var(--linha);
}
.btn-quieto:hover { border-color: var(--ink-3); color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Botão de tema (no header): mostra o modo para o qual vai trocar ── */
.btn-tema {
  background: transparent; border: 1.5px solid rgba(255,255,255,.35);
  color: var(--sobre-marca); width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--raio-pill); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--t-rapido) var(--ease);
}
.btn-tema:hover { border-color: rgba(255,255,255,.7); }
.btn-tema .ic { width: 18px; height: 18px; }
.btn-tema .ic-lua { display: none; }
:root[data-theme="light"] .btn-tema .ic-sol { display: none; }
:root[data-theme="light"] .btn-tema .ic-lua { display: block; }

/* ── Reduced motion: tudo colapsa para instantâneo ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}