/* =============================================================================
   Alex Cars — tokens.css
   Design tokens do site. Cada cor da marca traz a PROCEDENCIA: de onde ela veio.

   A base vem da foto da fachada enviada pelo cliente (224x124 px, foto noturna
   com dominante azul). A correcao da dominante esta explicitada abaixo.

   Analise da foto:
     fundo da fachada .... (14, 13, 30)  -> quase preto, empurrado para o azul
     letras claras ....... (115, 98, 123) media das areas de letreiro
     matiz media ......... 244 graus (azul-violeta) = dominante da luz, nao da marca
     matiz 300-350 ....... 759 px concentrados em x 0,07-0,62 / y 0,20-0,52,
                           exatamente a area do swoosh do carro.
                           Como o letreiro esta sob dominante azul e o swoosh
                           ficou magenta, a cor original e QUENTE. Vermelho e a
                           leitura mais provavel.

   Identidade: preto + prata/branco + um vermelho de acento.
   Pendencia registrada em tasks.md: confirmar o vermelho exato com o cliente.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------- superficies */
  --cor-fundo: #0b0e12;          /* fundo da fachada sem a dominante azul */
  --cor-fundo-2: #12161c;
  --cor-fundo-3: #1a1f27;
  --cor-fundo-alto: #232933;
  --cor-grade: rgba(201, 207, 214, 0.055);  /* malha de fundo (cabine de pintura) */

  /* -------------------------------------------------------------------- linhas */
  --cor-linha: rgba(201, 207, 214, 0.13);
  --cor-linha-forte: rgba(201, 207, 214, 0.26);

  /* --------------------------------------------------------------------- texto */
  --cor-texto: #e8edf2;
  --cor-texto-fraco: #97a1ad;
  --cor-texto-minimo: #7b8694;
  --cor-branco: #f7fafc;
  --cor-prata: #c9cfd6;          /* media das letras do letreiro, sem o azul */

  /* --------------------------------------------------------------------- marca */
  --cor-vermelho: #d62828;       /* deduzido do swoosh (matiz 300-350 na foto) */
  --cor-vermelho-claro: #ff563e;
  --cor-vermelho-fundo: rgba(214, 40, 40, 0.12);
  --grad-vermelho: linear-gradient(180deg, #ff563e 0%, #d62828 55%, #9e1c1c 100%);
  --grad-prata: linear-gradient(180deg, #ffffff 0%, #d7dde3 45%, #9aa4b0 100%);
  --grad-superficie: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 60%);

  /* ------------------------------------------------------------------ tipografia */
  --fonte-titulo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-tecnica: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", monospace;

  --tam-1: clamp(2.1rem, 5.4vw, 3.9rem);    /* h1 */
  --tam-2: clamp(1.6rem, 3.2vw, 2.35rem);   /* h2 */
  --tam-3: clamp(1.12rem, 1.6vw, 1.32rem);  /* h3 */
  --tam-texto: clamp(1rem, 1.05vw, 1.06rem);
  --tam-pequeno: 0.9rem;
  --tam-tecnica: 0.745rem;

  --altura-linha: 1.62;
  --espaco-letra-tecnica: 0.16em;
  --peso-titulo: 800;

  /* -------------------------------------------------------------------- espaco */
  --e-1: 0.35rem;
  --e-2: 0.7rem;
  --e-3: 1.05rem;
  --e-4: 1.6rem;
  --e-5: 2.4rem;
  --e-6: 3.6rem;
  --e-7: 5.2rem;
  --e-8: 7.4rem;

  --largura: 1140px;
  --largura-texto: 66ch;

  /* --------------------------------------------------------------------- formas */
  --raio: 3px;
  --raio-g: 4px;
  --sombra: 0 18px 44px -22px rgba(0, 0, 0, 0.9);
  --sombra-alta: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
  --anel-foco: 0 0 0 3px rgba(255, 86, 62, 0.55);

  /* ------------------------------------------------------------------ movimento */
  --transicao: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transicao-lenta: 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}