/* Imago Logistics Design System */

:root {
  /* Brand Yellow - 48° 90% 57% */
  --brand: 48 90% 57%;
  --brand-foreground: 0 0% 13%;

  /* Backgrounds */
  --background: 0 0% 100%;
  --foreground: 0 0% 13%;

  --card: 0 0% 98%;
  --card-foreground: 0 0% 13%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 13%;

  /* Primary is the brand yellow */
  --primary: 48 90% 57%;
  --primary-foreground: 0 0% 13%;

  /* Secondary is charcoal/dark gray */
  --secondary: 0 0% 0%;
  --secondary-foreground: 0 0% 98%;

  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;

  --accent: 48 90% 57%;
  --accent-foreground: 0 0% 13%;

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

  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 48 90% 57%;

  --radius: 0.5rem;

  /* Gradient for animated borders */
  --gradient-start: 48 90% 57%;
  --gradient-mid: 35 95% 50%;
  --gradient-end: 25 100% 45%;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 26%;
  --sidebar-primary: 0 0% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 95%;
  --sidebar-accent-foreground: 0 0% 10%;
  --sidebar-border: 0 0% 91%;
  --sidebar-ring: 48 90% 57%;
}

.dark {
  --background: 220 20% 8%;
  --foreground: 0 0% 95%;

  --card: 220 20% 12%;
  --card-foreground: 0 0% 95%;

  --popover: 220 20% 10%;
  --popover-foreground: 0 0% 95%;

  --primary: 48 90% 57%;
  --primary-foreground: 0 0% 13%;

  --secondary: 0 0% 0%;
  --secondary-foreground: 0 0% 95%;

  --muted: 220 20% 15%;
  --muted-foreground: 0 0% 60%;

  --accent: 48 90% 57%;
  --accent-foreground: 0 0% 13%;

  --destructive: 0 62% 30%;
  --destructive-foreground: 0 0% 98%;

  --border: 220 20% 20%;
  --input: 220 20% 20%;
  --ring: 48 90% 57%;

  --sidebar-background: 220 20% 10%;
  --sidebar-foreground: 0 0% 95%;
  --sidebar-primary: 48 90% 57%;
  --sidebar-primary-foreground: 0 0% 13%;
  --sidebar-accent: 220 20% 15%;
  --sidebar-accent-foreground: 0 0% 95%;
  --sidebar-border: 220 20% 15%;
  --sidebar-ring: 48 90% 57%;
}

/* Base Styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Utilities */

/* Animated gradient border */
.gradient-border {
  position: relative;
  background: hsl(var(--card));
  border-radius: var(--radius);
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(
    135deg,
    hsl(var(--gradient-start)),
    hsl(var(--gradient-mid)),
    hsl(var(--gradient-end)),
    hsl(var(--gradient-start))
  );
  background-size: 300% 300%;
  animation: gradient-shift 4s ease infinite;
  z-index: -1;
}

.gradient-border-animated::before {
  animation: gradient-shift 3s ease infinite;
}

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

/* Text gradient */
.text-gradient {
  background: linear-gradient(
    135deg,
    hsl(var(--gradient-start)),
    hsl(var(--gradient-mid))
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow effects */
.glow-primary {
  box-shadow: 0 0 40px hsl(var(--primary) / 0.3);
}

.glow-primary-lg {
  box-shadow: 0 0 80px hsl(var(--primary) / 0.4);
}

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

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-left {
  animation: slideInLeft 0.6s ease-out forwards;
}

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

.animate-slide-in-right {
  animation: slideInRight 0.6s ease-out forwards;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
  }
  50% {
    box-shadow: 0 0 40px hsl(var(--primary) / 0.5);
  }
}


.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Light Mode Transparent Header Fix */
/* When in light mode and header is transparent (at top), use white text for nav links, excluding the active primary one */
html:not(.dark) header.bg-transparent nav a:not(.text-primary) {
  color: hsl(0 0% 100%); /* White */
}

/* Ensure hover state still works (optional, or keep it white/primary) */
html:not(.dark) header.bg-transparent nav a:not(.text-primary):hover {
  color: hsl(var(--primary));
}

/* Also fix theme toggle button icon if needed */
html:not(.dark) header.bg-transparent .theme-toggle-btn {
  color: hsl(0 0% 100%);
}

/* Ensure mobile menu button is visible */
html:not(.dark) header.bg-transparent #mobile-menu-btn {
  color: hsl(0 0% 100%);
}