/* Main CSS Entry Point - Modular Design System */
/* Fonts optimized via preload in index.html - removed duplicate import */
/* Leaflet CSS loaded dynamically only when needed */

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

/* =================================
   DESIGN TOKENS
   ================================= */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;

    /* Custom Sea Colors */
    --sea: 200 85% 45%;
    --sea-light: 200 75% 55%;
    --sea-dark: 200 95% 35%;
    --sand: 45 40% 85%;
    --sand-light: 45 50% 92%;

    /* Company Theme Variables (Dynamic) */
    --company-primary: var(--primary);
    --company-accent: var(--sea);
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }

  /* Base Styles */
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground;
    font-family: 'Lato', system-ui, -apple-system, sans-serif;
  }
}

/* =================================
   COMPONENT UTILITIES
   ================================= */
@layer utilities {
  /* Layout Components */
  .section {
    @apply py-16 md:py-24;
  }
  
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .glass-card {
    @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-lg;
  }

  /* Color Utilities - Sea Theme */
  .text-sea { color: hsl(var(--sea)); }
  .text-sea-light { color: hsl(var(--sea-light)); }
  .text-sea-dark { color: hsl(var(--sea-dark)); }
  .bg-sea { background-color: hsl(var(--sea)); }
  .bg-sea-light { background-color: hsl(var(--sea-light)); }
  .bg-sea-dark { background-color: hsl(var(--sea-dark)); }
  .border-sea { border-color: hsl(var(--sea)); }

  /* Color Utilities - Sand Theme */
  .text-sand { color: hsl(var(--sand)); }
  .text-sand-light { color: hsl(var(--sand-light)); }
  .bg-sand { background-color: hsl(var(--sand)); }
  .bg-sand-light { background-color: hsl(var(--sand-light)); }

  /* Company Theme Utilities */
  .company-themed .text-company-primary { color: hsl(var(--company-primary)); }
  .company-themed .text-company-accent { color: hsl(var(--company-accent)); }
  .company-themed .bg-company-primary { background-color: hsl(var(--company-primary)); }
  .company-themed .bg-company-accent { background-color: hsl(var(--company-accent)); }
  .company-themed .border-company-primary { border-color: hsl(var(--company-primary)); }
  .company-themed .border-company-accent { border-color: hsl(var(--company-accent)); }
}

/* =================================
   ANIMATION SYSTEM
   ================================= */
@layer utilities {
  /* Keyframe Animations */
  @keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(1deg); }
    66% { transform: translateY(-10px) rotate(-1deg); }
  }

  @keyframes float-slow {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-30px) translateX(20px); }
  }

  @keyframes float-slower {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(20px) translateX(-30px); }
  }

  @keyframes pulse-slow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.1; }
  }

  @keyframes grid {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }

  @keyframes waveMotion {
    0% { transform: translateX(-20px) translateY(0); }
    50% { transform: translateX(0) translateY(-5px); }
    100% { transform: translateX(-20px) translateY(0); }
  }

  @keyframes waveMotionDelayed {
    0% { transform: translateX(-10px) translateY(2px); }
    50% { transform: translateX(10px) translateY(-3px); }
    100% { transform: translateX(-10px) translateY(2px); }
  }

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

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

  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes bounceIn {
    from { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes pulseSubtle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.02); }
  }

  @keyframes gridScroll {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
  }

  /* Animation Classes */
  .animate-float { animation: float 6s ease-in-out infinite; }
  .animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
  .animate-float-slower { animation: float-slower 12s ease-in-out infinite; }
  .animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
  .animate-grid { animation: gridScroll 15s linear infinite; }
  .animate-enhanced-wave-motion { animation: waveMotion 4s ease-in-out infinite; }
  .animate-enhanced-wave-motion-delayed { animation: waveMotionDelayed 4s ease-in-out infinite 0.5s; }
  .animate-fade-in { animation: fadeIn 0.6s ease-out; }
  .animate-fade-in-right { animation: fadeInRight 0.6s ease-out; }
  .animate-scale-in { animation: scaleIn 0.6s ease-out; }
  .animate-bounce-in { animation: bounceIn 0.8s ease-out; }
  .animate-pulse-subtle { animation: pulseSubtle 2s ease-in-out infinite; }

  /* Animation Delays */
  .animate-delay-200 { animation-delay: 200ms; }
  .animate-delay-300 { animation-delay: 300ms; }
  .animate-delay-500 { animation-delay: 500ms; }
  .animate-delay-700 { animation-delay: 700ms; }

  /* Animation Controls */
  .no-bounce { animation: none !important; }

  /* Video Blending Effects */
  .video-blend-container {
    position: relative;
  }

  .video-blend-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, 
      hsl(var(--sea) / 0.08), 
      transparent 25%, 
      transparent 75%, 
      hsl(var(--sea-light) / 0.08)
    );
    border-radius: inherit;
    z-index: -1;
    filter: blur(1px);
  }

  .mobile-reduced {
    transform: scale(0.95);
    filter: brightness(1.02) contrast(1.03);
  }

  /* Radial gradient utilities */
  .bg-gradient-radial {
    background-image: radial-gradient(circle, var(--tw-gradient-stops));
  }
}