/* ============================================================
   Base Lume: design tokens (fonte única da verdade visual).
   Usado pela loja e pelo painel.

   COMO TROCAR A IDENTIDADE DE UMA LOJA:
   não edite este arquivo. Cada loja tem speedmouse-brand/tema.css
   (cores e fontes) e speedmouse-brand/fontes.css (@font-face das
   fontes servidas da própria VPS). Eles são carregados DEPOIS deste
   e sobrescrevem só os valores. Os nomes das variáveis não mudam.

   Regras do dono que este arquivo já cumpre:
   - tema ESCURO é o padrão (aplicado antes da primeira pintura pelo
     tema.js, sem piscar branco);
   - nada de branco puro em texto: o texto mais claro é prata;
   - tema claro em prata com degradê, nunca branco chapado;
   - erro é vermelho de verdade, desacoplado da cor da marca.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- superfícies (escuro, padrão) ---------- */
  --sm-bg: #101216;
  --sm-bg-grad: radial-gradient(1200px 600px at 85% -10%, #1d2230 0%, transparent 60%), linear-gradient(180deg, #101216, #0c0e11);
  --sm-bg-alt: #151820;
  --sm-card: #1a1e27;
  --sm-card-forte: #222734;
  --sm-borda: #2a303d;
  --sm-borda-forte: #3a4252;
  --sm-overlay: rgba(6, 8, 12, .72);

  /* ---------- texto ---------- */
  --sm-texto: #cbd5e1;          /* prata: o mais claro permitido */
  --sm-texto-medio: #a7b1c2;
  --sm-texto-fraco: #8a95a8;

  /* ---------- marca ---------- */
  --sm-marca: #7aa2f7;          /* preenchimento de botão principal */
  --sm-marca-2: #9d7cd8;        /* segunda cor da marca (detalhes) */
  --sm-marca-texto: #9fbaf9;    /* cor de marca legível COMO TEXTO sobre o fundo */
  --sm-sobre-marca: #0d1018;    /* texto em cima do botão principal */
  --sm-grad-marca: linear-gradient(120deg, #6d8ff0, #7aa2f7 45%, #9fbaf9);
  --sm-grad-destaque: linear-gradient(100deg, #9fbaf9, #c0a6f0 50%, #9fbaf9);
  --sm-grad-gaveta: linear-gradient(170deg, #1a2030, #121620 70%);
  --sm-brilho: rgba(255, 255, 255, .28); /* varredura de brilho no hover */

  /* ---------- texto sobre foto (igual nos dois temas) ---------- */
  --sm-veu-foto: linear-gradient(180deg, transparent, rgba(8, 6, 12, .9) 62%);
  --sm-sobre-foto: #e9e5ee;
  --sm-sobre-foto-fraco: #d3cdd9;
  --sm-sobre-foto-acento: #e6cf98;
  --sm-selo-fundo: rgba(10, 8, 14, .8);

  /* ---------- front editorial: neon, véus e fundos (padrão; a loja troca em tema.css) ---------- */
  --sm-neon: #9d7cd8;
  --sm-neon-brilho: 0 0 6px rgba(157, 124, 216, .55), 0 0 18px rgba(157, 124, 216, .35);
  --sm-neon-forte: 0 0 10px rgba(157, 124, 216, .8), 0 0 34px rgba(157, 124, 216, .6);
  --sm-neon-texto: 0 0 22px rgba(157, 124, 216, .7), 0 0 2px rgba(157, 124, 216, .5);
  --sm-neon-gota: 0 0 4px rgba(157, 124, 216, .8);
  --sm-neon-linha: 0 -1px 12px rgba(157, 124, 216, .25);
  --sm-veu-topo: linear-gradient(180deg, rgba(8, 8, 12, .5), transparent);
  --sm-veu-foto-celular: linear-gradient(180deg, rgba(8, 8, 12, .35) 0%, rgba(8, 8, 12, .05) 35%, rgba(8, 8, 12, .75) 100%);
  --sm-veu-promo: linear-gradient(90deg, rgba(8, 8, 12, .8) 0%, rgba(8, 8, 12, .45) 60%, rgba(8, 8, 12, .2) 100%);
  --sm-fundo-foto: #14161c;          /* atrás do vídeo enquanto ele carrega */
  --sm-aviso-fundo: #cbd5e1;
  --sm-aviso-texto: #101216;

  /* ---------- estados ---------- */
  --sm-foco: #f0c674;
  --sm-sucesso: #4ec990;
  --sm-alerta: #e8b04f;
  --sm-erro: #f2727c;
  --sm-whatsapp: #25d366;
  --sm-whatsapp-escuro: #128c7e;
  --sm-sobre-whatsapp: #06281a;

  /* ---------- sombras ---------- */
  --sm-sombra-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --sm-sombra-md: 0 6px 18px rgba(0, 0, 0, .42);
  --sm-sombra-lg: 0 22px 50px rgba(0, 0, 0, .55);

  /* ---------- tipografia (a loja troca em tema.css) ---------- */
  --sm-fonte-logo: Georgia, 'Times New Roman', serif;
  --sm-fonte-display: Georgia, 'Times New Roman', serif;
  --sm-fonte-titulo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sm-fonte-texto: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sm-fonte-dados: ui-monospace, 'SF Mono', Menlo, monospace;

  --sm-fs-xs: 13px;
  --sm-fs-sm: 14px;
  --sm-fs-md: 16px;
  --sm-fs-lg: 18px;
  --sm-fs-xl: 22px;
  --sm-fs-2xl: 28px;
  --sm-fs-3xl: 36px;
  --sm-fs-4xl: 48px;
  --sm-fs-5xl: 60px;

  --sm-peso-corpo: 400;
  --sm-peso-enfase: 500;
  --sm-peso-forte: 600;
  --sm-track-label: .16em;

  /* ---------- forma e espaço ---------- */
  --sm-r-sm: 8px;
  --sm-r-md: 14px;
  --sm-r-lg: 22px;
  --sm-r-full: 999px;
  --sm-alvo: 44px;              /* alvo de toque mínimo */

  --sm-e-1: 4px;
  --sm-e-2: 8px;
  --sm-e-3: 12px;
  --sm-e-4: 16px;
  --sm-e-5: 24px;
  --sm-e-6: 32px;
  --sm-e-7: 48px;
  --sm-e-8: 72px;

  /* ---------- movimento ---------- */
  --sm-ease: cubic-bezier(.22, .61, .36, 1);
  --sm-transicao: 240ms var(--sm-ease);
  --sm-transicao-lenta: 480ms var(--sm-ease);
}

/* ---------- tema claro: prata com degradê ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --sm-bg: #dee4ed;
  --sm-bg-grad: linear-gradient(180deg, #edf1f7 0%, #cdd6e2 100%);
  --sm-bg-alt: #d5dce7;
  --sm-card: #f1f4f9;
  --sm-card-forte: #e6ebf3;
  --sm-borda: #c3ccd9;
  --sm-borda-forte: #aab5c5;
  --sm-overlay: rgba(30, 36, 48, .5);

  --sm-texto: #1c2230;
  --sm-texto-medio: #3a4458;
  --sm-texto-fraco: #556075;

  --sm-marca-texto: #2f55b8;
  --sm-grad-gaveta: linear-gradient(170deg, #e9eef6, #d3dbe8 70%);
  --sm-foco: #9a6400;
  --sm-aviso-fundo: #1c2230;
  --sm-aviso-texto: #edf1f7;
  --sm-sucesso: #12784a;
  --sm-alerta: #8a5a00;
  --sm-erro: #b3261e;

  --sm-sombra-sm: 0 1px 2px rgba(20, 30, 50, .12);
  --sm-sombra-md: 0 6px 18px rgba(20, 30, 50, .14);
  --sm-sombra-lg: 0 22px 50px rgba(20, 30, 50, .2);
}

/* ============================================================
   Animações canônicas (loja e painel)
   ============================================================ */
@keyframes sm-surgir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sm-varrer { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes sm-brilho-texto { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes sm-girar { to { transform: rotate(360deg); } }
@keyframes sm-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}