/**
 * Tokens e fundo global — sobrescreve :root do tailwind.css (carregar depois).
 * Paleta: fundo mais profundo (azul‑índigo), cinzas frios, acento ciano + violeta moderado.
 */

:root {
  /* Base: mais profundo e “tech”, menos marrom */
  --background: 232 32% 5%;
  --foreground: 210 25% 97%;
  --card: 230 26% 11%;
  --card-foreground: 210 25% 97%;
  --popover: 228 28% 9%;
  --popover-foreground: 210 25% 97%;

  /* Primário ciano; secundário violeta (gradientes e hovers) */
  --primary: 192 95% 52%;
  --primary-foreground: 232 35% 8%;
  --secondary: 262 72% 58%;
  --secondary-foreground: 210 25% 98%;

  --muted: 228 22% 16%;
  --muted-foreground: 220 14% 58%;

  --accent: 255 65% 58%;
  --accent-foreground: 232 35% 8%;

  --destructive: 0 72% 55%;
  --destructive-foreground: 210 25% 98%;

  --border: 228 22% 20%;
  --input: 228 22% 18%;
  --ring: 192 90% 55%;

  --gradient-primary: linear-gradient(
    125deg,
    hsl(192 95% 52%) 0%,
    hsl(210 90% 55%) 42%,
    hsl(262 72% 58%) 100%
  );
  --gradient-dark: linear-gradient(180deg, hsl(232 32% 6%), hsl(230 28% 4%));
  --shadow-glow: 0 0 48px hsl(192 95% 52% / 0.22), 0 0 96px hsl(262 60% 50% / 0.08);
  --shadow-card: 0 8px 32px hsl(0 0% 0% / 0.45), 0 1px 0 hsl(255 255% 100% / 0.04) inset;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  min-height: 100%;
}

body {
  position: relative;
  color: hsl(var(--foreground)) !important;
  background-color: hsl(var(--background)) !important;
  background-image:
    radial-gradient(ellipse 130% 70% at 50% -15%, hsl(262 45% 35% / 0.18), transparent 55%),
    radial-gradient(ellipse 90% 55% at 100% 35%, hsl(192 70% 45% / 0.09), transparent 50%),
    radial-gradient(ellipse 70% 50% at 0% 75%, hsl(255 40% 40% / 0.1), transparent 52%),
    linear-gradient(185deg, hsl(232 34% 6%) 0%, hsl(var(--background)) 38%, hsl(228 30% 3.5%) 100%) !important;
  background-attachment: fixed;
}

/* Textura sutil (grain) — sem impacto em prefers-reduced-motion */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* Conteúdo acima do grain */
body > * {
  position: relative;
  z-index: 1;
}

/* Cartões em estilo vidro — use junto com rounded-lg / hover existentes */
.glass-card {
  border: 1px solid hsl(var(--border) / 0.65);
  background: hsl(var(--card) / 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}

.glass-pill {
  border: 1px solid hsl(var(--border) / 0.55);
  background: hsl(var(--card) / 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/*
 * Indicador de scroll: o tailwind.css pré-compilado não inclui right-6, sm:right-8
 * nem z-40 — essas classes eram ignoradas e o ícone ficava à esquerda.
 */
#scroll-hint {
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  left: auto;
  z-index: 40;
}

@media (min-width: 640px) {
  #scroll-hint {
    right: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #scroll-hint .scroll-hint-bounce {
    animation: none;
  }
}