/* ==========================================================================
   ELETRONLINE TRUCK PARTS — DESIGN TOKENS
   Playbook: Dev-tools/infra x precisão industrial automotiva (MESTRE2X0 V.7)
   1 canvas quase-preto com matiz de marca · 1 cor de ação · raio em dois níveis
   fixos (0px estrutural / pill em ação) · zero sombra, elevação por superfície.
   ========================================================================== */

:root {
  /* ---- Canvas & superfícies (degradê offwhite → light gray, matiz teal, nunca branco puro) ---- */
  --canvas-top: #f8f7f3;    /* topo do degradê — offwhite quente */
  --canvas-bottom: #e7eae8; /* base do degradê — light gray com matiz teal */
  --carbon: #f8f7f3;        /* canvas base (compat.: mesmo tom do topo do degradê) */
  --graphite: #edefec;      /* superfície elevada 1 (seções alternadas) */
  --steel: #ffffff;         /* superfície elevada 2 (cards) */
  --steel-strong: #eef1ee;  /* superfície elevada 3 (hover / core interno) */
  --hairline: #dadfdb;      /* borda hairline padrão */
  --hairline-strong: #bcc5c0;

  /* ---- Neutros nomeados (texto) ---- */
  --paper: #142320;         /* texto primário, tinta quase-preta com matiz teal */
  --fog: #47564f;           /* texto secundário */
  --ash: #5e6d66;           /* texto terciário / legendas */
  --ash-dim: #7b8981;       /* texto desabilitado / labels decorativos grandes (uso restrito a texto grande, ≥3:1) */

  /* ---- Superfícies fixas (independentes do tema — chips sobre fotos, lightbox) ---- */
  --on-dark: #f3f6f4;       /* texto/ícone claro sobre chips escuros fixos */
  --scrim: #101c19;         /* fundo escuro fixo: overlays de mídia e lightbox */

  /* ---- Cor de ação (única, uso exclusivo em CTA / estado ativo) ---- */
  --accent: #1fd6c9;
  --accent-strong: #16b3a8;
  --accent-dim: #0f8880;
  --accent-ink: #062420;    /* texto sobre fundo accent (contraste) */
  --accent-soft: rgba(31, 214, 201, 0.10);
  --accent-glow: rgba(15, 136, 128, 0.22);

  /* ---- Tipografia ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Escala nomeada — razão ~1.2 (Minor Third), clamp fluido */
  --fs-display: clamp(2.75rem, 2rem + 4.2vw, 6.25rem);
  --fs-h1: clamp(2.25rem, 1.8rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1.4vw, 2.75rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.02rem + 0.3vw, 1.35rem);
  --fs-body-lg: clamp(1.05rem, 1rem + 0.2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-caption: 0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-micro: 0.6875rem;

  /* Tracking — negativo cresce com o tamanho, positivo em uppercase pequeno */
  --tr-display: -0.035em;
  --tr-h1: -0.03em;
  --tr-h2: -0.02em;
  --tr-h3: -0.015em;
  --tr-body: -0.006em;
  --tr-eyebrow: 0.16em;

  /* ---- Raio — dois níveis fixos, zero exceções ---- */
  --radius-structural: 0px;   /* cards, imagens, painéis, inputs, seções */
  --radius-action: 999px;     /* botões, badges, eyebrows, pills de nav */

  /* ---- Espaçamento — unidade base 8px ---- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --section-pad: clamp(4.5rem, 3.5rem + 4vw, 9rem);

  /* ---- Easing customizado (XVIII.2) — nunca easings padrão do CSS ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Durações — UI abaixo de 300ms ---- */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --content-max: 1320px;
  --border-w: 1px;
}

@media (prefers-contrast: more) {
  :root {
    --hairline: #7c8b84;
    --hairline-strong: #465650;
    --fog: #1c2b27;
    --ash: #35443e;
  }
}