/* ==========================================================================
   tokens.css — Design tokens (Briefing, Seção 2)
   Fonte única de verdade. Nenhum valor de cor, tamanho de fonte, espaçamento,
   raio, sombra ou curva de animação deve ser escrito fora daqui.
   ========================================================================== */

:root {
  /* --- Cores (paleta da marca) ------------------------------------------ */
  --navy:        #0B2F4A; /* fundo primário, seções escuras */
  --navy-deep:   #06273D; /* mesma família, tom usado nas telas do Figma */
  --steel-blue:  #4A93C1; /* apoio, reflexos, links, detalhes */
  --amber-gold:  #D9B310; /* destaque, CTA, selo de autoridade */
  --near-black:  #1D1D1D; /* texto sobre claro, fundos alternativos */
  --warm-white:  #F2F2F2; /* fundo claro, texto sobre escuro */
  --light-gray:  #F4F4F4; /* superfície clara das telas do Figma */

  /* --- Superfícies e linhas derivadas da paleta ------------------------- */
  --surface-dark:       rgba(242, 242, 242, 0.05);
  --surface-dark-hover: rgba(242, 242, 242, 0.09);
  --surface-light:      rgba(11, 47, 74, 0.04);
  --surface-amber:      rgba(217, 179, 16, 0.10);
  --line-on-dark:       rgba(74, 147, 193, 0.32);
  --line-on-light:      rgba(11, 47, 74, 0.18);
  --line-on-amber:      rgba(6, 39, 61, 0.24);
  --line-on-photo:      rgba(242, 242, 242, 0.32);
  /* Tudo derivado de --navy-deep (#06273D): véu do hero, emenda com a seção
     seguinte e sombra do título. Consolidado aqui para que o mesmo azul una
     hero e autoridade sem corte visível. */
  --navy-deep-0:    rgba(6, 39, 61, 0);
  --hero-veil-from: rgba(6, 39, 61, 0.92);
  --hero-veil-to:   rgba(6, 39, 61, 0.64);
  --hero-shadow:    rgba(6, 39, 61, 0.60);

  /* --- Escala tipográfica (base 8, coerente entre TODAS as seções) ------- */
  --fs-display: clamp(36px, 5vw, 64px);  /* headline do hero */
  --fs-h2:      clamp(28px, 4vw, 40px);  /* títulos de seção */
  --fs-h3:      24px;                    /* títulos de card */
  --fs-lead:    20px;                    /* subheadline, parágrafo de abertura */
  --fs-body:    16px;                    /* corpo padrão */
  --fs-small:   14px;                    /* legendas, rodapé */
  --fs-price:   clamp(40px, 5vw, 56px);  /* valor nos cards de preço */

  --lh-tight:   1.1;  /* headlines */
  --lh-snug:    1.3;  /* subtítulos */
  --lh-body:    1.6;  /* corpo */

  --tracking-wide:  0.16em; /* faixa "carros · motos · caminhões" */
  --tracking-micro: 0.08em; /* eyebrows, rótulos curtos */

  /* --- Espaçamento (grid de 8pt, sem exceção) --------------------------- */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8:  128px; /* padding vertical entre seções grandes no desktop */
  --space-9:  160px;

  /* --- Grid de layout: 8 colunas ---------------------------------------- */
  --grid-columns: 8;
  --grid-gutter:  var(--space-3);
  --container:    1440px; /* largura do frame das telas do Figma */
  --container-pad: var(--space-3);

  /* --- Bento grid (base reutilizável) ----------------------------------- */
  --bento-columns:    1;
  --bento-gap:        var(--space-2);
  --bento-row:        auto;
  --bento-min-height: 0px;

  /* --- Altura do header (âncoras e offsets dependem disto) -------------- */
  --header-h: 72px;

  /* --- Outros tokens ---------------------------------------------------- */
  --radius-sm:   8px;   /* botões, inputs */
  --radius:      16px;  /* cards */
  --radius-lg:   24px;  /* tiles de bento, mídia dos cards de valores */
  --radius-pill: 999px; /* chips, botão back-to-top */

  --border-width: 2px;
  --focus-width:  3px;

  --shadow-soft:   0 8px 32px rgba(0, 0, 0, 0.24);
  --shadow-lift:   0 16px 48px rgba(6, 39, 61, 0.32);
  --shadow-header: 0 2px 16px rgba(6, 39, 61, 0.20);

  /* --- Movimento -------------------------------------------------------- */
  --dur-1:   160ms; /* micro-estados: hover, focus */
  --dur-2:   280ms; /* transições de componente */
  --dur-3:   720ms; /* entrada no scroll */
  --ease-standard:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  --z-header:  100;
  --z-nav:      90;
  --z-to-top:   80;
}

@media (max-width: 599px) {
  :root {
    --container-pad: var(--space-2); /* telas estreitas: gutter de 16px */
  }
}

@media (min-width: 900px) {
  :root {
    --grid-gutter:   var(--space-4);
    --container-pad: var(--space-5);
    --header-h:      112px; /* 14 × 8pt, proporção da tela "menu" */
  }
}