/* ============================================================
   SR ASSISTÊNCIA DE VEÍCULOS — TOKENS
   Única fonte de verdade para cor, tipografia, ritmo e tempo.
   ============================================================ */

:root {
  /* --- Base cromática da marca (uso exclusivo) --- */
  --preto: #141414;   /* Preto Asfalto      */
  --amarelo: #FCD532; /* Amarelo Socorro    */
  --off: #FCFAFB;     /* Off-White Assistência */


  /* Derivados (apenas transparências das cores base) */
  --preto-elev: #1B1B1B;
  --off-72: rgba(252, 250, 251, .72);
  --off-56: rgba(252, 250, 251, .56);
  --preto-70: rgba(20, 20, 20, .70);
  --preto-55: rgba(20, 20, 20, .55);
  --linha-dark: rgba(252, 250, 251, .16);
  --linha-light: rgba(20, 20, 20, .16);
  --amarelo-24: rgba(252, 213, 50, .24);

  /* --- Tipografia --- */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* o título respeita a ALTURA da tela também: em telas baixas ele
     encolhe em vez de empurrar o conteúdo para cima da S10 */
  --fs-hero:  clamp(2.6rem, min(8.4vw, 11vh), 8rem);
  --fs-h2:    clamp(1.85rem, 4.2vw, 3.75rem);
  --fs-h3:    clamp(1.1rem, 1.5vw, 1.45rem);
  --fs-lead:  clamp(1.02rem, 1.35vw, 1.3rem);
  --fs-body:  clamp(0.975rem, 1.02vw, 1.075rem);
  --fs-label: 0.75rem;

  --ls-tight: -0.035em;
  --ls-label: 0.16em;

  /* --- Ritmo / layout --- */
  --container: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(80px, 11vh, 168px);
  --stack: clamp(20px, 2.4vw, 34px);

  /* --- Movimento --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .25s;
  --t-med: .45s;
  --t-slow: .8s;
  --t-hero: .5s;   /* entrada do hero: mais curta, para a headline ler antes */

  --radius: 3px;
  --header-h: 78px;

  /* --- S10 e faixa de estrada ---
     A proporção da imagem é 1800x599 (0.3328). Derivar a faixa da
     largura real da S10 garante que o texto NUNCA colida com ela:
     o hero e o manifesto reservam exatamente esse espaço. */
  /* Opacidade da foto de fundo do hero — ajuste só aqui */
  --hero-bg-opacidade: .35;

  --truck-ratio: 0.3328;
  --truck-w: clamp(280px, min(42vw, 58vh), 720px);
  --truck-h: calc(var(--truck-w) * var(--truck-ratio));
  --truck-bottom: clamp(18px, 3vh, 34px);
  --road-space: calc(var(--truck-h) + var(--truck-bottom) + 10px);
}

/* ============================================================
   TEMAS DE SEÇÃO
   A regra de contraste do briefing vira sistema: cada seção
   declara seu tema e todos os componentes herdam as cores certas.
   ============================================================ */

.section--dark {
  --bg: var(--preto);
  --title: var(--amarelo);
  --text: var(--off);
  --muted: var(--off-72);
  --line: var(--linha-dark);
  --icon: var(--amarelo);
  --btn-bg: var(--amarelo);
  --btn-fg: var(--preto);
  --btn-ghost: var(--off);
  --chip-bg: rgba(252, 250, 251, .06);
}

.section--light {
  --bg: var(--off);
  --title: var(--preto);
  --text: var(--preto);
  --muted: var(--preto-70);
  --line: var(--linha-light);
  --icon: var(--amarelo);
  --btn-bg: var(--preto);
  --btn-fg: var(--off);
  --btn-ghost: var(--preto);
  --chip-bg: var(--preto);
}

.section--accent {
  --bg: var(--amarelo);
  --title: var(--preto);
  --text: var(--preto);
  --muted: var(--preto-70);
  --line: rgba(20, 20, 20, .26);
  --icon: var(--preto);
  --btn-bg: var(--preto);
  --btn-fg: var(--amarelo);
  --btn-ghost: var(--preto);
  --chip-bg: rgba(20, 20, 20, .1);
}