/* Contrast: ensure secondary text meets WCAG AA (4.5:1) on light backgrounds */
.text-gray-400 {
  color: #6b7280 !important; /* gray-500 - was #9ca3af, too faint on white */
}

/* Hero title gradient: always readable on white, even with light theme colors */
.hero-gradient-text {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--theme-primary) 75%, #1f2937),
    color-mix(in srgb, var(--theme-accent) 75%, #1f2937)
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Badge above hero: always visible regardless of theme - ensure strong contrast */
.badge-ready {
  background-color: color-mix(in srgb, var(--theme-primary) 12%, #d1d5db) !important;
  color: #374151 !important;
  border-color: color-mix(in srgb, var(--theme-primary) 20%, #9ca3af) !important;
}
.badge-ready .badge-dot {
  background-color: #374151 !important;
}

/* Feature icon boxes: icons always visible on light backgrounds */
.icon-box-primary {
  background-color: color-mix(in srgb, var(--theme-primary) 30%, #d1d5db) !important;
  color: color-mix(in srgb, var(--theme-primary) 55%, #111827) !important;
}
.icon-box-primary:hover,
.group:hover .icon-box-primary {
  background-color: var(--theme-primary) !important;
  color: #ffffff !important;
}

.icon-box-accent {
  background-color: color-mix(in srgb, var(--theme-accent) 30%, #d1d5db) !important;
  color: color-mix(in srgb, var(--theme-accent) 55%, #111827) !important;
}
.icon-box-accent:hover,
.group:hover .icon-box-accent {
  background-color: var(--theme-accent) !important;
  color: #ffffff !important;
}

.icon-box-indigo {
  background-color: color-mix(in srgb, var(--theme-primary) 30%, #d1d5db) !important;
  color: color-mix(in srgb, var(--theme-primary) 55%, #111827) !important;
}
.icon-box-indigo:hover,
.group:hover .icon-box-indigo {
  background-color: var(--theme-primary) !important;
  color: #ffffff !important;
}

/* Sidebar: use CSS variables (set by inline script before first paint) - no flicker */
.sidebar-logo-gradient {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
}
.sidebar-nav-active {
  background-color: color-mix(in srgb, var(--theme-primary) 15%, white) !important;
  color: var(--theme-primary) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 25%, white) !important;
}
.sidebar-nav-active .sidebar-nav-active-icon {
  color: var(--theme-primary) !important;
}
.sidebar-nav-active-dot {
  background-color: var(--theme-primary) !important;
}

/* Dashboard quick actions: ensure gradient cards are always readable */
.dashboard-quick-action-primary {
  background: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--theme-primary) 85%, #1e3a5f),
    color-mix(in srgb, var(--theme-primary) 75%, #0f172a)
  ) !important;
  color: #ffffff !important;
}
.dashboard-quick-action-accent {
  background: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--theme-accent) 85%, #14532d),
    color-mix(in srgb, var(--theme-accent) 75%, #052e16)
  ) !important;
  color: #ffffff !important;
}
.dashboard-quick-action-indigo {
  background: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--theme-primary) 85%, #312e81),
    color-mix(in srgb, var(--theme-secondary) 85%, #4c1d95)
  ) !important;
  color: #ffffff !important;
}

/* Theme CSS Variables */
:root {
  --theme-primary: #3b82f6;
  --theme-secondary: #8b5cf6;
  --theme-accent: #10b981;
  --theme-background: #ffffff;
  --theme-text: #1f2937;
}

/* Primary Color Variants */
.bg-primary-600,
.bg-primary-500,
.bg-primary-400,
.bg-blue-600,
.bg-blue-500,
.bg-indigo-600,
.bg-indigo-500 {
  background-color: var(--theme-primary) !important;
}

.text-primary-600,
.text-primary-500,
.text-blue-600,
.text-indigo-600,
.text-indigo-500 {
  color: var(--theme-primary) !important;
}

.border-primary-600,
.border-primary-500,
.border-blue-600,
.border-indigo-600,
.border-indigo-100 {
  border-color: color-mix(in srgb, var(--theme-primary) 30%, #e5e7eb) !important;
}

/* Secondary Color Variants */
.bg-secondary-600,
.bg-secondary-500,
.bg-purple-600,
.bg-purple-500 {
  background-color: var(--theme-secondary) !important;
}

.text-secondary-600,
.text-secondary-500,
.text-purple-600 {
  color: var(--theme-secondary) !important;
}

/* Accent Color Variants */
.bg-accent,
.bg-green-600,
.bg-green-500,
.bg-emerald-600 {
  background-color: var(--theme-accent) !important;
}

.text-accent,
.text-green-600,
.text-emerald-600 {
  color: var(--theme-accent) !important;
}

/* Light Background Variants - use color-mix so opacity doesn't bleed onto child text */
.bg-indigo-50,
.bg-blue-50,
.bg-primary-50 {
  background-color: color-mix(in srgb, var(--theme-primary) 10%, #ffffff) !important;
}

.bg-indigo-100 {
  background-color: color-mix(in srgb, var(--theme-primary) 15%, #ffffff) !important;
}

/* Text Color Variants — darker shades of the primary theme color */
.text-blue-900,
.text-indigo-900 {
  color: var(--theme-primary) !important;
  filter: brightness(0.55);
}

.text-blue-800,
.text-indigo-800 {
  color: var(--theme-primary) !important;
  filter: brightness(0.6);
}

/* Info/hint text on light tinted backgrounds — must stay dark and readable */
.text-blue-700,
.text-indigo-700 {
  color: var(--theme-primary) !important;
  filter: brightness(0.65);
}

.text-blue-500 {
  color: var(--theme-primary) !important;
}

/* Ensure white text stays white for contrast */
.text-white {
  color: #ffffff !important;
}

/* Hover States */
.hover\:bg-primary-700:hover,
.hover\:bg-primary-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-indigo-700:hover {
  background-color: var(--theme-primary) !important;
  filter: brightness(0.9);
}

.hover\:text-primary-600:hover,
.hover\:text-blue-600:hover {
  color: var(--theme-primary) !important;
}

/* Buttons */
button.bg-blue-600,
button.bg-indigo-600,
button.bg-primary-600,
.btn-primary {
  background-color: var(--theme-primary) !important;
}

button.bg-blue-600:hover,
button.bg-indigo-600:hover,
button.bg-primary-600:hover,
.btn-primary:hover {
  background-color: var(--theme-primary) !important;
  filter: brightness(0.9);
}

/* Links */
a.text-primary-600,
a.text-blue-600,
a.text-indigo-600 {
  color: var(--theme-primary) !important;
}

/* Gradients - Primary */
.bg-gradient-to-br.from-indigo-500.to-purple-600,
.bg-gradient-to-br.from-blue-500.to-indigo-600,
.bg-gradient-to-br.from-primary-400.to-primary-600 {
  background: linear-gradient(
    to bottom right,
    var(--theme-primary),
    var(--theme-secondary)
  ) !important;
}

/* Gradients - Accent */
.bg-gradient-to-br.from-green-500.to-emerald-600 {
  background: linear-gradient(
    to bottom right,
    var(--theme-accent),
    var(--theme-accent)
  ) !important;
  filter: brightness(1.1);
}

/* Focus States */
.focus\:ring-primary-500:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--theme-primary) !important;
}

.focus\:border-primary-500:focus,
.focus\:border-blue-500:focus,
.focus\:border-indigo-500:focus {
  border-color: var(--theme-primary) !important;
}

/* Icon Colors */
.text-indigo-600 span.material-icons-round,
.text-blue-600 span.material-icons-round {
  color: var(--theme-primary) !important;
}

/* Theme primary color */
.text-\[\#6b6cff\] {
  color: var(--theme-primary) !important;
}

/* Search results: use theme branding, not generic blue/green/amber */
.search-badge-primary {
  background-color: color-mix(in srgb, var(--theme-primary) 25%, #e5e7eb) !important;
  color: color-mix(in srgb, var(--theme-primary) 85%, #111827) !important;
}
.search-badge-secondary {
  background-color: color-mix(in srgb, var(--theme-secondary) 20%, #e5e7eb) !important;
  color: color-mix(in srgb, var(--theme-secondary) 80%, #1f2937) !important;
}
.search-badge-meta {
  background-color: #e5e7eb !important;
  color: #374151 !important;
}
.search-highlight {
  background-color: color-mix(in srgb, var(--theme-primary) 35%, #fef3c7) !important;
  color: color-mix(in srgb, var(--theme-primary) 90%, #1f2937) !important;
}

/* Inline document citation hover preview - theme-aware, modern tooltip */
.doc-citation-trigger {
  display: inline;
}
.doc-citation-preview {
  animation: doc-citation-fade-in 0.15s ease-out;
}
@keyframes doc-citation-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.doc-citation-snippet {
  background: color-mix(in srgb, var(--theme-primary) 12%, #ffffff);
  border-left: 3px solid var(--theme-primary);
  padding: 0.5rem 0.75rem;
  margin: 0 -0.5rem;
  border-radius: 0 0.375rem 0.375rem 0;
}
.search-result-count {
  background-color: #e5e7eb !important;
  color: #1f2937 !important;
}

/* Audit section: theme-aware tabs (replaces internal sidebar) */
.audit-tab-active {
  border-bottom-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
}
.audit-tab-active .audit-tab-icon {
  color: var(--theme-primary) !important;
}
.audit-tab-inactive:hover {
  border-bottom-color: color-mix(in srgb, var(--theme-primary) 30%, #e5e7eb) !important;
  color: color-mix(in srgb, var(--theme-primary) 60%, #374151) !important;
}
.audit-card-primary {
  background-color: color-mix(in srgb, var(--theme-primary) 8%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 20%, #e5e7eb) !important;
}
.audit-progress-bar {
  background-color: var(--theme-primary) !important;
}