/* ==========================================
   METROPOLI ONLINE - Design System
   Convertido de React/Tailwind para HTML estático
   Preserva integralmente as variáveis e utilidades originais
   ========================================== */

/* === Variáveis CSS (originalmente em src/index.css) === */
:root {
  --background: 220 20% 6%;
  --foreground: 210 20% 92%;

  --card: 220 18% 10%;
  --card-foreground: 210 20% 92%;

  --popover: 220 18% 10%;
  --popover-foreground: 210 20% 92%;

  --primary: 145 80% 42%;
  --primary-foreground: 220 20% 6%;

  --secondary: 220 16% 16%;
  --secondary-foreground: 210 20% 92%;

  --muted: 220 14% 14%;
  --muted-foreground: 215 12% 55%;

  --accent: 200 80% 50%;
  --accent-foreground: 220 20% 6%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --border: 220 14% 18%;
  --input: 220 14% 18%;
  --ring: 145 80% 42%;

  --radius: 0.75rem;

  --sidebar-background: 220 18% 8%;
  --sidebar-foreground: 210 20% 92%;
  --sidebar-primary: 145 80% 42%;
  --sidebar-primary-foreground: 220 20% 6%;
  --sidebar-accent: 220 16% 16%;
  --sidebar-accent-foreground: 210 20% 92%;
  --sidebar-border: 220 14% 18%;
  --sidebar-ring: 145 80% 42%;
}

/* === Reset / base === */
* {
  border-color: hsl(var(--border));
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}

/* === Utilities customizadas (originalmente @layer utilities) === */
.glow-primary {
  box-shadow: 0 0 20px hsl(145 80% 42% / 0.3), 0 0 60px hsl(145 80% 42% / 0.1);
}

.glow-primary-lg {
  box-shadow: 0 0 30px hsl(145 80% 42% / 0.4), 0 0 80px hsl(145 80% 42% / 0.15);
}

.text-gradient {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, hsl(145 80% 42%), hsl(200 80% 50%));
}

.bg-gradient-hero {
  background: radial-gradient(ellipse at 50% 0%, hsl(145 80% 42% / 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, hsl(200 80% 50% / 0.05) 0%, transparent 50%),
              hsl(220 20% 6%);
}

.bg-gradient-section {
  background: linear-gradient(180deg, hsl(220 18% 10%) 0%, hsl(220 20% 6%) 100%);
}

/* === Animações originais (tailwind.config) === */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px hsl(145 80% 42% / 0.3); }
  50% { box-shadow: 0 0 30px hsl(145 80% 42% / 0.5), 0 0 60px hsl(145 80% 42% / 0.2); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}

/* === Lucide icon defaults === */
[data-lucide] {
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
  flex-shrink: 0;
}

/* === Botão CTA: animação pulse-glow === */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  font-weight: 700;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 0 20px hsl(145 80% 42% / 0.3), 0 0 60px hsl(145 80% 42% / 0.1);
  animation: pulse-glow 2s ease-in-out infinite;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.btn-cta:hover {
  transform: scale(1.05);
}
.btn-cta svg {
  pointer-events: none;
  flex-shrink: 0;
}

.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  font-weight: 700;
  border: 2px solid hsl(var(--primary));
  color: hsl(var(--primary));
  background-color: transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-cta-outline:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Tamanhos de botão */
.btn-size-default { height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-size-sm { height: 2.25rem; border-radius: 0.375rem; padding: 0 0.75rem; font-size: 0.875rem; }
.btn-size-lg { height: 3rem; border-radius: 0.5rem; padding: 0 2rem; font-size: 1rem; }
.btn-size-xl { height: 3.5rem; border-radius: 0.5rem; padding: 0 2.5rem; font-size: 1.125rem; }
.btn-size-icon { height: 2.5rem; width: 2.5rem; }

/* === Acordeon (FAQ) – behavior puro === */
.accordion-item {
  border-bottom: 1px solid hsl(var(--border));
}
.accordion-trigger {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  width: 100%;
  font-weight: 500;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  transition: all 0.2s;
}
.accordion-trigger:hover {
  text-decoration: underline;
}
.accordion-trigger svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.accordion-trigger[data-state="open"] svg {
  transform: rotate(180deg);
}
.accordion-content {
  overflow: hidden;
  font-size: 0.875rem;
  display: none;
}
.accordion-content[data-state="open"] {
  display: block;
  animation: accordion-down 0.2s ease-out;
}
.accordion-content > div {
  padding-bottom: 1rem;
  padding-top: 0;
}

/* Container shadcn alternativo (centro com max width 1280px no 2xl) */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 1536px) {
  .container { max-width: 1280px; }
}

/* === Scrollbar discreto opcional === */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted));
}

/* Fix prose cores no tema escuro (texto/headings de blogposts) */
.prose-invert h1, .prose-invert h2, .prose-invert h3, .prose-invert h4 {
  color: hsl(var(--foreground));
}
.prose-invert p, .prose-invert li {
  color: hsl(var(--muted-foreground));
}