/* styles.css */

/* Definition der ZEBRA-Türkis Farbe als CSS-Variable für einfache Wiederverwendung */
:root {
    --zebra-turquoise: #20B2AA;
    --zebra-turquoise-darker: #1A8F8A; /* Eine etwas dunklere Variante für Hover-Effekte */
    --zebra-green: #16a34a; /* Tailwind green-600, falls für Registrieren-Button beibehalten */
    --zebra-green-darker: #15803d; /* Tailwind green-700 */
}

/* Primärer Aktionsbutton-Stil */
.btn-zebra-primary {
    background-color: var(--zebra-turquoise);
    color: white;
    transition: background-color 0.2s ease-in-out;
}

.btn-zebra-primary:hover {
    background-color: var(--zebra-turquoise-darker);
}

/* Sekundärer Aktionsbutton-Stil (z.B. für Registrieren, falls nicht Türkis) */
.btn-zebra-secondary {
    background-color: var(--zebra-green); /* Beibehaltung von Grün oder eine andere Akzentfarbe */
    color: white;
    transition: background-color 0.2s ease-in-out;
}
.btn-zebra-secondary:hover {
    background-color: var(--zebra-green-darker);
}

/* Textlink-Stil */
.text-zebra-turquoise {
    color: var(--zebra-turquoise);
}
.hover\:text-zebra-turquoise-dark:hover { /* Spezifische Klasse für Hover, falls Tailwind-Konventionen gefolgt werden */
    color: var(--zebra-turquoise-darker) !important; /* !important kann nötig sein, um Tailwind zu überschreiben */
}

/* Aktiver Navigationslink im Dashboard */
.active-nav-link {
    background-color: var(--zebra-turquoise) !important; /* Wichtig, um Tailwind-Klassen zu überschreiben, die von JS gesetzt werden könnten */
    color: white !important;
}