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

@layer base {
  :root {
    /* Light Mode: Maximierter Kontrast (Reines Weißer Hintergrund + Tiefschwarzer Text) */
    --background: 0 0% 100%;
    --foreground: 224 71% 4%;
    --card: 0 0% 100%;
    --card-foreground: 224 71% 4%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71% 4%;

    /* Primary: Cyan/Blau lesbarer gemacht */
    --primary: 199 100% 35%;
    --primary-foreground: 0 0% 100%;

    /* Muted & Accent: Deutlich dunklerer Text für Barrierefreiheit */
    --secondary: 220 14% 90%;
    --secondary-foreground: 224 71% 4%;
    --muted: 220 14% 92%;
    --muted-foreground: 220 20% 28%;
    /* Vorher 40% Helligkeit, jetzt 28% (viel dunkler) */
    --accent: 220 14% 90%;
    --accent-foreground: 224 71% 4%;

    --destructive: 0 84% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 14% 75%;
    /* Grenzen sichtbarer gemacht */
    --input: 220 14% 75%;
    --ring: 199 100% 35%;
    --radius: 0.75rem;
  }

  .dark {
    /* Dark Mode: Reines Tiefschwarz erhöht den Kontrast zu weißem Text drastisch */
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    /* Muted Text: Helligkeit massiv erhöht, damit Beschreibungen lesbar sind */
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 75%;
    /* Vorher 56.9% Helligkeit, jetzt 75% (viel heller) */

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 72% 51%;
    /* Helleres Rot für dunklen Hintergrund */
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 25%;
    /* Grenzen im Dunkeln besser sichtbar */
    --input: 240 3.7% 25%;
    --ring: 240 4.9% 83.9%;
  }
}

/* Automatischer High-Contrast-Modus für Betriebssystem-Vorgaben */
@media (prefers-contrast: more) {
  :root {
    --foreground: 0 0% 0%;
    --muted-foreground: 0 0% 0%;
    --border: 0 0% 0%;
  }

  .dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --muted-foreground: 0 0% 100%;
    --border: 0 0% 100%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer utilities {

  /* Glassmorphism Kontraste geschärft (höhere Deckkraft) */
  .glass {
    @apply bg-white/20 backdrop-blur-md border border-white/40;
  }

  .glass-dark {
    @apply bg-black/40 backdrop-blur-md border border-white/20;
  }

  .text-gradient {
    @apply text-blue-500 dark:text-blue-400;
  }
}