/* Amper Utilitários — design tokens
   Paleta e tipografia vêm do design pronto (Montagem LP Utilitários/
   amper-utilitarios-lp.html) — amarelo/preto/dourado são EXATAMENTE os
   mesmos valores do site de carros populares (não é coincidência, é a
   marca), só o cinza neutro mudou de tom (mais quente, puxado pra bege) e
   a fonte trocou de Lalezar+Changa pra Archivo em tudo. */
:root {
  /* Palette */
  --amper-yellow: #F3E23D;
  --amper-yellow-deep: #E5D02B;
  --amper-yellow-soft: #FBF6C9;
  --gold-deep: #8A6D00; /* amarelo legível em fundo claro (regra da marca) */

  --ink-900: #0A0A0A;
  --ink-800: #26241F;
  --ink-700: #3B3833;
  --ink-600: #57534B;
  --ink-500: #78736A;
  --ink-400: #A19B90;
  --ink-300: #C9C3B8;
  --ink-200: #E5E1D8;
  --ink-100: #F2EFE9;

  --surface: #F7F5F0;
  --surface-warm: #F0ECE3;
  --paper: #FFFFFF;

  --success: #1F7A3D;
  --success-soft: #D1FAE5;
  --danger: #EF4444;

  /* Type — Archivo pra tudo (display e corpo), substitui o par Lalezar/Changa
     do site de carros populares. Mono vira stack de sistema — o design não
     carrega fonte mono própria. */
  --font-display: 'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, monospace;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows — minimal, favor borders */
  --shadow-card: 0 1px 0 rgba(10,10,10,0.04), 0 12px 32px -18px rgba(10,10,10,0.18);
  --shadow-lift: 0 20px 60px -20px rgba(10,10,10,0.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Utility: yellow highlight.
   Padrão escolhido pelo Rian (2026-08-30): palavra colorida, sem fundo e sem
   traço — igual ao "Sem pressa" do hero. Em fundo escuro usa o amarelo puro
   (inline no hero); aqui, nos fundos claros, usa o dourado-profundo da marca
   (amarelo vivo em fundo claro é ilegível — regra do CLAUDE.md do projeto). */
.hl {
  color: var(--gold-deep);
}

/* Card de vidro escuro do hero — labels internos precisam clarear. */
.hero-sim-card .label { color: rgba(255,255,255,0.65); }

/* Scroll reveal for landing sections */
.reveal-on-scroll{opacity:0;transform:translateY(28px);transition:opacity 600ms ease,transform 600ms cubic-bezier(.2,.8,.2,1)}
.reveal-on-scroll.is-visible{opacity:1;transform:none}
.hero-sim-card{will-change:transform}
.hero-parallax-text{will-change:transform,opacity}

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }