@theme {
  --color-aubergine: #4C3546;
  --color-peach: #E8B798;
  --color-cream: #FCF7EF;
  --color-dark-aubergine: #3a2838;
  --font-serif: Georgia, 'Times New Roman', serif;
}

:root {
  --color-aubergine: #4C3546;
  --color-peach: #E8B798;
  --color-cream: #FCF7EF;
  --color-dark-aubergine: #3a2838;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: var(--color-cream);
  color: var(--color-aubergine);
}

.font-serif {
  font-family: var(--font-serif);
}

/* Ensure focus outline is accessible and clear */
*:focus-visible {
  outline: 2px solid var(--color-peach);
  outline-offset: 4px;
}

/* Echte CSS-Klassen zur Sicherstellung der Farbwirkung */
.bg-aubergine { background-color: var(--color-aubergine) !important; }
.text-aubergine { color: var(--color-aubergine) !important; }
.border-aubergine { border-color: var(--color-aubergine) !important; }

.bg-peach { background-color: var(--color-peach) !important; }
.text-peach { color: var(--color-peach) !important; }
.border-peach { border-color: var(--color-peach) !important; }

.bg-cream { background-color: var(--color-cream) !important; }
.text-cream { color: var(--color-cream) !important; }

.bg-dark-aubergine { background-color: var(--color-dark-aubergine) !important; }

/* Transparenzen (Opacity) - Tailwind color-mix Fallback */
.bg-aubergine\/5 { background-color: color-mix(in srgb, var(--color-aubergine) 5%, transparent) !important; }
.bg-aubergine\/10 { background-color: color-mix(in srgb, var(--color-aubergine) 10%, transparent) !important; }
.bg-aubergine\/20 { background-color: color-mix(in srgb, var(--color-aubergine) 20%, transparent) !important; }
.bg-aubergine\/30 { background-color: color-mix(in srgb, var(--color-aubergine) 30%, transparent) !important; }
.bg-aubergine\/60 { background-color: color-mix(in srgb, var(--color-aubergine) 60%, transparent) !important; }

.text-aubergine\/60 { color: color-mix(in srgb, var(--color-aubergine) 60%, transparent) !important; }
.text-aubergine\/70 { color: color-mix(in srgb, var(--color-aubergine) 70%, transparent) !important; }
.text-aubergine\/80 { color: color-mix(in srgb, var(--color-aubergine) 80%, transparent) !important; }

.border-aubergine\/10 { border-color: color-mix(in srgb, var(--color-aubergine) 10%, transparent) !important; }

.bg-peach\/15 { background-color: color-mix(in srgb, var(--color-peach) 15%, transparent) !important; }
.bg-peach\/20 { background-color: color-mix(in srgb, var(--color-peach) 20%, transparent) !important; }

.text-peach\/60 { color: color-mix(in srgb, var(--color-peach) 60%, transparent) !important; }
.text-peach\/80 { color: color-mix(in srgb, var(--color-peach) 80%, transparent) !important; }

.border-peach\/20 { border-color: color-mix(in srgb, var(--color-peach) 20%, transparent) !important; }

.text-cream\/60 { color: color-mix(in srgb, var(--color-cream) 60%, transparent) !important; }
.text-cream\/80 { color: color-mix(in srgb, var(--color-cream) 80%, transparent) !important; }

/* Interaktionen (Hover/Focus) */
.hover\:bg-cream:hover { background-color: var(--color-cream) !important; }
.hover\:bg-peach:hover { background-color: var(--color-peach) !important; }
.hover\:text-cream:hover { color: var(--color-cream) !important; }
.hover\:text-peach:hover { color: var(--color-peach) !important; }
.hover\:text-aubergine:hover { color: var(--color-aubergine) !important; }

.group:hover .group-hover\:text-peach { color: var(--color-peach) !important; }
.group:hover .group-hover\:bg-aubergine\/20 { background-color: color-mix(in srgb, var(--color-aubergine) 20%, transparent) !important; }

.focus-visible\:outline-peach:focus-visible { outline-color: var(--color-peach) !important; }
.focus-visible\:ring-peach:focus-visible { --tw-ring-color: var(--color-peach) !important; }