/* =============================================================================
   tokens.css — Arcoverde Auto Service
   -----------------------------------------------------------------------------
   Só definições de design: cor, tipografia, espaço, raio, sombra, movimento.
   Nenhuma regra visual mora aqui, para que trocar a identidade da marca seja
   editar um arquivo só.

   Identidade: preto/grafite + anel verde neon (a marca do perfil comercial).
   ============================================================================= */

:root {
  /* ------------------------------------------------------------ cor da marca */
  --carvao:        #070a09;
  --grafite:       #0d100f;
  --grafite-2:     #121715;
  --grafite-3:     #182019;

  --neon:          #39ff7a;
  --neon-forte:    #1ee05f;
  --neon-escuro:   #0c8a42;
  --neon-fraco:    rgba(57, 255, 122, 0.10);
  --neon-medio:    rgba(57, 255, 122, 0.18);
  --neon-borda:    rgba(57, 255, 122, 0.28);

  --prata:         #a8b2ac;
  --prata-claro:   #cad3ce;
  --branco:        #f4f8f5;

  /* ------------------------------------------------------------- texto */
  --texto:         #e9efeb;
  --texto-suave:   #a7b1ab;
  --texto-fraco:   #7c8680;

  /* -------------------------------------------------------- superfícies */
  --superficie:      rgba(255, 255, 255, 0.035);
  --superficie-alta: rgba(255, 255, 255, 0.065);
  --borda:           rgba(255, 255, 255, 0.09);
  --borda-forte:     rgba(255, 255, 255, 0.16);

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

  --texto-pp:  0.78rem;
  --texto-p:   0.92rem;
  --texto-m:   1rem;
  --texto-g:   1.12rem;

  --titulo-p:  clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  --titulo-m:  clamp(1.7rem, 1.3rem + 1.9vw, 2.55rem);
  --titulo-g:  clamp(2.1rem, 1.5rem + 3.4vw, 3.65rem);

  --altura-linha: 1.62;
  --peso-forte:   800;

  /* ------------------------------------------------------------- espaço */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  --container: 1140px;
  --respiro:   clamp(1.1rem, 4vw, 2.5rem);
  --secao-y:   clamp(3.4rem, 7vw, 6rem);

  /* -------------------------------------------------- forma e profundidade */
  --raio-p: 10px;
  --raio:   16px;
  --raio-g: 22px;
  --raio-redondo: 999px;

  --sombra:        0 18px 44px rgba(0, 0, 0, 0.45);
  --sombra-neon:   0 12px 34px rgba(57, 255, 122, 0.22);
  --brilho-neon:   0 0 0 1px var(--neon-borda), 0 0 26px rgba(57, 255, 122, 0.14);

  /* ------------------------------------------------------------ movimento */
  --transicao: 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --transicao-lenta: 600ms cubic-bezier(0.2, 0.7, 0.3, 1);

  --altura-topo: 74px;
  --z-topo: 50;
  --z-flutuante: 60;
}