@import "tailwindcss";
@import "@bytelyst/design-tokens/css";
@source "../../node_modules/@bytelyst/ui/dist";

html,
body {
  font-family: var(--ml-font-body), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bl-bg-canvas);
  color: var(--bl-text-primary);
}

@media (max-width: 767px) {
  main {
    padding-top: 3.5rem;
  }
}

/*
  Legacy pages still use Tailwind gray/white utilities directly. Keep them
  theme-aware while those pages are migrated to shared @bytelyst/ui primitives.
*/
[data-theme="dark"] .bg-white {
  background-color: var(--bl-surface-card) !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
  background-color: var(--bl-bg-canvas) !important;
}

[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-gray-300 {
  background-color: var(--bl-surface-muted) !important;
}

[data-theme="dark"] .bg-gray-700,
[data-theme="dark"] .bg-gray-800 {
  background-color: var(--bl-surface-card) !important;
}

[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-red-50\/40 {
  background-color: var(--bl-surface-muted) !important;
}

[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
  color: var(--bl-text-primary) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-gray-300 {
  color: var(--bl-text-secondary) !important;
}

[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-gray-600 {
  border-color: var(--bl-border) !important;
}

[data-theme="dark"] .border-blue-200,
[data-theme="dark"] .border-green-200,
[data-theme="dark"] .border-yellow-200,
[data-theme="dark"] .border-red-200,
[data-theme="dark"] .border-purple-200 {
  border-color: var(--bl-border) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--bl-input) !important;
  border-color: var(--bl-border) !important;
  color: var(--bl-text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--bl-text-tertiary) !important;
}

[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl,
[data-theme="dark"] .shadow-sm {
  box-shadow: var(--bl-shadow-sm) !important;
}

@media (hover: hover) {
  [data-theme="dark"] .hover\:bg-gray-50:hover,
  [data-theme="dark"] .hover\:bg-gray-100:hover,
  [data-theme="dark"] .hover\:bg-gray-200:hover {
    background-color: var(--bl-surface-muted) !important;
  }

  [data-theme="dark"] .hover\:text-gray-600:hover,
  [data-theme="dark"] .hover\:text-gray-700:hover {
    color: var(--bl-text-primary) !important;
  }
}
