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

/* Progress bar animation for How It Works section - 15s total with 5s hold */
@keyframes progressFlow {
  0%, 10% { width: 0%; }
  27% { width: 50%; }
  33% { width: 50%; }
  53% { width: 100%; }
  93% { width: 100%; }
  100% { width: 0%; }
}

@keyframes actionBorderShift {
  0% {
    background-position: 0 0, 0% 50%;
  }
  50% {
    background-position: 0 0, 100% 50%;
  }
  100% {
    background-position: 0 0, 0% 50%;
  }
}

/* Step 1 fill */
@keyframes circle1Fill {
  0% { transform: translateY(100%); }
  10% { transform: translateY(0%); }
  92% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* Step 2 fill */
@keyframes circle2Fill {
  0%, 26% { transform: translateY(100%); }
  33% { transform: translateY(0%); }
  92% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* Step 3 fill - holds for 5 seconds before reset */
@keyframes circle3Fill {
  0%, 52% { transform: translateY(100%); }
  60% { transform: translateY(0%); }
  92% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* Text color changes per step */
@keyframes textColor1 {
  0%, 9% { color: #6b7280; }
  10%, 95% { color: white; }
  100% { color: #6b7280; }
}
@keyframes textColor2 {
  0%, 32% { color: #6b7280; }
  33%, 95% { color: white; }
  100% { color: #6b7280; }
}
@keyframes textColor3 {
  0%, 59% { color: #6b7280; }
  60%, 95% { color: white; }
  100% { color: #6b7280; }
}

/* 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;
}

/* Mobile-first padding to reveal art and keep copy readable */
@media (max-width: 767px) {
  .hero-bg {
    padding-top: clamp(32px, 6vh, 56px) !important;
    padding-bottom: clamp(72px, 14vh, 128px) !important;
  }
}

/* Mobile hero now ships text-only; decorative artwork stays desktop-only */

/* Soft top gradient to improve text contrast on mobile */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.10) 20%,
    rgba(0,0,0,0) 45%
  );
  pointer-events: none;
  z-index: 2; /* above art, below scan/grid (z-5) and content (z-10) */
}

/* 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; }
}

@layer components {
  .joey-gradient-button {
    background-image: linear-gradient(
      120deg,
      hsl(var(--brand-navy)) 0%,
      hsl(var(--primary)) 55%,
      hsl(var(--primary-glow)) 100%
    );
  }

  .action-border {
    position: relative;
    border-radius: 2rem;
    border: 1px solid transparent;
    --action-gradient: linear-gradient(
      135deg,
      rgba(0, 178, 255, 0.8) 0%,
      rgba(0, 116, 209, 0.7) 45%,
      rgba(20, 54, 110, 0.8) 100%
    );
    --action-shadow: rgba(17, 89, 160, 0.16);
    --action-shadow-hover: rgba(17, 89, 160, 0.24);
    background:
      linear-gradient(0deg, hsl(var(--card)) 0%, hsl(var(--card)) 100%) padding-box,
      var(--action-gradient) border-box;
    background-size: 100% 100%, 260% 260%;
    animation: actionBorderShift 10s ease-in-out infinite;
    transition: box-shadow 300ms ease, animation-duration 300ms ease;
    box-shadow: 0 16px 44px var(--action-shadow);
  }

  .action-border:hover {
    animation-duration: 7s;
    box-shadow: 0 22px 52px var(--action-shadow-hover);
  }

  .action-border--child {
    --action-gradient: linear-gradient(
      135deg,
      rgba(0, 204, 255, 0.95) 0%,
      rgba(33, 161, 241, 0.85) 45%,
      rgba(14, 74, 136, 0.9) 100%
    );
    --action-shadow: rgba(25, 134, 214, 0.2);
    --action-shadow-hover: rgba(25, 134, 214, 0.28);
  }

  .action-border--alerts {
    --action-gradient: linear-gradient(
      135deg,
      rgba(20, 220, 202, 0.9) 0%,
      rgba(34, 148, 196, 0.85) 40%,
      rgba(23, 51, 111, 0.92) 100%
    );
    --action-shadow: rgba(18, 102, 142, 0.2);
    --action-shadow-hover: rgba(18, 102, 142, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-border {
    animation: none;
    background-position: 0 0, 50% 50%;
  }
}