@import "tailwindcss";

:root {
  /* Dark theme (default) */
  --background: #1e293b; /* slate-800 - encore plus clair */
  --foreground: #f1f5f9; /* slate-100 */
  --card: #334155; /* slate-700 - beaucoup plus clair pour contraste fort */
  --card-hover: #475569; /* slate-600 */
  --card-column: #0f172a; /* slate-900 - plus foncé que les cartes */
  --border: #64748b; /* slate-500 - encore plus clair */
  --input: #334155; /* slate-700 - plus clair */
  --primary: #06b6d4; /* cyan-500 */
  --primary-foreground: #f1f5f9; /* slate-100 */
  --muted: #64748b; /* slate-500 */
  --muted-foreground: #94a3b8; /* slate-400 */
  --accent: #f59e0b; /* amber-500 */
  --destructive: #ef4444; /* red-500 */
  --success: #10b981; /* emerald-500 */
}

.light {
  /* Light theme */
  --background: #f1f5f9; /* slate-100 */
  --foreground: #0f172a; /* slate-900 */
  --card: #ffffff; /* white */
  --card-hover: #f8fafc; /* slate-50 */
  --card-column: #f8fafc; /* slate-50 - colonnes plus foncées que les cartes */
  --border: #cbd5e1; /* slate-300 */
  --input: #ffffff; /* white */
  --primary: #0891b2; /* cyan-600 */
  --primary-foreground: #ffffff; /* white */
  --muted: #94a3b8; /* slate-400 - plus clair pour scrollbar */
  --muted-foreground: #64748b; /* slate-500 */
  --accent: #d97706; /* amber-600 */
  --destructive: #dc2626; /* red-600 */
  --success: #059669; /* emerald-600 */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-mono), 'Courier New', monospace;
  overflow-x: hidden;
}

/* Scrollbar tech style */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--card);
}

::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Animations tech */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.3); }
  50% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.6); }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}