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

/* Instintivo Official Design System - Paleta Oficial 
Verde: #00E58C, Azul: #3387FF, Fucsia: #B500BF, Musgo: #00778C, Índigo: #00006B, Zafiro: #2300BF
*/

@layer base {
  :root {
    /* Official Instintivo Color Palette */
    --background: 0 0% 98%;
    --foreground: 240 100% 21%; /* Índigo #00006B */

    /* Card & Surface Colors */
    --card: 0 0% 100%;
    --card-foreground: 240 100% 21%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 100% 21%;

    /* Primary - Índigo (Trust & Authority) */
    --primary: 240 100% 21%; /* #00006B */
    --primary-foreground: 0 0% 98%;
    --primary-glow: 251 100% 37%; /* Zafiro #2300BF */

    /* Secondary - Musgo (Natural Growth) */
    --secondary: 191 100% 27%; /* #00778C */
    --secondary-foreground: 0 0% 98%;

    /* Accent - Verde (Action & Growth) */
    --accent: 155 100% 45%; /* #00E58C */
    --accent-foreground: 240 100% 21%;
    --accent-glow: 155 100% 55%;

    /* Supporting Brand Colors */
    --azul: 212 100% 64%; /* #3387FF */
    --azul-foreground: 0 0% 98%;
    --fucsia: 302 100% 37%; /* #B500BF */
    --fucsia-foreground: 0 0% 98%;
    --zafiro: 251 100% 37%; /* #2300BF */
    --zafiro-foreground: 0 0% 98%;

    /* Neutral System */
    --muted: 210 15% 96%;
    --muted-foreground: 240 15% 45%;
    --border: 210 20% 90%;
    --input: 210 20% 95%;
    --ring: 240 100% 21%;
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 98%;

    /* Design System Variables */
    --radius: 0.75rem;

    /* Official Brand Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--zafiro)));
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--azul)) 50%, hsl(var(--accent)) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
    --gradient-secondary: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--azul)));
    --gradient-fucsia: linear-gradient(135deg, hsl(var(--fucsia)), hsl(var(--zafiro)));

    /* Professional Shadows */
    --shadow-elegant: 0 20px 40px -12px hsl(var(--primary) / 0.15);
    --shadow-glow: 0 0 40px hsl(var(--accent) / 0.3);
    --shadow-brand: 0 25px 50px -12px hsl(var(--azul) / 0.25);

    /* Typography Scale */
    --font-primary: 'Inter', system-ui, sans-serif;
    --text-display: 4.5rem; /* 72px */
    --text-hero: 3.75rem; /* 60px */
    --text-section: 3rem; /* 48px */
    --text-large: 2rem; /* 32px */
    --text-body: 1.25rem; /* 20px */

    /* Spacing System */
    --section-padding: 8rem;
    --container-padding: 2rem;

    /* Smooth Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .dark {
    --background: 240 100% 8%;
    --foreground: 0 0% 95%;
    --card: 240 100% 10%;
    --card-foreground: 0 0% 95%;
    --popover: 240 100% 10%;
    --popover-foreground: 0 0% 95%;
    --muted: 240 20% 15%;
    --muted-foreground: 210 15% 65%;
    --border: 240 20% 20%;
    --input: 240 20% 15%;
    --ring: 155 100% 55%;
  }

  * {
    font-family: var(--font-primary);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
}

/* Scroll Behavior & Animations */
@layer utilities {
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  
  .parallax-slow {
    transform: translateY(var(--scroll-offset, 0));
  }
  
  .organic-shape {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    filter: blur(60px);
    opacity: 0.6;
    animation: float 8s ease-in-out infinite;
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
  }
  
  .marquee {
    animation: marquee 20s linear infinite;
  }
  
  @keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
  
  .scroll-indicator {
    animation: bounce 2s infinite;
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
  }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .organic-shape {
    display: none; /* Hide decorative elements on mobile for performance */
  }
  
  /* Improve text scaling on mobile */
  .text-display {
    font-size: clamp(2.5rem, 8vw, 4rem) !important;
    line-height: 1.1 !important;
  }
  
  /* Optimize marquee speed on mobile */
  .marquee {
    animation: marquee 15s linear infinite;
  }
  
  /* Reduce motion for better mobile experience */
  @media (prefers-reduced-motion: reduce) {
    .organic-shape,
    .parallax-slow,
    .scroll-indicator {
      animation: none;
    }
  }
}