/* TrustLayer Custom CSS Design Tokens & Utilities */

:root {
  --radius: 1rem;
  --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: 221.2 83.2% 53.3%; /* converted oklch(0.52 0.29 264) to hsl/rgb equivalents for Tailwind compatibility */
  --primary-foreground: 210 40% 98%;

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

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

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

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

  --success: 142.1 76.2% 36.3%;
  --success-foreground: 355.7 100% 97.3%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
}

[data-landing],
[data-auth] {
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --ring: 221.2 83.2% 53.3%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Custom Utilities */
.text-gradient-brand {
  background-image: linear-gradient(
    110deg,
    hsl(var(--primary)),
    hsl(255, 92%, 66%),
    hsl(199, 95%, 55%),
    hsl(var(--primary))
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bg-grid-faint {
  background-image:
    linear-gradient(to right, hsla(var(--primary), 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(var(--primary), 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

.mask-fade-x {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Animations */
@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

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

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

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.55; }
  70% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes blob-drift {
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.08); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

.animate-gradient-x {
  animation: gradient-x 6s ease infinite;
}

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

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

.animate-marquee {
  animation: marquee 40s linear infinite;
}

.animate-marquee-reverse {
  animation: marquee-reverse 40s linear infinite;
}

.animate-shimmer {
  animation: shimmer 2.5s infinite;
}

.animate-pulse-ring {
  animation: pulse-ring 2.4s cubic-bezier(0.4,0,0.6,1) infinite;
}

.animate-blob-drift {
  animation: blob-drift 18s ease-in-out infinite;
}

/* Lucide Icon scaling fix */
svg.lucide {
  display: inline-block;
  vertical-align: middle;
}