@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* VivaTag Design System - Natureza + Tecnologia + Humanização */

:root {
    /* Cores principais VivaTag */
    --vivid-green: 94 73% 48%;        /* #7ED321 - Verde Vivo */
    --tech-turquoise: 168 80% 43%;    /* #16C4A1 - Turquesa Tecnologia */
    --deep-turquoise: 171 84% 34%;    /* #0E9F89 - Turquesa Profundo */
    --charcoal: 0 0% 16%;             /* #2A2A2A - Cinza Carvão */
    --soft-gray: 0 0% 95%;            /* #F2F2F2 - Cinza Suave */
    
    /* Design system tokens */
    --background: 0 0% 100%;
    --foreground: 0 0% 16%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 16%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 16%;

    --primary: 94 73% 48%;            /* Verde Vivo */
    --primary-foreground: 0 0% 100%;

    --secondary: 168 80% 43%;         /* Turquesa Tecnologia */
    --secondary-foreground: 0 0% 100%;

    --muted: 0 0% 95%;
    --muted-foreground: 0 0% 45%;

    --accent: 171 84% 34%;            /* Turquesa Profundo */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 94 73% 48%;

    --radius: 1rem;

    /* Gradientes */
    --gradient-primary: linear-gradient(45deg, hsl(94 73% 48%), hsl(168 80% 43%));
    --gradient-secondary: linear-gradient(90deg, hsl(168 80% 43%), hsl(171 84% 34%));
    --gradient-hero: linear-gradient(135deg, hsl(94 73% 48% / 0.1), hsl(168 80% 43% / 0.1));
    
    /* Sombras suaves */
    --shadow-soft: 0 4px 20px -2px hsl(0 0% 0% / 0.08);
    --shadow-medium: 0 10px 40px -4px hsl(0 0% 0% / 0.12);
    --shadow-glow: 0 0 30px hsl(94 73% 48% / 0.3);
    
    /* Transições */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

.text-gradient {
    background: linear-gradient(to right, hsl(var(--vivid-green)), hsl(var(--tech-turquoise)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
  
.gradient-primary {
    background: var(--gradient-primary);
}
  
.gradient-secondary {
    background: var(--gradient-secondary);
}
  
.shadow-soft {
    box-shadow: var(--shadow-soft);
}
  
.shadow-medium {
    box-shadow: var(--shadow-medium);
}
  
.shadow-glow {
    box-shadow: var(--shadow-glow);
}
  
.transition-smooth {
    transition: var(--transition-smooth);
}

/* Animações de entrada */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px hsl(var(--vivid-green) / 0.4);
    }
    50% {
        box-shadow: 0 0 40px hsl(var(--vivid-green) / 0.6);
    }
}

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

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

.animate-slide-in-right {
    animation: slide-in-right 0.6s ease-out forwards;
}

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

/* Delays para animações escalonadas */
.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

/* Custom Utilities for PHP adaptation */
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.border-border { border-color: hsl(var(--border)); }

.text-primary { color: hsl(var(--primary)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }

.text-secondary { color: hsl(var(--secondary)); }
.bg-secondary\/10 { background-color: hsl(var(--secondary) / 0.1); }

.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.bg-soft-gray { background-color: hsl(var(--soft-gray)); }
.text-charcoal { color: hsl(var(--charcoal)); }

.min-h-screen { min-height: 100vh; }
 
/* Garantir que popups do SweetAlert2 fiquem sempre à frente de qualquer modal/backdrop */
.swal2-container {
    z-index: 999999 !important;
}