/*
 * static/css/loja_temas.css — os modelos visuais da loja pública.
 *
 * Cada preset é um conjunto de tokens aplicado no <body data-tema="...">.
 * Fica aqui, e não no <style> de loja_publica/base.html, por dois motivos:
 * o arquivo é cacheado pelo navegador em vez de viajar em toda página, e
 * acrescentar um modelo novo passa a ser acrescentar um bloco - não mexer no
 * template que serve a loja inteira.
 *
 * O que os presets NÃO definem: --lp e --ls. Essas duas são a cor que a
 * organização escolheu em Configurações da Loja, injetadas no :root pelo
 * template. Um preset que as redefinisse apagaria a identidade do cliente a
 * cada troca de modelo.
 *
 * Precedência, do mais fraco ao mais forte:
 *   :root (cores da organização)  <  body[data-tema] (o preset)  <  style=""
 *   no body (os ajustes finos que o cliente fez por cima).
 */

/* ── Escuro ── o visual que a loja sempre teve. Os valores repetem os do
   :root de base.html de propósito: é o preset padrão, e trocar para ele tem
   de devolver exatamente a aparência anterior. */
[data-tema="escuro"] {
  --bg: #09090b;
  --bg2: #18181b;
  --bg3: #27272a;
  --border: #3f3f46;
  --text: #fafafa;
  --text2: #a1a1aa;
  --text3: #71717a;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0, 0, 0, .4);
  --densidade: 80px;
  --header-bg: rgba(9, 9, 11, .85);
  --sec-borda-suave: rgba(255, 255, 255, .06);
}

/* ── Clínica / Institucional ── claro, espaçado, sóbrio. Para quem precisa
   passar confiança antes de mostrar preço. */
[data-tema="clinica"] {
  --bg: #ffffff;
  --bg2: #f8fafc;
  --bg3: #f1f5f9;
  --border: #e2e8f0;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(15, 23, 42, .08);
  --densidade: 104px;
  --header-bg: rgba(255, 255, 255, .88);
  --sec-borda-suave: rgba(15, 23, 42, .06);
}

/* ── Loja Moderna ── claro e contrastado, com o produto em primeiro plano. */
[data-tema="moderna"] {
  --bg: #ffffff;
  --bg2: #fafafa;
  --bg3: #f4f4f5;
  --border: #e4e4e7;
  --text: #18181b;
  --text2: #52525b;
  --text3: #a1a1aa;
  --radius: 10px;
  --shadow: 0 4px 16px rgba(0, 0, 0, .07);
  --densidade: 72px;
  --header-bg: rgba(255, 255, 255, .9);
  --sec-borda-suave: rgba(0, 0, 0, .05);
}

/* ── Editorial ── serifada, cantos retos, muito respiro. O oposto do card
   arredondado: aqui a página parece uma revista, e o produto entra no meio de
   um texto que veio antes dele. */
[data-tema="editorial"] {
  --bg: #fffdf8;
  --bg2: #ffffff;
  --bg3: #f5f1e8;
  --border: #e2dccf;
  --text: #1c1917;
  --text2: #57534e;
  --text3: #a8a29e;
  --radius: 0px;
  --shadow: none;
  --densidade: 140px;
  --header-bg: rgba(255, 253, 248, .92);
  --sec-borda-suave: rgba(28, 25, 23, .08);
}

/* ── Minimalista ── branco, linha fina, sombra quase nenhuma. A foto do
   produto é o único elemento com peso na tela. */
[data-tema="minimalista"] {
  --bg: #ffffff;
  --bg2: #ffffff;
  --bg3: #fafafa;
  --border: #e7e5e4;
  --text: #171717;
  --text2: #525252;
  --text3: #a3a3a3;
  --radius: 2px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --densidade: 96px;
  --header-bg: rgba(255, 255, 255, .94);
  --sec-borda-suave: rgba(0, 0, 0, .04);
}

/* ── Tecnologia ── escuro azulado, contraste alto. Para equipamento: o preto
   neutro do "escuro" deixa foto de metal parecendo suja; o azul não. */
[data-tema="tecnologia"] {
  --bg: #0b1220;
  --bg2: #111a2e;
  --bg3: #1b2740;
  --border: #243352;
  --text: #f1f5f9;
  --text2: #94a3b8;
  --text3: #64748b;
  --radius: 6px;
  --shadow: 0 8px 30px rgba(2, 6, 23, .55);
  --densidade: 88px;
  --header-bg: rgba(11, 18, 32, .88);
  --sec-borda-suave: rgba(148, 163, 184, .1);
}

/* ── Acolhedor ── creme e cantos bem redondos. Para quem atende pessoa, não
   departamento de compras. */
[data-tema="acolhedor"] {
  --bg: #fdf8f1;
  --bg2: #fffcf7;
  --bg3: #f6ece0;
  --border: #ead9c6;
  --text: #3f2d1e;
  --text2: #6b5544;
  --text3: #a48b74;
  --radius: 24px;
  --shadow: 0 10px 30px rgba(120, 84, 48, .12);
  --densidade: 96px;
  --header-bg: rgba(253, 248, 241, .9);
  --sec-borda-suave: rgba(63, 45, 30, .07);
}

/* ── Corporativo ── azul-acinzentado, denso, sem enfeite. A tela de quem pede
   orçamento e some - não a de quem compra por impulso. */
[data-tema="corporativo"] {
  --bg: #f8fafc;
  --bg2: #ffffff;
  --bg3: #eef2f7;
  --border: #d7dee8;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --radius: 4px;
  --shadow: 0 2px 10px rgba(15, 23, 42, .06);
  --densidade: 64px;
  --header-bg: rgba(255, 255, 255, .95);
  --sec-borda-suave: rgba(15, 23, 42, .07);
}

/* ── Vitrine / Catálogo ── compacto de propósito: com 200 produtos, o espaço
   generoso dos outros modelos vira rolagem infinita. */
[data-tema="vitrine"] {
  --bg: #ffffff;
  --bg2: #f7f7f8;
  --bg3: #eeeef0;
  --border: #dcdce0;
  --text: #121214;
  --text2: #4b4b52;
  --text3: #9a9aa2;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --densidade: 48px;
  --header-bg: rgba(255, 255, 255, .95);
  --sec-borda-suave: rgba(0, 0, 0, .06);
}

/* ── Boutique ── escuro quente com serifa. Peça cara, vendida uma a uma: o
   espaço em volta do produto faz parte do preço. */
[data-tema="boutique"] {
  --bg: #141110;
  --bg2: #1d1917;
  --bg3: #2a2421;
  --border: #3d3531;
  --text: #f5efe8;
  --text2: #c4b5a4;
  --text3: #8c7d6e;
  --radius: 0px;
  --shadow: 0 12px 40px rgba(0, 0, 0, .5);
  --densidade: 128px;
  --header-bg: rgba(20, 17, 16, .9);
  --sec-borda-suave: rgba(245, 239, 232, .08);
}

/*
 * Nos temas claros o texto branco fixo de alguns componentes sumiria no
 * fundo. Só o que o <style> de base.html cravou em cor absoluta precisa de
 * correção aqui - o resto já usa token.
 */
[data-modo="claro"] body,
body[data-modo="claro"] {
  color: var(--text);
}

[data-modo="claro"] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

/* O gradiente de marca continua com texto branco por cima: ali o fundo é a
   cor da organização, não o fundo do tema. */
[data-modo="claro"] .btn-primary {
  color: #fff;
}