/* 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;
  /* Refined Lavender/Purple for better visibility */
  --color-primary-light: #E9D5FF;
  /* Soft Lavender for backgrounds */
  --color-primary-dark: #805AD5;
  --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-soft-white: #F8F9FA;
  /* Soft White Foundation */
  --color-gray-50: #F8F9FA;
  /* Matches soft white */
  --color-gray-100: #f3f4f6;
  --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,
.from-green-50,
.from-green-100,
.from-green-200,
.from-green-300,
.from-green-400,
.from-green-500,
.from-green-600,
.from-green-700,
.from-green-800,
.from-green-900,
.to-green-50,
.to-green-100,
.to-green-200,
.to-green-300,
.to-green-400,
.to-green-500,
.to-green-600,
.to-green-700,
.to-green-800,
.to-green-900 {
  background-color: transparent !important;
  color: inherit !important;
  border-color: transparent !important;
  background-image: none !important;
}

/* Force remove green from any element */
[class*="green"] {
  background-color: transparent !important;
  color: inherit !important;
  border-color: transparent !important;
  background-image: none !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);
  }

  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

/* 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;
  }
}

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

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}

/* Blue Highlighter / Stabilo Effect - Per-letter animated */
.highlight-marker {
  position: relative;
  display: inline;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  color: transparent;
  background: linear-gradient(to right, #ffffff 50%, #374151 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: marker-text-reveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: calc(var(--delay, 0) * 1s);
}

.highlight-marker::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: rgba(25, 25, 112, 0.85);
  border-radius: 3px;
  z-index: -1;
  animation: marker-sweep 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: calc(var(--delay, 0) * 1s);
}

@keyframes marker-sweep {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes marker-text-reveal {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0% 0;
  }
}

/* Dark mode */
.dark .highlight-marker {
  background: linear-gradient(to right, #ffffff 50%, #d1d5db 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dark .highlight-marker::before {
  background: rgba(80, 100, 220, 0.85);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}

::-webkit-scrollbar-thumb {
  background: #191970;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #101050;
}

/* Firefox Scrollbar */
@supports (scrollbar-color: auto) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #191970 #f1f1f1;
  }

  .dark html {
    scrollbar-color: #191970 #1f2937;
  }
}