/* ==========================================================================
   TRUST CENTER — DESIGN TOKENS v1.0
   Mecânica automotiva · Câmbios manuais e automáticos · Motores
   Fonte única de verdade para site, redes sociais e materiais.
   ========================================================================== */

:root {
  /* ----- CORES · MARCA ----- */
  --trust-red:        #E4201D;  /* Vermelho Trust — cor oficial do logo */
  --trust-red-dark:   #B01512;  /* Hover / pressed */
  --trust-red-deep:   #7A0D0B;  /* Sombras, duotone */
  --trust-black:      #0A0A0A;  /* Preto Pista — fundo padrão */
  --trust-white:      #FFFFFF;

  /* ----- CORES · NEUTROS (Graxa) ----- */
  --gray-950: #111111;
  --gray-900: #1A1A1A;  /* superfícies elevadas */
  --gray-800: #262626;  /* cards, inputs */
  --gray-700: #3A3A3A;  /* bordas */
  --gray-500: #6E6E6E;  /* texto desabilitado */
  --gray-400: #9A9A9A;  /* texto secundário */
  --gray-200: #D6D6D6;  /* texto sobre escuro (corpo) */
  --gray-100: #EDEDED;  /* fundos claros */

  /* ----- CORES · SEMÂNTICAS ----- */
  --color-bg:            var(--trust-black);
  --color-surface:       var(--gray-900);
  --color-surface-2:     var(--gray-800);
  --color-border:        var(--gray-700);
  --color-text:          var(--trust-white);
  --color-text-body:     var(--gray-200);
  --color-text-muted:    var(--gray-400);
  --color-accent:        var(--trust-red);
  --color-success:       #2E9E4F;
  --color-warning:       #E8A020;
  --color-error:         var(--trust-red);

  /* ----- TIPOGRAFIA ----- */
  /* Display: títulos de impacto — sempre CAIXA ALTA, itálico opcional */
  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --font-display-stretch: 125%;          /* Archivo Expanded */
  /* Corpo: leitura em site e legendas longas */
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  /* Técnica: números, specs, preços, labels tipo painel */
  --font-tech: 'Chakra Petch', 'Courier New', monospace;

  /* Escala tipográfica (mobile-first, use clamp no site) */
  --text-xs:   0.75rem;   /* 12 — labels, legendas */
  --text-sm:   0.875rem;  /* 14 — texto de apoio */
  --text-base: 1rem;      /* 16 — corpo */
  --text-lg:   1.125rem;  /* 18 — corpo destaque */
  --text-xl:   1.5rem;    /* 24 — subtítulo */
  --text-2xl:  2rem;      /* 32 — título de seção */
  --text-3xl:  3rem;      /* 48 — título de página */
  --text-4xl:  4.5rem;    /* 72 — hero */
  --text-5xl:  6.5rem;    /* 104 — display gigante */

  --leading-tight: 0.95;   /* títulos display */
  --leading-snug:  1.2;    /* subtítulos */
  --leading-body:  1.6;    /* corpo */

  --tracking-display: 0.01em;
  --tracking-label:   0.14em;  /* labels caixa alta */

  /* ----- ESPAÇAMENTO (base 4px) ----- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ----- LAYOUT ----- */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --grid-gap: var(--space-6);

  /* ----- FORMA ----- */
  /* A marca é angular: raios pequenos ou zero. Nada de cantos muito redondos. */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;     /* máximo permitido em cards */
  --radius-full: 999px;   /* apenas pills/badges */
  --skew: -8deg;          /* inclinação padrão de elementos "velocidade" */

  /* ----- ELEVAÇÃO / EFEITOS ----- */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-red:  0 4px 32px rgba(228, 32, 29, 0.35); /* glow em CTAs */
  --overlay-photo: linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.85) 100%);
  --duotone-red: linear-gradient(rgba(228,32,29,0.55), rgba(122,13,11,0.75));

  /* ----- MOVIMENTO ----- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
}

/* ----- PADRÃO QUADRICULADO (bandeirada) ----- */
/* Uso: divisores de seção, detalhes. Nunca como fundo de texto longo. */
.checker {
  --checker-size: 12px;
  --checker-color: var(--trust-white);
  height: calc(var(--checker-size) * 2);
  background:
    repeating-conic-gradient(var(--checker-color) 0% 25%, transparent 0% 50%)
    0 0 / calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
}
.checker--red   { --checker-color: var(--trust-red); }
.checker--black { --checker-color: var(--trust-black); }