@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
  --primary-color: #1d4ed8; /* Primärfarbe für Akzente */
  --secondary-color: #3b82f6; /* Sekundärfarbe für Hover-Effekte */
  --border-color: #d1d5db; /* Farbe für Ränder */
  --shadow-color: rgba(0, 0, 0, 0.1); /* Schattenfarbe */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --primary-color: #2563eb; /* Angepasste Primärfarbe für den Dunkelmodus */
    --secondary-color: #60a5fa; /* Angepasste Sekundärfarbe */
    --border-color: #374151; /* Angepasste Farbe für Ränder */
    --shadow-color: rgba(0, 0, 0, 0.4); /* Stärkere Schattenfarbe */
  }
}

body {
  //color: var(--foreground);
  //background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6; /* Verbesserte Lesbarkeit */
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s;

  &:hover {
    color: var(--secondary-color);
  }
}
