@tailwind base;
@tailwind components;
@tailwind utilities;

/* SCALE AI Brandbook - Design System
All colors following SCALE AI brand guidelines in HSL format.
*/

@layer base {
  :root {
    /* SCALE AI Brand Colors - Primary Palette */
    --background: 0 0% 98%; /* Cinza Muito Claro */
    --foreground: 214 32% 17%; /* Azul Marinho Escuro #1E2A3A */

    --card: 0 0% 100%; /* Branco Puro */
    --card-foreground: 214 32% 17%; /* Azul Marinho Escuro */

    --popover: 0 0% 100%; /* Branco Puro */
    --popover-foreground: 214 32% 17%; /* Azul Marinho Escuro */

    /* Primary - Bege/Dourado da marca */
    --primary: 34 23% 70%; /* Bege/Dourado Claro #C4B5A0 */
    --primary-foreground: 214 32% 17%; /* Azul Marinho para contraste */
    --primary-glow: 34 30% 75%; /* Variação mais clara do bege */

    /* Secondary - Azul Marinho */
    --secondary: 214 32% 17%; /* Azul Marinho Escuro */
    --secondary-foreground: 0 0% 100%; /* Branco */

    /* Muted - Tons neutros */
    --muted: 37 20% 90%; /* Variação do fundo neutro */
    --muted-foreground: 220 9% 46%; /* Cinza Médio #6B7280 */

    /* Accent - Bege escuro */
    --accent: 32 18% 57%; /* Bege Escuro #A39080 */
    --accent-foreground: 214 32% 17%; /* Azul Marinho */

    /* Cores de ação do brandbook */
    --destructive: 0 84% 60%; /* Vermelho Alerta #EF4444 */
    --destructive-foreground: 0 0% 100%;

    --success: 161 84% 39%; /* Verde Sucesso #10B981 */
    --action-blue: 213 93% 68%; /* Azul Ação #3B82F6 */

    --border: 32 18% 57%; /* Bege Escuro para borders */
    --input: 37 20% 90%; /* Fundo sutil para inputs */
    --ring: 34 23% 70%; /* Primary color para focus ring */

    --radius: 1rem;

    /* Gradientes com cores da marca */
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-glow)) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
    --gradient-card: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(var(--accent) / 0.1) 100%);
    --gradient-brand: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
    
    /* Sombras com cores da marca */
    --shadow-soft: 0 4px 20px -8px hsl(var(--primary) / 0.15);
    --shadow-hover: 0 8px 40px -12px hsl(var(--primary) / 0.25);
    --shadow-glow: 0 0 40px hsl(var(--primary-glow) / 0.3);
    --shadow-brand: 0 10px 30px -10px hsl(var(--secondary) / 0.2);
    
    /* Animation variables */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .dark {
    /* Dark mode - adaptação do brandbook */
    --background: 214 32% 8%; /* Azul marinho muito escuro */
    --foreground: 37 33% 95%; /* Fundo neutro como texto */

    --card: 214 32% 12%; /* Azul marinho escuro para cards */
    --card-foreground: 37 33% 95%;

    --popover: 214 32% 12%;
    --popover-foreground: 37 33% 95%;

    --primary: 34 25% 75%; /* Bege mais claro no dark */
    --primary-foreground: 214 32% 8%;
    --primary-glow: 34 30% 80%;

    --secondary: 214 32% 15%; /* Azul marinho mais claro */
    --secondary-foreground: 37 33% 95%;

    --muted: 214 32% 15%;
    --muted-foreground: 220 9% 65%;

    --accent: 32 20% 40%; /* Bege escuro adaptado */
    --accent-foreground: 37 33% 95%;

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

    --success: 161 84% 39%;
    --action-blue: 213 93% 68%;

    --border: 214 32% 20%;
    --input: 214 32% 15%;
    --ring: 34 25% 75%;
    
    /* Dark mode gradients */
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-glow)) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--card)) 100%);
    --gradient-card: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(var(--accent) / 0.2) 100%);
    --gradient-brand: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  html {
    scroll-behavior: smooth;
  }

  /* Modern typography scale */
  .text-hero {
    @apply text-5xl md:text-7xl font-bold leading-tight tracking-tight;
  }
  
  .text-heading {
    @apply text-3xl md:text-4xl font-bold leading-tight;
  }
  
  .text-subheading {
    @apply text-xl md:text-2xl font-medium leading-relaxed;
  }
  
  .text-body-large {
    @apply text-lg leading-relaxed;
  }

  /* Utility classes for gradients - SCALE AI */
  .bg-gradient-hero {
    background: var(--gradient-hero);
  }
  
  .bg-gradient-subtle {
    background: var(--gradient-subtle);
  }
  
  .bg-gradient-card {
    background: var(--gradient-card);
  }

  .bg-gradient-brand {
    background: var(--gradient-brand);
  }

  /* Utility classes para cores específicas do brandbook */
  .text-brand-primary {
    @apply text-[hsl(var(--primary))];
  }

  .text-brand-navy {
    @apply text-[hsl(var(--secondary))];
  }

  .bg-brand-primary {
    @apply bg-[hsl(var(--primary))];
  }

  .bg-brand-navy {
    @apply bg-[hsl(var(--secondary))];
  }

  .border-brand-primary {
    @apply border-[hsl(var(--primary))];
  }

  /* Animation utilities */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .transition-smooth {
    transition: var(--transition-smooth);
  }
  
  .transition-bounce {
    transition: var(--transition-bounce);
  }
}

/* Custom animations for the landing page */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

@keyframes fade-in-up {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Apply animations */
.animate-fade-in {
  animation: fade-in 0.8s ease-out;
}

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

/* Mobile optimizations for better UX */
@layer components {
  /* Ensure better touch targets on mobile */
  @media (max-width: 640px) {
    /* Prevent zoom on input focus (iOS Safari) */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
      font-size: 16px !important;
    }
    
    /* Better touch targets */
    .mobile-touch-target {
      @apply min-h-[44px] min-w-[44px];
    }
    
    /* Improved form field spacing */
    .mobile-form-spacing {
      @apply space-y-6;
    }
    
    /* Mobile-friendly buttons */
    .mobile-button {
      @apply h-12 px-6 text-base font-medium;
    }
    
    /* Enhanced input fields */
    .mobile-input {
      @apply h-12 text-base border-2 focus:border-primary focus:ring-2 focus:ring-primary/20;
    }
    
    /* Better dialog on mobile */
    .mobile-dialog {
      @apply w-full max-w-[95vw] max-h-[90vh] m-2;
    }
  }
  
  
  /* Enhanced form elements */
  .form-field-enhanced {
    @apply border-2 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200;
  }
  
  /* Better dropdown visibility with high z-index */
  .dropdown-enhanced {
    @apply bg-popover border shadow-lg z-50 backdrop-blur-sm;
  }
  
  /* Required field indicator */
  .field-required::after {
    content: ' *';
    @apply text-destructive;
  }
  
  /* Accessible badge variant with improved contrast */
  .badge-accessible {
    @apply inline-block px-3 py-1 bg-accent/20 text-secondary rounded-full text-sm font-medium;
  }
}