/* assets/css/loja-tema.css - reskin "alegre" só para as páginas da loja (não o painel admin).
   Sobrescreve os tokens de assets/css/styles.css: como todos os componentes (.btn, .card,
   .tag, .input, .dialog...) já são construídos em cima dessas variáveis, trocar os valores
   aqui é suficiente para recolorir e arredondar a loja inteira sem tocar em cada página. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&display=swap');

:root {
  --color-bg: #FFF8F0;
  --color-surface: #FFFFFF;
  --color-text: #3A1F47;
  --color-accent: #8E24AA;
  --color-accent-2: #EC4899;
  --color-divider: color-mix(in srgb, #3A1F47 14%, transparent);

  --color-accent-100: #F5E6FA;
  --color-accent-200: #E1BEE7;
  --color-accent-300: #CE93D8;
  --color-accent-400: #AB47BC;
  --color-accent-500: #9C4DCC;
  --color-accent-600: #8E24AA;
  --color-accent-700: #6A1B7A;
  --color-accent-800: #4A125A;
  --color-accent-900: #2E0A38;

  --color-accent-2-100: #FCE4EC;
  --color-accent-2-200: #F8BBD0;
  --color-accent-2-300: #F48FB1;
  --color-accent-2-400: #F06292;
  --color-accent-2-500: #EC407A;
  --color-accent-2-600: #EC4899;
  --color-accent-2-700: #C2185B;
  --color-accent-2-800: #A31545;
  --color-accent-2-900: #780F33;

  --color-lime: #9CCC3F;
  --color-lime-100: #F1F9E2;
  --color-lime-700: #5C8A1E;
  --color-yellow: #FFC93C;
  --color-yellow-100: #FFF6DE;
  --color-yellow-700: #B5790A;

  --font-heading: "Baloo 2", "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;

  --shadow-sm: 0 2px 6px color-mix(in srgb, #6A1B7A 12%, transparent);
  --shadow-md: 0 8px 20px color-mix(in srgb, #6A1B7A 16%, transparent);
  --shadow-lg: 0 18px 40px color-mix(in srgb, #6A1B7A 24%, transparent);
}

/* — logo no topo — */
.nav-brand-logo { height: 44px; display: block; }

/* — faixa colorida no herói, no lugar do fundo neutro — */
.hero-alegre {
  background: linear-gradient(135deg, #F5E6FA 0%, #FCE4EC 55%, #FFF6DE 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* — tags extras "alegres" para além de accent/neutral/outline — */
.tag-lime { background: var(--color-lime-100); color: var(--color-lime-700); }
.tag-yellow { background: var(--color-yellow-100); color: var(--color-yellow-700); }

/* — botão primário com gradiente, mais "vivo" que uma cor chapada — */
.btn-primary {
  background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-2-600));
  border: none;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--color-accent-700), var(--color-accent-2-700)); }
.btn-primary:active { background: var(--color-accent-800); }

/* — banner de fechamento com gradiente roxo→rosa em vez de cor sólida — */
.banner-alegre {
  background: linear-gradient(120deg, var(--color-accent-700), var(--color-accent-2-600)) !important;
}

.stripe-ph {
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 0 10px, transparent 10px 20px);
}
.grayscale { filter: none; } /* os placeholders de foto ficam coloridos, não em tons de cinza */