/*
  TARGET Check-up Automotivo — Design Tokens
  Custom properties only. No selectors beyond :root/[data-theme] live here.
  This file is the single source of truth for porting the design to the
  future WordPress theme — every color/type/space value used anywhere in
  layout.css or components.css must trace back to a token defined here.
*/

:root {
  /* ---- Color — brand-derived from the logo and the chancela seal ---- */
  --grafite-900: #1A1B1E;   /* fundo escuro principal (hero, seções de prova/CTA) */
  --cinza-100: #F2F3F5;     /* fundo claro das seções de conteúdo */
  --branco: #FFFFFF;
  --vermelho-target: #C21E1E; /* CTAs primários, links ativos — usar com contenção */
  --prata-cromado: #A9AEB6;    /* divisórias, texto secundário */
  --verde-tecnico: #4C8B6B;    /* status "conforme" */
  --ambar-tecnico: #D98E2B;    /* status "requer atenção" */
  --texto-900: #1A1B1E;        /* texto principal sobre fundo claro */

  /* Tons derivados (não novas cores de marca — apenas variações de opacidade/mistura das acima) */
  --vermelho-target-dark: #9A1717;
  --grafite-700: #23262E;
  --grafite-600: #33373F;
  --linha-clara: #DCDFE3;
  --linha-escura: #2B2E36;
  --texto-on-dark: #F5F6F7;
  --texto-on-dark-muted: #9CA1AB;
  --texto-muted: #5B5F68;

  /* ---- Tipografia ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  --fs-mono-xs: 0.75rem;
  --fs-mono-sm: 0.875rem;
  --fs-mono-md: 1rem;
  --fs-mono-lg: 1.5rem;
  --fs-mono-xl: 2rem;

  --fs-body-sm: 0.75rem;
  --fs-body-md: 1rem;
  --fs-body-lg: 1.25rem;

  --fs-h1: 3.5rem;
  --fs-h2: 2.125rem;
  --fs-h3: 1.875rem;
  --fs-h4: 1.5rem;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.5;

  --tracking-display: 0.01em;
  --tracking-eyebrow: 0.14em;

  /* ---- Espaçamento (escala 8px) ---- */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ---- Forma / elevação ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 2px 8px rgba(20, 22, 26, 0.12);
  --shadow-md: 0 8px 24px rgba(20, 22, 26, 0.18);
  --shadow-lg: 0 16px 48px rgba(20, 22, 26, 0.28);

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --scroll-offset: 74px; /* mobile: compensa a altura do .site-header fixo ao rolar até uma âncora */
  --scroll-offset-desktop: 71px; /* >=900px: idem, .site-header tem outra altura nesse breakpoint */

  /* ---- Movimento ---- */  
  --transition-base: 300ms ease; 

  /* ---- z-index ---- */
  --z-header: 100;
  --z-whatsapp: 90;
  --z-overlay: 200;

  /* Breakpoints de referência (documentação — custom properties não funcionam
     dentro de @media; mobile-first, ~375 / 768 / 1440) */
}