@import "tailwindcss";

/* 
 * Ausfallsicheres Farb-Mapping per klassischem CSS 
 * Stellt sicher, dass die Farben unabhängig von der Compiler-Version 
 * korrekt mit den konkreten HEX-Werten gerendert werden.
 */
:root {
    --cacao: #69514C;
    --rose: #D6B8AE;
    --cream: #FCF6F1;
    --cacao-rgb: 105, 81, 76;
    --rose-rgb: 214, 184, 174;
    --cream-rgb: 252, 246, 241;
    --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
    --font-sans: system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: var(--cream);
    color: var(--cacao);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: var(--font-serif) !important;
    font-weight: normal !important;
}

*:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--cacao) !important;
}

/* Base Colors */
.bg-cacao { background-color: var(--cacao) !important; }
.bg-rose { background-color: var(--rose) !important; }
.bg-cream { background-color: var(--cream) !important; }
.bg-white { background-color: #ffffff !important; }

.text-cacao { color: var(--cacao) !important; }
.text-rose { color: var(--rose) !important; }
.text-cream { color: var(--cream) !important; }

.border-cacao { border-color: var(--cacao) !important; }
.border-rose { border-color: var(--rose) !important; }
.border-cream { border-color: var(--cream) !important; }

/* Alpha Backgrounds */
.bg-cacao\/90 { background-color: rgba(var(--cacao-rgb), 0.9) !important; }
.bg-rose\/20 { background-color: rgba(var(--rose-rgb), 0.2) !important; }
.bg-rose\/15 { background-color: rgba(var(--rose-rgb), 0.15) !important; }
.bg-cream\/10 { background-color: rgba(var(--cream-rgb), 0.1) !important; }

/* Alpha Text */
.text-cacao\/80 { color: rgba(var(--cacao-rgb), 0.8) !important; }
.text-cacao\/70 { color: rgba(var(--cacao-rgb), 0.7) !important; }
.text-cacao\/60 { color: rgba(var(--cacao-rgb), 0.6) !important; }
.text-cacao\/40 { color: rgba(var(--cacao-rgb), 0.4) !important; }

.text-cream\/80 { color: rgba(var(--cream-rgb), 0.8) !important; }
.text-cream\/60 { color: rgba(var(--cream-rgb), 0.6) !important; }
.text-cream\/40 { color: rgba(var(--cream-rgb), 0.4) !important; }

/* Alpha Borders */
.border-rose\/30 { border-color: rgba(var(--rose-rgb), 0.3) !important; }
.border-rose\/40 { border-color: rgba(var(--rose-rgb), 0.4) !important; }
.border-cream\/10 { border-color: rgba(var(--cream-rgb), 0.1) !important; }
.border-cream\/30 { border-color: rgba(var(--cream-rgb), 0.3) !important; }

/* Forms */
.placeholder-cacao\/40::placeholder { color: rgba(var(--cacao-rgb), 0.4) !important; opacity: 1; }

/* Hover States */
.hover\:text-rose:hover { color: var(--rose) !important; }
.hover\:text-cream:hover { color: var(--cream) !important; }
.hover\:bg-cacao\/90:hover { background-color: rgba(var(--cacao-rgb), 0.9) !important; }
.hover\:bg-cream\/10:hover { background-color: rgba(var(--cream-rgb), 0.1) !important; }

/* Focus States */
.focus-visible\:border-transparent:focus-visible { border-color: transparent !important; }