/* ===================================================
   Design Tokens — Big Brinquedos
   Fonte única de verdade para cores, fontes e espaçamentos.
   Toda página nova (admin ou site público) importa este arquivo.
   =================================================== */

:root{
  /* Paleta da marca */
  --orange: #F2622C;
  --purple: #6B3FA0;
  --green:  #8CC63F;
  --gold:   #E8A33D;
  --cream:  #F7F0DE;
  --ink:    #3D2B57;
  --red:    #D14343;

  /* Tons derivados (usados em hovers, sombras, bordas) */
  --purple-dark: #55307F;
  --ink-10: rgba(61,43,87,0.1);
  --ink-20: rgba(61,43,87,0.2);
  --orange-shadow: rgba(242,98,44,0.25);

  /* Tipografia */
  --font-head: 'Sora', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Easing padrão de transições (mesmo do protótipo) */
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Espaçamento base — usar múltiplos disso mantém ritmo visual consistente */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{ font-family: var(--font-head); font-weight:600; }

/* Botão base — reaproveitado em toda parte administrativa */
.btn{
  font-family: var(--font-head);
  font-weight:600;
  font-size:14px;
  padding:12px 22px;
  border-radius:999px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  box-shadow: 0 8px 18px var(--ink-20);
  transition: transform 0.2s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn-orange{ background: var(--orange); color:#fff; }
.btn-ghost{ background: transparent; color: var(--cream); border:2px solid var(--cream); box-shadow:none; }

/* Topbar — mesmo padrão visual do protótipo, reutilizável em qualquer tela admin */
.topbar{
  background: linear-gradient(120deg, var(--purple), var(--purple-dark));
  padding: var(--space-2) var(--space-3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: var(--space-1);
}
.topbar .logo{
  font-family: var(--font-head);
  font-weight:700;
  font-size:20px;
  color: var(--cream);
}
.topbar .logo small{
  display:block;
  font-family: var(--font-mono);
  font-size:11px;
  font-weight:400;
  opacity:0.7;
  text-transform:uppercase;
}