/* ============================================================
   Shock Multimarcas: identidade da loja (sobrescreve só valores de tokens.css).
   Visual "carga elétrica" (27/10/2026): pedido do dono, "fundo cinza transparente, tema branco
   e o azul da logo". Cores medidas nos pixels da logo oficial:
   - azul do "O" com o raio: #0397dd (só brilho, raio, contorno e detalhe grande: 3,2:1 no branco);
   - cinza do círculo: #363435 (texto e rodapé).
   Contraste medido (WCAG):
   - grafite #363435: 12,4:1 no branco e 10,2:1 no cinza #e7eaee;
   - médio #4d5156: 8,0:1 / 6,6:1; fraco #5d6166: 6,2:1 / 5,2:1;
   - azul tinta #0868a0 (o azul da logo mais fechado, para texto e botão): 6,0:1 no branco, 5,0:1 no cinza;
   - branco sobre o botão: 6,0:1 (o degradê termina em #0a78b8: 4,8:1).
   Uma família só: Saira (variável, largura 50% a 125%): expandida e pesada nos títulos, como as
   letras largas do SHOCK, e normal no texto. Tema único (claro).
   ============================================================ */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --sm-bg: #e7eaee;                 /* cinza do fundo (o vidro branco deixa ver) */
  --sm-bg-grad: #e7eaee;            /* a névoa que se move está em front.css */
  --sm-bg-alt: #f3f5f7;             /* fundo das fotos das peças */
  --sm-card: #ffffff;
  --sm-card-forte: #f3f5f7;
  --sm-borda: #d9dde2;
  --sm-borda-forte: #9db4c6;
  --sm-overlay: rgba(28, 27, 28, .42);

  --sm-texto: #363435;
  --sm-texto-medio: #4d5156;
  --sm-texto-fraco: #5d6166;

  --sm-neon: #0868a0;               /* contornos e foco: o azul da logo fechado (5:1 no cinza) */
  --sm-neon-brilho: 0 0 0 3px rgba(3, 151, 221, .28), 0 8px 24px rgba(3, 151, 221, .25);
  --sm-neon-forte: 0 0 0 4px rgba(3, 151, 221, .35), 0 10px 32px rgba(3, 151, 221, .35);
  --sm-neon-texto: none;
  --sm-neon-gota: 0 0 6px rgba(3, 151, 221, .7);
  --sm-neon-linha: 0 0 0 transparent;
  --sm-marca: #0868a0;
  --sm-marca-2: #0397dd;            /* o azul exato da logo */
  --sm-marca-texto: #0868a0;
  --sm-sobre-marca: #ffffff;
  --sm-grad-marca: linear-gradient(120deg, #0868a0, #0a78b8);
  --sm-grad-destaque: linear-gradient(100deg, #0868a0, #0397dd 55%, #0868a0);
  --sm-grad-gaveta: rgba(255, 255, 255, .94);
  --sm-brilho: rgba(255, 255, 255, .5);
  --sm-foco: #0868a0;
  --sm-erro: #b3261e;
  --sm-sucesso: #12784a;
  --sm-alerta: #8a5a00;

  --sm-veu-foto: linear-gradient(180deg, rgba(28, 27, 28, 0) 40%, rgba(28, 27, 28, .6) 100%);
  --sm-veu-topo: linear-gradient(180deg, rgba(28, 27, 28, .35), transparent);
  --sm-veu-foto-celular: linear-gradient(180deg, rgba(28, 27, 28, .2) 0%, rgba(28, 27, 28, 0) 35%, rgba(28, 27, 28, .65) 100%);
  --sm-veu-promo: linear-gradient(180deg, rgba(28, 27, 28, .55), rgba(28, 27, 28, .82));
  --sm-fundo-foto: #363435;
  --sm-aviso-fundo: #363435;
  --sm-aviso-texto: #ffffff;
  --sm-sobre-foto: #ffffff;
  --sm-sobre-foto-fraco: #eef1f4;
  --sm-sobre-foto-acento: #7fd3ff;  /* azul da logo clareado: 7,5:1 sobre o grafite */
  --sm-selo-fundo: rgba(54, 52, 53, .86);

  --sm-sombra-sm: 0 1px 2px rgba(40, 50, 60, .08);
  --sm-sombra-md: 0 10px 28px rgba(40, 50, 60, .10);
  --sm-sombra-lg: 0 28px 70px rgba(40, 50, 60, .16);

  --sm-fonte-logo: 'Saira', 'Arial Black', system-ui, sans-serif;
  --sm-fonte-display: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sm-fonte-titulo: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sm-fonte-texto: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sm-fonte-dados: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sm-peso-corpo: 400;
  --sm-peso-titulo-leve: 700;

  /* cantos redondos, como o círculo da logo */
  --sm-raio-btn: 999px;
  --sm-raio-campo: 14px;
  --sm-raio-foto: 16px;
  --sm-raio-janela: 22px;
}
.preco, .preco-de, .quadro-num, .contador-num, .balao { font-variant-numeric: tabular-nums lining-nums; }