/* ==========================================================================
   EduBuilders Toolbox — Shared styles
   Neo-brutalist system reused across the Toolbox (matches edubuilders.com.br)
   Tailwind (CDN) handles utilities; this file holds base + tokens + helpers.
   ========================================================================== */

:root {
  --ink: #111111;
  --paper: #FDFBF6;
  --electric: #3B1CFF;
  --grape: #7A2BF5;
  --sun: #FFD400;
  --sky-pop: #2D6BFF;
  --coral: #FF4D3D;
}

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
  }
  html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: "Plus Jakarta Sans", sans-serif;
    overscroll-behavior-y: none;
  }
  .pb-safe { padding-bottom: env(safe-area-inset-bottom, 16px); }
  .pt-safe { padding-top: env(safe-area-inset-top, 0px); }
}

::-webkit-scrollbar { display: none; }

/* Aurora background (reused on the toolbox hero) */
.aurora-mesh {
  background:
    radial-gradient(circle at 18% 18%, rgba(59, 28, 255, 0.85), transparent 42%),
    radial-gradient(circle at 82% 25%, rgba(122, 43, 245, 0.8), transparent 42%),
    radial-gradient(circle at 55% 80%, rgba(45, 107, 255, 0.75), transparent 48%),
    radial-gradient(circle at 88% 82%, rgba(255, 212, 0, 0.7), transparent 40%);
  filter: blur(45px);
}
.aurora-mesh-2 {
  background:
    radial-gradient(circle at 70% 15%, rgba(122, 43, 245, 0.6), transparent 45%),
    radial-gradient(circle at 25% 60%, rgba(255, 212, 0, 0.55), transparent 40%),
    radial-gradient(circle at 60% 90%, rgba(59, 28, 255, 0.6), transparent 48%);
  filter: blur(55px);
}

@media (prefers-reduced-motion: reduce) {
  .animate-blob-float, .animate-blob-float-rev, .animate-hue { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Focus visibility for accessibility on brutalist controls */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 2px;
}

/* Result reveal animation */
.eb-reveal { opacity: 0; transform: translateY(6px); }
.eb-reveal.show { opacity: 1; transform: translateY(0); transition: opacity .3s ease, transform .3s ease; }