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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@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%;

    /* Joey Brand Colors */
    --primary: 191 84% 44%;          /* Brand Teal #008FB3 */
    --primary-glow: 191 84% 54%;     /* Lighter teal for gradients */
    --primary-light: 191 84% 96%;    /* Very light teal backgrounds */
    --primary-foreground: 0 0% 100%; /* White text on teal */

    --brand-navy: 225 39% 25%;       /* Navy Blue #2C3E50 */
    --brand-yellow: 48 100% 50%;     /* Yellow/Gold #FFD700 */

    /* Traffic Light System (Safety Status) */
    --status-danger: 0 84% 60%;          /* Red - Not Trusted */
    --status-danger-bg: 0 84% 96%;       /* Light red background */
    --status-warning: 45 100% 51%;       /* Yellow - Caution */
    --status-warning-bg: 45 100% 96%;    /* Light yellow background */
    --status-success: 142 71% 45%;       /* Green - Trusted */
    --status-success-bg: 142 71% 96%;    /* Light green background */

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96%;                /* Light gray */
    --muted-foreground: 215 16% 47%;     /* Medium gray text */

    --accent: 210 40% 96%;               /* Accent highlight */
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214 32% 91%;               /* Light border */
    --input: 214 32% 91%;
    --ring: 191 84% 44%;                 /* Ring uses brand teal */

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Custom section colors */
    --section-light: 0 0% 95.3%;

    /* Joey brand colors - keeping legacy names for backwards compatibility */
    --joey-navy: 225 39% 25%;        /* Updated to match brand navy */
    --joey-cyan: 191 84% 44%;        /* Updated to match brand teal */
  }

  .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: 191 84% 44%;          /* Brand Teal consistent in dark mode */
    --primary-glow: 191 84% 54%;     /* Lighter teal for gradients */
    --primary-light: 191 84% 96%;    /* Very light teal backgrounds */
    --primary-foreground: 0 0% 100%; /* White text on teal */

    --brand-navy: 225 39% 25%;       /* Navy Blue #2C3E50 */
    --brand-yellow: 48 100% 50%;     /* Yellow/Gold #FFD700 */

    /* Traffic Light System (Safety Status) - Dark Mode */
    --status-danger: 0 84% 60%;
    --status-danger-bg: 0 84% 15%;
    --status-warning: 45 100% 51%;
    --status-warning-bg: 45 100% 15%;
    --status-success: 142 71% 45%;
    --status-success-bg: 142 71% 15%;

    --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: 191 84% 44%;                 /* Ring uses brand teal in dark mode */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Custom section colors */
    --section-light: 0 0% 95.3%;

    /* Joey brand colors - keeping legacy names for backwards compatibility */
    --joey-navy: 225 39% 25%;        /* Updated to match brand navy */
    --joey-cyan: 191 84% 44%;        /* Updated to match brand teal */
  }
}

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

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

/* Optimized floating animations for chips with hardware acceleration */
@keyframes float1 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-20px) translateZ(0); 
  }
}

@keyframes float2 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-15px) translateZ(0); 
  }
}

@keyframes float3 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-25px) translateZ(0); 
  }
}

@keyframes float4 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-18px) translateZ(0); 
  }
}

@keyframes float5 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-12px) translateZ(0); 
  }
}

@keyframes float6 {
  0%, 100% { 
    transform: translateY(0px) translateZ(0); 
    will-change: transform;
  }
  50% { 
    transform: translateY(-22px) translateZ(0); 
  }
}

/* Circle movement animations - avoiding center text area */
@keyframes circleMove1 {
  0% { top: 5%; left: 5%; }
  25% { top: 15%; left: 85%; }
  50% { top: 5%; left: 90%; }
  75% { top: 15%; left: 15%; }
  100% { top: 5%; left: 5%; }
}

@keyframes circleMove2 {
  0% { top: 15%; right: 5%; }
  25% { top: 80%; right: 10%; }
  50% { top: 85%; right: 5%; }
  75% { top: 25%; right: 15%; }
  100% { top: 15%; right: 5%; }
}

@keyframes circleMove3 {
  0% { top: 80%; left: 5%; }
  25% { top: 25%; left: 10%; }
  50% { top: 15%; left: 5%; }
  75% { top: 85%; left: 15%; }
  100% { top: 80%; left: 5%; }
}

@keyframes circleMove4 {
  0% { bottom: 5%; left: 15%; }
  25% { bottom: 15%; left: 85%; }
  50% { bottom: 5%; left: 90%; }
  75% { bottom: 15%; left: 25%; }
  100% { bottom: 5%; left: 15%; }
}

/* Scanning animation for grid effect */
@keyframes scan {
  0% { 
    transform: translateX(-100%); 
  }
  100% { 
    transform: translateX(100%); 
  }
}

/* Critical hero styles moved to inline CSS in index.html for faster LCP */
/* This section now contains only non-critical animations and effects */

/* Hero background (restored from former inline CSS) */
.hero-bg {
  background:
    radial-gradient(42% 38% at 75% 35%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
    radial-gradient(60% 50% at 18% 20%, rgba(72, 173, 203, 0.45), rgba(72, 173, 203, 0) 55%),
    linear-gradient(135deg, #1e5f86 0%, #70d1dd 100%);
  background-size: cover;
  background-position: center;
}

/* Make scan effect easy to target and respect reduced motion */
.hero-scan { animation: scan 6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero-scan { animation: none !important; }
}