/* Tracktor Estética · todas as cores do produto. O resto do CSS e o JS só usam estas variáveis. */
:root {
  --fundo: #FFFFFF;
  --superficie: #F7F5F0;
  --fio: #E8E2D6;
  --texto: #0F1B2D;
  --texto-2: #5B6474;
  --dourado: #B08D57;
  --dourado-texto: #8C6B3A;
  --noite: #0F1B2D;
  --malha: #D4B47A;
  --perigo: #B4463C;

  /* derivadas (mesma família, só transparências e tons) */
  --branco: #FFFFFF;
  --dourado-claro: #F3ECDF;
  --dourado-hover: #9C7B48;
  --fio-forte: #D9D0BF;
  --texto-3: #8A8F98;
  --noite-vidro: rgba(15, 27, 45, 0.72);
  --noite-veu: rgba(15, 27, 45, 0.45);
  --branco-veu: rgba(255, 255, 255, 0.55);
  --branco-fio: rgba(255, 255, 255, 0.3);
  --sombra-botao: 0 1px 3px rgba(15, 27, 45, 0.12);
  --sombra-alca: 0 1px 4px rgba(15, 27, 45, 0.18);
  --sombra: 0 1px 2px rgba(15, 27, 45, 0.06), 0 8px 24px rgba(15, 27, 45, 0.06);
  --sombra-forte: 0 16px 48px rgba(15, 27, 45, 0.18);
  color-scheme: light;
}