/* =========================================================================
   globals.css — variáveis de tema + estilos custom que o Tailwind não cobre
   bem (labels com conectores, anel interno do medalhão, marcadores de lista,
   filtro de logo).
   As cores abaixo são a FONTE ÚNICA de verdade: o tailwind.config.js aponta
   theme.extend.colors para estas variáveis, então mudar uma cor aqui
   atualiza todas as classes utilitárias (bg-navy, text-copper, etc.).
   ========================================================================= */
:root {
  --navy: #333c4e;
  --navy-deep: #272e3d;
  --copper: #b0784a;
  --copper-soft: #c99a6e;
  --paper: #f7f4ee;
  --paper-2: #eee8dc;
  --ink: #2b2f38;
  --line: rgba(51, 60, 78, 0.14);
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Leve tracking nos títulos serifados (parte da identidade tipográfica) */
h1,
h2,
h3 {
  letter-spacing: 0.005em;
}

/* Label com espaçamento largo, ecoando G A S T R O N Ô M I C O do logo */
.tracked {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 12px;
  color: var(--copper);
}

/* Label com traços conectores nas laterais (::before / ::after) */
.rule-label {
  display: flex;
  align-items: center;
  gap: 18px;
}
.rule-label::before,
.rule-label::after {
  content: "";
  height: 1px;
  width: 42px;
  background: var(--copper);
  opacity: 0.6;
}

/* Medalhão "600 pessoas" — anel interno de cobre via pseudo-elemento */
.band-medallion::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(176, 120, 74, 0.4);
  border-radius: 50%;
}

/* Lista de diferenciais (band escura) — marcador travessão em cobre */
.band-list li::before {
  content: "—";
  color: var(--copper-soft);
}

/* Footer — logo em branco via filtro */
.footer-logo {
  filter: brightness(0) invert(1);
}