/* Catshroom Store — estilo "Pop" (neo-brutalism pop) para a Landing World.
   Tokens `--pop-*` + classes `cs-pop*`. Valores vindos de conceito-landing\index.html (referência visual).
   Autônomo: não depende de data-estilo nem de neo.css. Uso: <body class="cs-pop"> ou qualquer contêiner .cs-pop.
   Um arquivo por seção da landing deve ficar em ds\pop-<secao>.css e usar só estes tokens (sem HEX). */

.cs-pop {
  /* paleta */
  --pop-creme: #FFF0E4;
  --pop-rosa: #F65AA8;
  --pop-amarelo: #FFD52A;
  --pop-laranja: #FF982B;
  --pop-coral: #F04A37;
  --pop-menta: #73E5B5;
  --pop-turquesa: #239E97;
  --pop-lilas: #B6A0F5;
  --pop-azul: #8EA8F4;
  --pop-carvao: #171717;
  --pop-branco: #FFFFFF;
  /* escuro "Ameixa noite" (mesma escala do neo-tokens.json) */
  --pop-noite: #1A1226;
  --pop-noite-1: #20172F;
  --pop-noite-2: #271B3A;
  --pop-roxo-texto: #6A3FD0; /* título sobre creme (AA) */
  /* semânticos */
  --pop-bg: var(--pop-creme);
  --pop-surface: var(--pop-branco);
  --pop-ink: var(--pop-carvao);
  --pop-tinta: var(--pop-carvao); /* borda e sombra */
  /* forma */
  --pop-borda: 2px solid var(--pop-tinta);
  --pop-sombra: 5px 5px 0 var(--pop-tinta);
  --pop-sombra-meia: 3px 3px 0 var(--pop-tinta);
  --pop-sombra-grande: 8px 8px 0 var(--pop-tinta);
  --pop-sombra-hover: 2px 2px 0 var(--pop-tinta);
  --pop-raio: 22px;
  --pop-raio-grande: 30px;
  --pop-raio-botao: 14px;
  --pop-raio-selo: 999px;
  --pop-giro-selo: -4deg;
  /* movimento */
  --pop-rapido: 120ms;
  --pop-base: 150ms;
  /* tipografia (Lilita One / Fredoka; sem arquivo local ainda: cai nas fontes locais arredondadas) */
  --pop-font-display: "Lilita One", "Catshroom Pop", "Baloo 2", Impact, sans-serif;
  --pop-font-corpo: "Fredoka", "Baloo 2", system-ui, "Segoe UI", sans-serif;
  --pop-t-corpo: 1.125rem;
  --pop-t-selo: 0.9375rem;
  --pop-t-titulo: clamp(2rem, 4.5vw, 3.375rem);
  --pop-t-hero: clamp(2.5rem, 6vw, 4.75rem);

  background: var(--pop-bg);
  color: var(--pop-ink);
  font-family: var(--pop-font-corpo);
  font-size: var(--pop-t-corpo);
  line-height: 1.5;
}
.cs-pop *, .cs-pop *::before, .cs-pop *::after { box-sizing: border-box; }

/* modo escuro: borda e sombra viram creme, cores vivas continuam */
html[data-theme="dark"] .cs-pop, .cs-pop[data-theme="dark"] {
  --pop-bg: var(--pop-noite);
  --pop-surface: var(--pop-noite-2);
  --pop-ink: var(--pop-creme);
  --pop-tinta: var(--pop-creme);
}

/* tipografia */
.cs-pop-display { font-family: var(--pop-font-display); font-weight: 400; line-height: 1.05; margin: 0; }
.cs-pop-display--hero { font-size: var(--pop-t-hero); }
.cs-pop-display--titulo { font-size: var(--pop-t-titulo); }

/* cores de fundo (modificadores) */
.cs-pop-cor--rosa { background: var(--pop-rosa); color: var(--pop-carvao); }
.cs-pop-cor--amarelo { background: var(--pop-amarelo); color: var(--pop-carvao); }
.cs-pop-cor--laranja { background: var(--pop-laranja); color: var(--pop-carvao); }
.cs-pop-cor--coral { background: var(--pop-coral); color: var(--pop-carvao); } /* carvão: 4,9:1 (branco dava 3,7:1) */
.cs-pop-cor--menta { background: var(--pop-menta); color: var(--pop-carvao); }
.cs-pop-cor--turquesa { background: var(--pop-turquesa); color: var(--pop-carvao); } /* carvão: 5,5:1 (branco dava 3,3:1) */
.cs-pop-cor--lilas { background: var(--pop-lilas); color: var(--pop-carvao); }
.cs-pop-cor--azul { background: var(--pop-azul); color: var(--pop-carvao); }

/* superfície com borda e sombra sólida */
.cs-pop-card {
  background: var(--pop-surface);
  color: var(--pop-ink);
  border: var(--pop-borda);
  border-radius: var(--pop-raio);
  box-shadow: var(--pop-sombra);
}
.cs-pop-card--grande { border-radius: var(--pop-raio-grande); box-shadow: var(--pop-sombra-grande); }
.cs-pop-faixa { border-block: var(--pop-borda); }

/* botão que afunda no hover */
.cs-pop-btn {
  display: inline-block;
  min-height: 44px;
  font-family: var(--pop-font-corpo);
  font-weight: 600;
  font-size: var(--pop-t-corpo);
  line-height: 1.5;
  text-decoration: none;
  padding: 10px 24px;
  background: var(--pop-lilas);
  color: var(--pop-carvao);
  border: var(--pop-borda);
  border-radius: var(--pop-raio-botao);
  box-shadow: var(--pop-sombra);
  cursor: pointer;
  transition: transform var(--pop-rapido), box-shadow var(--pop-rapido);
}
.cs-pop-btn:hover { transform: translate(3px, 3px); box-shadow: var(--pop-sombra-hover); }
.cs-pop-btn:active { transform: translate(5px, 5px); box-shadow: none; }
.cs-pop-btn--rosa { background: var(--pop-rosa); }
.cs-pop-btn--amarelo { background: var(--pop-amarelo); }
.cs-pop-btn--menta { background: var(--pop-menta); }
.cs-pop-btn--sm { min-height: 44px; padding: 6px 14px; box-shadow: var(--pop-sombra-meia); }
.cs-pop-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: var(--pop-sombra-meia); }

/* adesivo: selo girado */
.cs-pop-selo {
  display: inline-block;
  font-family: var(--pop-font-display);
  font-weight: 400;
  font-size: var(--pop-t-selo);
  letter-spacing: 0.03em;
  padding: 5px 14px;
  background: var(--pop-amarelo);
  color: var(--pop-carvao);
  border: var(--pop-borda);
  border-radius: var(--pop-raio-selo);
  box-shadow: var(--pop-sombra-meia);
  transform: rotate(var(--pop-giro-selo));
}
.cs-pop-selo--rosa { background: var(--pop-rosa); }
.cs-pop-selo--menta { background: var(--pop-menta); transform: rotate(3deg); }
.cs-pop-selo--azul { background: var(--pop-azul); }
.cs-pop-selo--coral { background: var(--pop-coral); color: var(--pop-carvao); transform: rotate(5deg); }

/* foco visível */
.cs-pop a:focus-visible, .cs-pop button:focus-visible, .cs-pop input:focus-visible,
.cs-pop select:focus-visible, .cs-pop textarea:focus-visible, .cs-pop-btn:focus-visible {
  outline: 3px solid var(--pop-tinta);
  outline-offset: 3px;
}

/* campo */
.cs-pop-input {
  min-height: 44px;
  font-family: var(--pop-font-corpo);
  font-weight: 500;
  font-size: var(--pop-t-corpo);
  padding: 10px 16px;
  background: var(--pop-surface);
  color: var(--pop-ink);
  border: var(--pop-borda);
  border-radius: var(--pop-raio-botao);
}

/* movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .cs-pop *, .cs-pop *::before, .cs-pop *::after, .cs-pop-btn {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .cs-pop-btn:hover, .cs-pop-btn:active { transform: none; }
}