/* CSS Variables - Design System */
:root {
  --background: 0 0% 100%;
  --foreground: 220 15% 20%;

  --card: 0 0% 100%;
  --card-foreground: 220 15% 20%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 15% 20%;

  --primary: 24 100% 50%;
  --primary-foreground: 0 0% 100%;

  --secondary: 207 100% 30%;
  --secondary-foreground: 0 0% 100%;

  --muted: 210 40% 96%;
  --muted-foreground: 220 15% 45%;

  --accent: 45 100% 51%;
  --accent-foreground: 220 15% 20%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 24 100% 50%;

  --radius: 0.75rem;
  
  --gradient-primary: linear-gradient(135deg, hsl(24 100% 50%), hsl(45 100% 51%));
  --gradient-secondary: linear-gradient(135deg, hsl(207 100% 30%), hsl(207 100% 40%));
  --gradient-hero: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%));
  
  --shadow-card: 0 4px 20px -2px hsl(220 15% 20% / 0.08);
  --shadow-hover: 0 8px 30px -4px hsl(24 100% 50% / 0.15);
  
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Base Styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
}

/* Espaço para o header fixo - aplicado apenas na primeira seção */
body > section:first-of-type {
  padding-top: 180px !important;
  margin-top: 0;
}

/* Garantir que o Hero tenha espaço suficiente */
section.relative:first-of-type {
  padding-top: 180px !important;
}

/* Garantir que o h1 não seja cortado */
section:first-of-type h1 {
  margin-top: 0;
  padding-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

/* Utility Classes */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--gradient-primary);
}

.card-hover {
  transition: var(--transition-smooth);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Sombra adicional para cards com shadow-lg */
.shadow-lg {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

/* Cards com melhor contraste */
.bg-card {
  background-color: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out;
}

/* Tailwind Config Override */
.bg-background {
  background-color: hsl(var(--background));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.bg-card {
  background-color: hsl(var(--card));
}

.text-card-foreground {
  color: hsl(var(--card-foreground));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.text-primary {
  color: hsl(var(--primary));
}

.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.text-secondary {
  color: hsl(var(--secondary));
}

.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}

.bg-muted {
  background-color: hsl(var(--muted));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.bg-accent {
  background-color: hsl(var(--accent));
}

.text-accent {
  color: hsl(var(--accent));
}

.border-border {
  border-color: hsl(var(--border));
}

.border-input {
  border-color: hsl(var(--input));
}

/* Custom Input Styles */
input, textarea {
  transition: var(--transition-smooth);
}

input:focus, textarea:focus {
  border-color: hsl(var(--ring));
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Header fixo com background */
header {
  background-color: rgba(248, 250, 252, 0.98) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

header.bg-transparent {
  background-color: rgba(248, 250, 252, 0.98) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Garantir que os cards tenham contraste */
section .bg-card,
.bg-card {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Botões com cores corretas */
button.bg-primary {
  background-color: hsl(24, 100%, 50%) !important;
  color: white !important;
}

button.bg-secondary {
  background-color: hsl(207, 100%, 30%) !important;
  color: white !important;
}

/* Textos com cores corretas */
.text-primary {
  color: hsl(24, 100%, 50%) !important;
}

.text-secondary {
  color: hsl(207, 100%, 30%) !important;
}

.text-accent {
  color: hsl(45, 100%, 51%) !important;
}

.text-muted-foreground {
  color: hsl(220, 15%, 45%) !important;
}

/* Backgrounds com cores corretas */
.bg-primary {
  background-color: hsl(24, 100%, 50%) !important;
}

.bg-secondary {
  background-color: hsl(207, 100%, 30%) !important;
}

.bg-accent {
  background-color: hsl(45, 100%, 51%) !important;
}

.bg-muted {
  background-color: hsl(210, 40%, 96%) !important;
}

.bg-background {
  background-color: hsl(0, 0%, 100%) !important;
}

.text-foreground {
  color: hsl(220, 15%, 20%) !important;
}

.text-primary-foreground {
  color: white !important;
}

.text-secondary-foreground {
  color: white !important;
}

/* Bordas */
.border-border {
  border-color: hsl(220, 13%, 91%) !important;
}

.border-primary {
  border-color: hsl(24, 100%, 50%) !important;
}

/* Modal de Confirmação */
#successModal {
  animation: fadeIn 0.3s ease-out;
}

#successModal > div {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Previne scroll quando modal está aberto */
body.modal-open {
  overflow: hidden;
}