@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --brand-red: #e10600;
  --brand-black: #000000;
  --brand-white: #ffffff;
  --brand-dark-navy: #1a2332;
  --brand-gray-light: #e5e5e5;
  --brand-gray-medium: #63666a;
  --brand-gray-dark: #53565a;
  --text-gray: #5f6368;
  --text-gray2: #c4c4c4;
  --secondary-black: #111111;
  --gray-black1: #1f1f1f;

  /* Analogous Colors */
  --brand-orange: #d87e28;
  --brand-magenta: #e0218a;
  --brand-cyan: #00b5e2;
  --brand-blue: #0057b8;
  --brand-lime: #7ac143;
  --brand-purple: #9b26b6;

  /* shadcn/ui Theme Variables */
  --background: 0 0% 100%;
  --foreground: 210 17% 15%;
  --card: 0 0% 100%;
  --card-foreground: 210 17% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 210 17% 15%;
  --primary: 0 81% 53%;
  --primary-foreground: 0 0% 98%;
  --secondary: 210 20% 92%;
  --secondary-foreground: 210 17% 15%;
  --muted: 210 20% 92%;
  --muted-foreground: 215 14% 48%;
  --accent: 210 20% 92%;
  --accent-foreground: 210 17% 15%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 0 81% 53%;
  --radius: 0.5rem;
  --sidebar: #1f1f1f;
  --sidebar-foreground: #fff;
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent:  #e10600;
  --sidebar-accent-foreground: #fff;
  --sidebar-border: hsl(220 13% 91%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --foreground: 0 0% 98%;
    --card: 210 17% 15%;
    --card-foreground: 0 0% 98%;
    --popover: 210 17% 15%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 81% 53%;
    --primary-foreground: 0 0% 98%;
    --secondary: 210 17% 23%;
    --secondary-foreground: 0 0% 98%;
    --muted: 210 17% 23%;
    --muted-foreground: 215 14% 64%;
    --accent: 210 17% 23%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 210 17% 23%;
    --input: 210 17% 23%;
    --ring: 0 81% 63%;
  }
}

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-brand-red: var(--brand-red);
  --color-brand-black: var(--brand-black);
  --color-brand-white: var(--brand-white);
  --color-brand-dark-navy: var(--brand-dark-navy);
  --color-brand-gray-dark: var(--brand-gray-dark);
  --color-brand-orange: var(--brand-orange);
  --color-brand-magenta: var(--brand-magenta);
  --color-brand-cyan: var(--brand-cyan);
  --color-brand-blue: var(--brand-blue);
  --color-brand-lime: var(--brand-lime);
  --color-brand-purple: var(--brand-purple);
  --color-text-gray: var(--text-gray);
  --color-text-gray2: var(--text-gray2);
  --color-secondary-black: var(--secondary-black);
  --color-gray-black1: var(--gray-black1);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-display: var(--font-humane);

  /* Marquee Animations */
  --animate-marquee: marquee var(--duration) linear infinite;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
  --animate-in: fade-in 0.2s ease-out, zoom-in-95 0.2s ease-out;
  --animate-out: fade-out 0.2s ease-in, zoom-out-95 0.2s ease-in;
  --animate-slide-in-from-right: slide-in-from-right 0.3s ease-out;
  --animate-slide-out-to-right: slide-out-to-right 0.3s ease-in;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);

  @keyframes slide-in-from-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  @keyframes slide-out-to-right {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }
}

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

body {
  background: var(--brand-black);
  color: hsl(var(--foreground));
  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .heading-1 {
    @apply text-5xl! lg:text-7xl uppercase font-display! md:tracking-[1px];
  }

  .btn-primary {
    @apply bg-brand-red hover:bg-brand-red/90 text-black font-bold text-sm uppercase py-2.5 px-6 tracking-widest transition-all duration-300 cursor-pointer;
  }

  .btn-primary:hover {
    @apply transform scale-105 shadow-lg;
  }

  .btn-secondary {
    @apply relative px-8 py-3 bg-white text-black font-semibold rounded-full hover:opacity-90 transition-all duration-300 cursor-pointer;
  }
.input {
  @apply w-full px-4 py-2 rounded-lg outline-none transition-all bg-secondary-black text-brand-white border border-brand-gray-dark placeholder:text-gray-600 focus:border-brand-red focus:ring-2 focus:ring-brand-red;
}

  .container {
    @apply container mx-auto px-3 md:px-5;
  }

  .font-display {
    font-family: var(--font-humane), var(--font-sans), sans-serif;
  }

  .text-brand-red {
    color: var(--brand-red);
  }

  .bg-brand-red {
    background-color: var(--brand-red);
  }

  .bg-brand-navy {
    background-color: var(--brand-dark-navy);
  }

  /* Marquee Animation Classes */
  .animate-marquee {
    animation: marquee var(--duration, 40s) linear infinite;
  }

  .animate-marquee-vertical {
    animation: marquee-vertical var(--duration, 40s) linear infinite;
  }

  .group:hover .group-hover\:\[animation-play-state\:paused\] {
    animation-play-state: paused;
  }

  .\[animation-direction\:reverse\] {
    animation-direction: reverse;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--brand-black);
}

::-webkit-scrollbar-thumb {
  background-color: var(--brand-red);
  border-radius: 9999px;
  border: 2px solid var(--brand-black);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ff1a14;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #111111 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid #53565a !important;
  transition: background-color 5000s ease-in-out 0s;
}

input[name="phone"]:-webkit-autofill,
input[name="phone"]:-webkit-autofill:hover,
input[name="phone"]:-webkit-autofill:focus,
input[name="phone"]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #111111 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid #e10600 !important;
}

.dark {
  --sidebar: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}