/* ==========================================================================
Fesselnder Stahl – Zentrale CSS-Stile & Farbdefinitionen
========================================================================== */

:root {
    --bg-main: #121518;
    --steel-800: #1e252b;
    --steel-900: #13181c;
    --accent-red: #b22222;        /* Dunklerer Hauptton */
    --accent-red-light: #d32f2f;  /* Hellerer Ton für Hover */
    --text-main: #e2e8f0;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: system-ui, -apple-system, sans-serif;
    background-image: linear-gradient(rgba(18, 21, 24, 0.9), rgba(18, 21, 24, 0.95)), url('festa_template_v1/images/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Benutzerdefinierte Komponenten-Klassen */
.bg-steel-800 {
    background-color: var(--steel-800);
}

.bg-steel-900 {
    background-color: var(--steel-900);
}

.text-accent-red {
    color: var(--accent-red);
}

.bg-accent-red {
    background-color: var(--accent-red);
}

.hover\:bg-accent-red-light:hover {
    background-color: var(--accent-red-light);
}

.hover\:border-accent-red:hover {
    border-color: var(--accent-red);
}

.card-bg {
    background-color: var(--steel-800);
    border-color: #2d3748;
}

.card-bg:hover {
    border-color: var(--accent-red);
}