/* Tailwind CSS Directives - v3.4.1 */
/* eslint-disable-next-line at-rule-no-unknown */
@tailwind base;
/* eslint-disable-next-line at-rule-no-unknown */
@tailwind components;
/* eslint-disable-next-line at-rule-no-unknown */
@tailwind utilities;

/* Custom CSS Variables and Overrides */
:root {
  --color-primary: #E6E6FA; /* Lavender */
  --color-primary-dark: #D8BFD8; /* Thistle */
  --color-accent: #4C6EF5; /* Professional Blue */
  --color-accent-light: #5C7CFA;
  --color-secondary: #495057; /* Professional Gray */
  --color-secondary-light: #6C757D;
  --color-danger: #dc2626;
  --color-danger-light: #ef4444;
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
}

/* Dark Mode Variables */
.dark {
  --color-primary: #D8BFD8; /* Darker Lavender */
  --color-primary-dark: #C8B2DB;
  --color-accent: #5C7CFA; /* Lighter Blue for dark mode */
  --color-accent-light: #7C8FFA;
  --color-secondary: #6C757D;
  --color-secondary-light: #868E96;
  --color-white: #1f2937; /* Dark background */
  --color-gray-50: #374151;
  --color-gray-100: #4b5563;
  --color-gray-200: #6b7280;
  --color-gray-300: #9ca3af;
  --color-gray-400: #d1d5db;
  --color-gray-500: #e5e7eb;
  --color-gray-600: #f3f4f6;
  --color-gray-700: #f9fafb;
  --color-gray-800: #ffffff;
  --color-gray-900: #ffffff;
}

/* Dark mode test styles */
.dark body {
  background-color: #111827 !important;
}

body {
  background-color: #ffffff !important;
  transition: background-color 0.3s ease;
}

.dark .bg-white {
  background-color: #1f2937 !important;
}

.dark .bg-gray-50 {
  background-color: #374151 !important;
}

.dark .bg-gray-100 {
  background-color: #4b5563 !important;
}

/* Fix for footer - don't override gray-900 in light mode */
.bg-gray-900 {
  background-color: #111827 !important;
}

.dark .bg-gray-900 {
  background-color: #111827 !important;
}

.dark .text-gray-900 {
  color: #ffffff !important;
}

.dark .text-gray-800 {
  color: #f9fafb !important;
}

.dark .text-gray-700 {
  color: #f3f4f6 !important;
}

.dark .text-gray-600 {
  color: #e5e7eb !important;
}

.dark .text-gray-500 {
  color: #d1d5db !important;
}

.dark .text-gray-400 {
  color: #9ca3af !important;
}

.dark .border-gray-200 {
  border-color: #4b5563 !important;
}

.dark .border-gray-300 {
  border-color: #6b7280 !important;
}

/* Hero section dark mode */
.dark .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #111827, #581c87) !important;
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #f9fafb, #e6e6fa) !important;
  transition: background-image 0.3s ease;
}

.dark .shadow-soft {
  box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-lg {
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4) !important;
}

/* Navbar dark mode */
.dark .bg-white\/95 {
  background-color: rgba(17, 24, 39, 0.95) !important;
}

.bg-white\/95 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  transition: background-color 0.3s ease;
}

.dark .backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
}

/* Buttons dark mode */
.dark .hover\:bg-gray-50:hover {
  background-color: #374151 !important;
}

.dark .hover\:text-primary:hover {
  color: #d8bfd8 !important;
}

/* Logo container dark mode */
.dark .bg-white\/10 {
  background-color: rgba(17, 24, 39, 0.2) !important;
}

.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1) !important;
  transition: background-color 0.3s ease;
}

.dark .border-white\/50 {
  border-color: rgba(156, 163, 175, 0.5) !important;
}

.border-white\/50 {
  border-color: rgba(255, 255, 255, 0.5) !important;
  transition: border-color 0.3s ease;
}

/* Icon containers dark mode */
.dark .bg-accent\/10 {
  background-color: rgba(139, 92, 246, 0.2) !important;
}

.bg-accent\/10 {
  background-color: rgba(76, 110, 245, 0.1) !important;
  transition: background-color 0.3s ease;
}

.dark .bg-accent\/20 {
  background-color: rgba(139, 92, 246, 0.3) !important;
}

.bg-accent\/20 {
  background-color: rgba(76, 110, 245, 0.2) !important;
  transition: background-color 0.3s ease;
}

/* Trust indicators dark mode */
.dark .bg-accent {
  background-color: #8b5cf6 !important;
}

.bg-accent {
  background-color: #4c6ef5 !important;
  transition: background-color 0.3s ease;
}

/* Floating elements dark mode */
.dark .border-white\/50 {
  border-color: rgba(156, 163, 175, 0.3) !important;
}

/* Mobile menu dark mode */
.dark .bg-white {
  background-color: #1f2937 !important;
}

.dark .text-gray-600 {
  color: #e5e7eb !important;
}

.dark .border-gray-200 {
  border-color: #374151 !important;
}

.dark .hover\:bg-gray-50:hover {
  background-color: #374151 !important;
}

/* Scroll indicator dark mode */
.dark .text-gray-400 {
  color: #9ca3af !important;
}

/* SVG icons dark mode */
.dark .text-white svg {
  color: #ffffff !important;
}

.dark .text-gray-600 svg {
  color: #e5e7eb !important;
}

/* Remove all green colors */
.bg-green-50,
.bg-green-100,
.bg-green-200,
.bg-green-300,
.bg-green-400,
.bg-green-500,
.bg-green-600,
.bg-green-700,
.bg-green-800,
.bg-green-900,
.text-green-50,
.text-green-100,
.text-green-200,
.text-green-300,
.text-green-400,
.text-green-500,
.text-green-600,
.text-green-700,
.text-green-800,
.text-green-900,
.border-green-50,
.border-green-100,
.border-green-200,
.border-green-300,
.border-green-400,
.border-green-500,
.border-green-600,
.border-green-700,
.border-green-800,
.border-green-900,
.hover\:bg-green-50:hover,
.hover\:bg-green-100:hover,
.hover\:bg-green-200:hover,
.hover\:bg-green-300:hover,
.hover\:bg-green-400:hover,
.hover\:bg-green-500:hover,
.hover\:bg-green-600:hover,
.hover\:bg-green-700:hover,
.hover\:bg-green-800:hover,
.hover\:bg-green-900:hover {
  background-color: transparent !important;
  color: inherit !important;
  border-color: transparent !important;
}

/* Force remove green from any element */
[class*="green"] {
  background-color: transparent !important;
  color: inherit !important;
  border-color: transparent !important;
}

/* Additional Variables */
:root {
  --color-purple-light: #f3e8ff;
  --color-purple-medium: #e9d5ff;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    font-weight: 400;
    color-scheme: light;
    color: var(--color-gray-800);
    background-color: var(--color-gray-50);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background-color: var(--color-gray-50);
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-gray-900);
  }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1.125rem; }
  h6 { font-size: 1rem; }

  p {
    margin-bottom: 1rem;
    color: var(--color-gray-600);
  }

  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  a:hover {
    color: var(--color-primary-dark);
  }
}

/* Tailwind CSS Components Layer */
@layer components {
  .container {
    /* eslint-disable-next-line at-rule-no-unknown */
    @apply max-w-7xl mx-auto px-4;
  }

  .btn {
    /* eslint-disable-next-line at-rule-no-unknown */
    @apply inline-flex items-center justify-center px-6 py-3 border-none rounded-xl text-base font-medium text-white cursor-pointer transition-all duration-200 whitespace-nowrap;
  }

  .btn-primary {
    /* eslint-disable-next-line at-rule-no-unknown */
    @apply bg-accent hover:bg-accent-light hover:-translate-y-0.5 hover:shadow-lg;
  }

  .btn-accent {
    /* eslint-disable-next-line at-rule-no-unknown */
    @apply bg-primary hover:bg-primary-dark hover:-translate-y-0.5 hover:shadow-lg;
  }

  .btn-danger {
    /* eslint-disable-next-line at-rule-no-unknown */
    @apply bg-danger hover:bg-danger-light hover:-translate-y-0.5 hover:shadow-lg;
  }

  .btn-outline {
    /* eslint-disable-next-line at-rule-no-unknown */
    @apply bg-transparent text-accent border-2 border-accent hover:bg-accent hover:text-white;
  }

  .card {
    /* eslint-disable-next-line at-rule-no-unknown */
    @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
  }
}

@layer utilities {
  .line-clamp-2 {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .line-clamp-3 {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-line-clamp: 3;
    -moz-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
  
  /* tailwindcss@3.4.1 - Mobile Responsive Overrides */
  .container {
    @apply px-3;
  }
  
  .btn {
    @apply px-5 py-2.5 text-sm;
  }
  
  .card {
    @apply p-6;
  }
}
