/* ============================================================
   OFICINA DE BRINQUEDOS · Brand Override
   Substitui as cores do Buffet Family (roxo) pela paleta
   da Oficina de Brinquedos: Azul celeste + Amarelo + Laranja
   ============================================================
   Carregue APÓS o site.css / neobrutalist.css nas páginas.
   ============================================================ */

/* ── Google Fonts · Fredoka (títulos) + Nunito (corpo) ── */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap');

/* ── Variáveis globais ── */
:root {
  /* Paleta Oficina de Brinquedos */
  --brand:        #29ABE2;   /* azul celeste principal */
  --brand-dark:   #1E8BB8;   /* azul escuro hover */
  --brand-mid:    #4BBEE8;   /* azul médio */
  --brand-bg:     #EBF8FE;   /* fundo azul clarinho */

  --yellow:       #FFD700;   /* amarelo do logo */
  --yellow-dark:  #E6C000;
  --yellow-bg:    #FFFDE7;

  --orange:       #F7941D;   /* laranja energia */
  --orange-dark:  #E0820A;
  --orange-bg:    #FFF3E0;

  --green:        #4CAF50;
  --wa:           #25D366;

  /* Fundo geral: quente e levíssimo */
  --bg:           #FFFCE8;
  --paper:        #ffffff;
  --ink:          #1a1a1a;
  --ink-2:        #444;
  --ink-3:        #777;
  --line:         #E8E0C0;

  /* Sombras com azul OB (substitui o roxo BF) */
  --shadow-sm:    0 2px 8px  rgba(41,171,226,.10);
  --shadow-md:    0 6px 22px rgba(41,171,226,.16);
  --shadow-lg:    0 12px 36px rgba(41,171,226,.22);

  /* Fontes */
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-serif:   'Fredoka', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, sans-serif;

  /* Compat: mapeamento das vars antigas → novas */
  --purple:       var(--brand);
  --purple-deep:  var(--brand-dark);
  --purple-mid:   var(--brand-mid);
  --purple-bg:    var(--brand-bg);
  --pink:         var(--orange);
  --pink-bg:      var(--orange-bg);
}

/* ── Body ── */
body {
  font-family: var(--font-body);
  background: var(--bg);
}

/* ── Theme-color para mobile (chrome bar) ── */
meta[name="theme-color"] { content: #29ABE2; }

/* ── Tipografia ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
}
h1 em, .h1 em { color: var(--brand); font-style: normal; }
h2 em, .h2 em { color: var(--orange); font-style: normal; }

/* ── Eyebrow / badges ── */
.eyebrow {
  color: var(--brand);
  background: var(--brand-bg);
}

/* ── Botões primários ── */
.btn, .btn-primary,
button[type="submit"],
a.btn-primary {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
}
.btn:hover, .btn-primary:hover,
button[type="submit"]:hover {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

/* ── Botão CTA laranja (destaque máximo) ── */
.btn-cta, .btn-orange {
  background: var(--orange) !important;
  color: #fff !important;
  border-color: var(--orange) !important;
}
.btn-cta:hover, .btn-orange:hover {
  background: var(--orange-dark) !important;
}

/* ── WhatsApp ── */
.btn-wa, a[href*="wa.me"] {
  background: var(--wa) !important;
  color: #fff !important;
}

/* ── Navbar ── */
nav, header.site-header, .nav-bar, [class*="navbar"] {
  background: #fff;
  border-bottom: 3px solid var(--yellow);
  box-shadow: 0 2px 12px rgba(41,171,226,.10);
}
.nav-logo-text, .brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand) !important;
}

/* ── Cards ── */
.card, [class*="card"] {
  box-shadow: var(--shadow-sm);
  border-radius: 16px;
  border: 1.5px solid var(--line);
}
.card:hover, [class*="card"]:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--brand);
}

/* ── Highlight / estrela favorito ── */
.star-active, .favorite-active,
[class*="heart-active"], [class*="fav-active"] {
  color: var(--yellow) !important;
}

/* ── Filtros / pills ── */
.filter-pill.active,
.filter-btn.active,
[class*="chip"].active,
[class*="tag"].active {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}
.filter-pill, .filter-btn, [class*="chip"], [class*="tag"] {
  border-radius: 999px;
  font-family: var(--font-body);
}

/* ── Step wizard (proposta) ── */
.step-active, [class*="step"].active,
.step-completed, [class*="step"].completed {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.step-number {
  background: var(--brand);
  color: #fff;
}

/* ── Seções de destaque (hero, CTA bottom) ── */
.hero-gradient, [class*="hero-bg"] {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.section-cta, [class*="cta-block"], [class*="cta-bottom"] {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.section-yellow, [class*="section-hl"] {
  background: var(--yellow-bg);
  border-left: 4px solid var(--yellow);
}

/* ── Aurora / partículas de fundo ── */
[class*="aurora"], [class*="particle"] {
  --c1: rgba(41,171,226,.18);
  --c2: rgba(255,215,0,.14);
  --c3: rgba(247,148,29,.10);
}

/* ── Overrides de hardcode do BF roxo → azul OB ── */
/* (para seletores inline que não usam variável) */
[style*="#5B2D8E"] { color: var(--brand) !important; }
[style*="background:#5B2D8E"],
[style*="background: #5B2D8E"] { background: var(--brand) !important; }
[style*="#4A1E7E"] { color: var(--brand-dark) !important; }
[style*="#7C3AED"], [style*="#7c3aed"] { color: var(--brand-mid) !important; }
[style*="#ec4899"] { color: var(--orange) !important; }

/* ── Admin ── */
.admin-sidebar, [class*="sidebar"] {
  background: var(--brand-dark) !important;
}
.admin-sidebar a:hover, .admin-nav-item.active {
  background: var(--brand) !important;
}

/* ── Input focus ── */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand);
  border-color: var(--brand) !important;
}

/* ── Badge de número / contagem ── */
.badge, [class*="badge"] {
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
}

/* ── Tabela de preços ── */
.price-table th,
[class*="price-header"] {
  background: var(--brand);
  color: #fff;
}
.price-table tr:nth-child(even),
[class*="price-row"]:nth-child(even) {
  background: var(--brand-bg);
}

/* ── Footer ── */
footer, .site-footer {
  background: var(--brand-dark);
  color: #fff;
  border-top: 4px solid var(--yellow);
}
footer a, .site-footer a { color: var(--yellow); }
footer a:hover, .site-footer a:hover { color: #fff; }

/* ── Scrollbar (Chrome) ── */
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 8px; }
::-webkit-scrollbar-track { background: var(--brand-bg); }

/* ── Selection ── */
::selection { background: var(--yellow); color: var(--ink); }

/* ── Responsividade ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}