@import 'tailwindcss';

/* Synops tema — CSS custom properties settes dynamisk av theme.ts */
@theme {
  --color-bg: #0a0a0b;
  --color-surface: #1c1c20;
  --color-surface-hover: #242428;
  --color-panel: #1c1c20;
  --color-border: #2a2a2e;
  --color-border-hover: #3a3a3e;
  --color-text: #e8e8ec;
  --color-text-muted: #8a8a96;
  --color-text-dim: #5a5a66;
  --color-accent: #6366f1;
  --color-accent-hover: #7577f5;
  --color-accent-glow: rgba(99, 102, 241, 0.15);
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
}

html, body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.min-h-screen { background-color: var(--color-bg) !important; }
div[style*="display: contents"] { background-color: var(--color-bg) !important; }

/* === Tailwind overrides: use CSS custom properties === */

  /* Backgrounds */
  .bg-white { background-color: var(--color-panel) !important; }
  .bg-gray-50 { background-color: var(--color-bg) !important; }
  .bg-gray-100 { background-color: var(--color-surface) !important; }
  .bg-gray-200 { background-color: var(--color-border) !important; }

  /* Text */
  .text-gray-900 { color: var(--color-text) !important; }
  .text-gray-800 { color: var(--color-text) !important; }
  .text-gray-700 { color: var(--color-text-muted) !important; }
  .text-gray-600 { color: var(--color-text-muted) !important; }
  .text-gray-500 { color: var(--color-text-muted) !important; }
  .text-gray-400 { color: var(--color-text-dim) !important; }
  .text-gray-300 { color: var(--color-text-dim) !important; }

  /* Borders */
  .border-gray-200 { border-color: var(--color-border) !important; }
  .border-gray-300 { border-color: var(--color-border) !important; }
  .border-gray-100 { border-color: var(--color-border) !important; }

  /* Hover states */
  .hover\:bg-gray-200:hover { background-color: var(--color-surface-hover) !important; }
  .hover\:bg-gray-100:hover { background-color: var(--color-surface-hover) !important; }
  .hover\:text-gray-700:hover { color: var(--color-text) !important; }

  /* Accent colors */
  .bg-indigo-500, .bg-indigo-600 { background-color: var(--color-accent) !important; }
  .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover { background-color: var(--color-accent-hover) !important; }
  .text-indigo-600, .text-indigo-500, .text-indigo-700 { color: var(--color-accent) !important; }
  .bg-indigo-50, .bg-indigo-100 { background-color: var(--color-accent-glow) !important; }
  .bg-purple-50 { background-color: rgba(139, 92, 246, 0.1) !important; }
  .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; }
  .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; }
  .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; }
  .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.1) !important; }
  .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; }
  .border-amber-200 { border-color: rgba(245, 158, 11, 0.25) !important; }
  .text-amber-700 { color: rgb(245, 158, 11) !important; }
  .border-indigo-300 { border-color: var(--color-accent) !important; }
  .hover\:border-indigo-300:hover { border-color: var(--color-accent) !important; }

  /* Inputs and textareas */
  input, textarea, select {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
  }
  input:focus, textarea:focus, select:focus {
    border-color: var(--color-accent) !important;
    outline-color: var(--color-accent) !important;
  }
  input::placeholder, textarea::placeholder {
    color: var(--color-text-dim) !important;
  }

  /* Shadows */
  .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; }
  .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; }

  /* Status */
  .text-green-600 { color: var(--color-success) !important; }
  .text-yellow-600 { color: var(--color-warning) !important; }
  .text-red-600 { color: var(--color-error) !important; }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: var(--color-bg); }
  ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }