@import "tailwindcss";

@theme {
  --color-bg: #0a0e17;
  --color-bg-soft: #0f1420;
  --color-card: #131a2a;
  --color-card-hover: #182136;
  --color-border: #1f2a44;
  --color-border-soft: #1a2438;
  --color-text: #e6edf7;
  --color-muted: #8b9bb8;
  --color-accent: #00d4ff;
  --color-accent-soft: rgba(0, 212, 255, 0.12);
  --color-green: #3fb950;
  --color-yellow: #d29922;
  --color-red: #f85149;
  --color-purple: #bc8cff;
  --color-pink: #f778ba;
  --color-blue: #58a6ff;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

html, body, #root {
  height: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-soft); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #2a3a5c; }

/* Subtiele glow voor accent-elementen */
.glow-accent {
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.15);
}

/* Kaart hover */
.card-hover {
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.card-hover:hover {
  background-color: var(--color-card-hover);
  box-shadow: 0 0 28px rgba(0, 212, 255, 0.08);
}

/* Tabel basis */
.table-row-hover:hover {
  background-color: rgba(0, 212, 255, 0.04);
}

/* Animaties */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.2s ease-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}
