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

:root {
  --background: #ffffff;
  --foreground: #000000;
}

/* Global text color override - all text should be black */
body, html {
  color: #000000 !important;
}

/* Force all text elements to be black */
p, span, div, label, h1, h2, h3, h4, h5, h6,
input, textarea, select, option,
.text-gray-100, .text-gray-200, .text-gray-300,
.text-gray-400, .text-gray-500, .text-gray-600,
.text-gray-700, .text-gray-800, .text-gray-900,
.text-white, .text-black {
  color: #000000 !important;
}

/* Navigation text should be black */
nav, nav *, nav a, nav span, nav div {
  color: #000000 !important;
}

/* Form elements text should be black */
input::placeholder, textarea::placeholder {
  color: #666666 !important;
}

/* Button text exceptions - keep white text on colored buttons */
.bg-blue-600, .bg-blue-500, .bg-blue-700,
.bg-green-600, .bg-green-500, .bg-green-700,
.bg-red-600, .bg-red-500, .bg-red-700,
.bg-yellow-600, .bg-yellow-500, .bg-yellow-700,
.bg-purple-600, .bg-purple-500, .bg-purple-700 {
  color: white !important;
}

.bg-blue-600 *, .bg-blue-500 *, .bg-blue-700 *,
.bg-green-600 *, .bg-green-500 *, .bg-green-700 *,
.bg-red-600 *, .bg-red-500 *, .bg-red-700 *,
.bg-yellow-600 *, .bg-yellow-500 *, .bg-yellow-700 *,
.bg-purple-600 *, .bg-purple-500 *, .bg-purple-700 * {
  color: white !important;
}

/* Dark backgrounds should have white text */
.bg-gray-800, .bg-gray-900, .bg-black {
  color: white !important;
}

.bg-gray-800 *, .bg-gray-900 *, .bg-black * {
  color: white !important;
}

/* Modal and dropdown text should be black */
.modal, .dropdown, .tooltip {
  color: #000000 !important;
}

.modal *, .dropdown *, .tooltip * {
  color: #000000 !important;
}

/* Table text should be black */
table, table *, th, td, thead, tbody, tr {
  color: #000000 !important;
}

/* Tailwind CSS custom properties */
@layer base {
  :root {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
  }
}

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

/* Hero Section - Aggressive Car Theme */
.hero-aggressive {
  background: linear-gradient(135deg,
    #0a0a0a 0%,
    #0f172a 15%,
    #1e293b 30%,
    #334155 45%,
    #475569 60%,
    #64748b 75%,
    #0f172a 90%,
    #000000 100%);
  background-size: 400% 400%;
  animation: aggressiveMove 75s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.hero-aggressive::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(51, 65, 85, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(71, 85, 105, 0.08) 0%, transparent 50%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 41, 59, 0.15) 50%, rgba(0, 0, 0, 0.9) 100%);
  animation: pulseOverlay 60s ease-in-out infinite;
}

.hero-aggressive::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(100, 116, 139, 0.01) 2px,
      rgba(100, 116, 139, 0.01) 4px
    );
  animation: movePattern 175s linear infinite;
}

@keyframes aggressiveMove {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 25%; }
  50% { background-position: 0% 75%; }
  75% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulseOverlay {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes movePattern {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Hero Text Styling - Racing theme */
.hero-title-aggressive {
  background: linear-gradient(45deg, #334155, #475569, #e2e8f0, #334155);
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 20px rgba(51, 65, 85, 0.15),
    0 0 40px rgba(71, 85, 105, 0.1),
    0 0 60px rgba(100, 116, 139, 0.05);
  animation: titleGlow 30s ease-in-out infinite;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}

@keyframes titleGlow {
  0%, 100% {
    background-position: 0% 50%;
    filter: brightness(1);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.2);
  }
}

/* Aggressive Button Styling */
.btn-aggressive {
  background: linear-gradient(45deg, #1e293b, #334155, #475569);
  background-size: 200% 200%;
  border: 2px solid transparent;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 30px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: buttonPulse 40s ease-in-out infinite;
}

.btn-aggressive::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-aggressive:hover::before {
  left: 100%;
}

.btn-aggressive:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow:
    0 10px 25px rgba(51, 65, 85, 0.15),
    0 0 20px rgba(71, 85, 105, 0.1);
}

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

/* Speed lines effect */
.speed-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.speed-lines::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #334155, transparent);
  animation: speedLine1 30s linear infinite;
}

.speed-lines::after {
  content: '';
  position: absolute;
  top: 60%;
  left: -10%;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #475569, transparent);
  animation: speedLine2 25s linear infinite 5s;
}

@keyframes speedLine1 {
  0% { transform: translateX(-100%) translateY(-50%); }
  100% { transform: translateX(100%) translateY(-50%); }
}

@keyframes speedLine2 {
  0% { transform: translateX(-100%) translateY(-50%); }
  100% { transform: translateX(100%) translateY(-50%); }
}