/* ==============================================================
   KLUSKA — TOKENS DE DESIGN COMPARTILHADOS
   ==============================================================
   Fonte única de verdade pra cor, tipografia, raio e sombra usados
   em toda a loja (index, checkout, pagamento, sucesso,
   frete-callback, admin). Antes cada página tinha seu próprio
   :root com nomes de variável diferentes (--bg-black vs --bg,
   --text-white vs --text, --font-body vs --font) e valores que
   foram divergindo aos poucos (o admin.html, por exemplo, tinha
   tons de cinza sutilmente mais escuros que o resto do site).

   Pra mudar uma cor/fonte da marca em TODO o site, edite só aqui.
   Os dois nomes de cada token (ex: --bg-black e --bg) apontam pro
   mesmo valor — mantidos como alias porque o CSS de cada página já
   referencia um dos dois nomes; não precisou reescrever tudo.
   ============================================================== */

:root{
  /* Dourado — cor de marca */
  --gold:#C9A84C;
  --gold-light:#E8C96A;
  --gold-dim:#8B6E2E;

  /* Fundos (do mais escuro/base ao mais claro) */
  --bg-black:#0A0A0A;   --bg:#0A0A0A;         /* alias */
  --bg-deep:#111111;
  --bg-card:#171717;
  --bg-surface:#1E1E1E;
  --bg-hover:#262626;   /* usado no admin (hover de linha/lista) */

  /* Texto */
  --text-white:#F5F0E8; --text:#F5F0E8;       /* alias */
  --text-muted:#8A8A8A;
  --text-faint:#6B6B6B; /* era #444444 (~1.9:1 em #0A0A0A) — ainda discreto, mais legível */

  /* Bordas */
  --border:#2A2A2A;
  --border-gold:rgba(201,168,76,.3);

  /* Semânticas (status, badges — usadas principalmente no admin) */
  --green:#2ECC71;
  --red:#E74C3C;
  --blue:#3498DB;
  --orange:#E67E22;

  /* Tipografia */
  --font-display:'Cormorant Garamond',serif;
  --font-body:'Jost',sans-serif; --font:'Jost',sans-serif;  /* alias */

  /* Raio e sombra */
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --shadow-gold:0 0 0 1px rgba(201,168,76,.15),0 8px 32px rgba(0,0,0,.4);
  --transition:.25s cubic-bezier(.4,0,.2,1);

  /* Layout do admin */
  --sidebar:240px;

  /* Espaçamento fluido — pra CSS novo, em vez de px fixo em paddings/gaps.
     clamp(mín, preferido-fluido, máx) escala suave entre telas sem
     precisar de mais um @media por regra. Aditivo: CSS existente não
     precisa migrar, só o que for escrito/tocado na reforma mobile-first. */
  --space-1:clamp(4px,1vw,6px);
  --space-2:clamp(8px,1.5vw,12px);
  --space-3:clamp(12px,2.5vw,16px);
  --space-4:clamp(16px,3.5vw,24px);
  --space-5:clamp(20px,4.5vw,32px);
  --space-6:clamp(28px,6vw,48px);

  /* Tipografia fluida — títulos de página encolhem proporcionalmente no
     mobile sem trocar o texto nem precisar de @media por tela. */
  --text-title:clamp(24px,5vw + 6px,36px);
  --text-title-lg:clamp(28px,7vw + 6px,48px);

  /* Alvo de toque mínimo (WCAG 2.5.5 / iOS HIG). */
  --tap-min:44px;
  --tap-min-sm:36px;

  /* Gutter lateral consistente de conteúdo em mobile. */
  --gutter:clamp(16px,4vw,32px);
}

/* Foco de teclado visível — os inputs/botões da loja desligam o outline
   padrão do navegador (outline:none) e trocam só a cor da borda, sutil
   demais pra navegação por teclado (WCAG 2.4.7). Uma regra global aqui
   evita ter que caçar cada .form-input/.login-input/.search-input
   espalhada pelos arquivos — :focus-visible só acende no teclado, nunca
   no clique do mouse, então não polui a experiência visual de ninguém. */
:focus-visible{
  /* !important é necessário aqui: cada página define outline:none direto em
     .form-input/.login-input/etc DEPOIS deste arquivo no cascade (o <link>
     deste theme.css vem antes do <style> de cada página), então uma regra
     sem !important perderia a queda-de-braço de especificidade/ordem. */
  outline:2px solid var(--gold-light) !important;
  outline-offset:2px !important;
}

/* Ícones SVG do icons.js — herdam a cor do texto ao redor via currentColor,
   então não têm cor própria aqui, só o alinhamento/proporção do desenho. */
.kl-icon{display:inline-block;vertical-align:middle;flex-shrink:0;}