/* =====================================================================
   tokens.css — variáveis da direção (DIRECAO §R, §3, §4, §5, §7).
   REVISÃO 13/10: paleta derivada do AZUL-MARINHO do símbolo oficial
   (degradê #0B2A6B → #061A45), escala tipográfica contida e espaçamento
   vertical moderado. Os nomes antigos (--cobalto, --noite…) continuam
   valendo como apelidos, para as páginas que ainda os usam.
   Site claro por definição; seções em --noite fazem o contraponto.
   ===================================================================== */
:root {
  color-scheme: light;

  /* ---------- Marca (símbolo oficial: marca/simbolo-*.png|svg) ---------- */
  --marinho: #0B2A6B;          /* cor da marca; AÇÃO e FOCO — 12,3:1 sobre papel; branco sobre ele 13,5:1 */
  --marinho-press: #071D4E;    /* hover/pressionado do botão primário */
  --marinho-profundo: #061A45; /* ponta escura do degradê do logo: seções escuras e rodapé */
  --azul-claro: #A9C1FF;       /* ação e foco SOBRE fundo marinho — 9,5:1 sobre --noite */
  --azul-nevoa: #E6ECF8;       /* fundo de etiqueta e opção selecionada clara */

  /* ---------- Neutros ---------- */
  --papel: #F6F4EF;            /* fundo geral */
  --papel-2: #ECE8E0;          /* faixas alternadas e placeholder de foto */
  --superficie: #FFFFFF;       /* painel de busca, campos */
  --tinta: #0F1830;            /* texto — 16,4:1 sobre papel */
  --tinta-2: #4F5668;          /* legendas e metadados — 6,7:1 papel; 6,0:1 papel-2 */
  --fio: rgba(15, 24, 48, .14);
  --fio-forte: rgba(15, 24, 48, .32);
  --laterita: #9A4A2B;         /* raro: "Locação", "Novo" — 5,6:1 papel */
  --branco: #FFFFFF;

  /* Sobre marinho */
  --noite: var(--marinho-profundo);
  --noite-2: #B9C3DA;          /* texto secundário sobre noite — 9,6:1 */
  --fio-noite: rgba(255, 255, 255, .16);
  --veu: rgba(6, 26, 69, .88); /* véu marinho na faixa de legenda sobre foto: com .88, texto de 13 px passa no AA mesmo sobre parede branca */

  /* Apelidos da v1 (não use em código novo) */
  --cobalto: var(--marinho);
  --cobalto-press: var(--marinho-press);
  --cobalto-claro: var(--azul-claro);

  /* ---------- Tipografia ---------- */
  --f-serifa: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Escala CONTIDA: h1/display ≤ 64 px no desktop, 36 px no celular. */
  --t-display: clamp(2.25rem, 1.55rem + 2.4vw, 4rem);      /* 36 → 64 */
  --t-h1: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);            /* 32 → 52 */
  --t-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.5rem);         /* 26 → 40 */
  --t-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);      /* 19 → 22 */
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);        /* 17 → 20 */
  --t-body: clamp(1rem, .97rem + .1vw, 1.0625rem);         /* 16 → 17 */
  --t-dado: clamp(1.5rem, 1.3rem + .8vw, 2.125rem);        /* 24 → 34 */
  --t-preco: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);   /* 18 → 21 */
  --t-small: .875rem;
  --t-label: .75rem;

  --medida: 62ch;

  /* ---------- Grid e espaço ---------- */
  --margem: clamp(16px, 4vw, 56px);       /* 16 px no celular */
  --gutter: clamp(16px, 2vw, 32px);
  --largura-max: 1360px;
  --secao: clamp(48px, 5vw + 12px, 112px); /* 48 celular · ~80 em 1366 · ~108 em 1920 */
  --respiro-titulo: clamp(24px, 2.5vw, 40px);
  --cols: 4;

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px;
  --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-24: 96px;

  --cabecalho-h: 64px;
  --raio-controle: 4px;
  --raio-painel: 6px;
  --alvo: 48px;

  /* ---------- Movimento ---------- */
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-estado: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-saida: cubic-bezier(0.55, 0, 1, 0.45);
  --d-micro: 150ms;
  --d-link: 180ms;
  --d-painel-in: 320ms;
  --d-painel-out: 220ms;
  --d-cartao: 600ms;
}

@media (min-width: 640px) {
  :root { --cols: 8; }
}
@media (min-width: 1024px) {
  :root { --cols: 12; --cabecalho-h: 76px; }
}