/*
 * Rostr - Benutzerdefinierte Styles
 * Diese Datei enthält anpassbare CSS-Variablen und benutzerdefinierte Styles
 */

/* ==========================================================================
   CSS Custom Properties (Variablen)
   Hier kannst du globale Farben und Werte anpassen
   ========================================================================== */

:root {
    /* Primärfarben */
    --color-primary: #4f46e5;           /* Indigo-600 */
    --color-primary-hover: #6366f1;     /* Indigo-500 */
    --color-primary-dark: #4338ca;      /* Indigo-700 */
    --color-primary-darker: #3730a3;    /* Indigo-800 */

    /* Hintergrundfarben */
    --bg-body: #1a1a2e;                 /* Gray-100 */
    --bg-card: #ffffff;                 /* Weiß */
    --bg-nav: var(--color-primary);     /* Navigation Hintergrund */

    /* Textfarben */
    --text-primary: #111827;            /* Gray-900 */
    --text-secondary: #4b5563;          /* Gray-600 */
    --text-muted: #9ca3af;              /* Gray-400 */
    --text-light: #ffffff;              /* Weiß */

    /* Akzentfarben */
    --color-success: #10b981;           /* Green-500 */
    --color-warning: #f59e0b;           /* Amber-500 */
    --color-danger: #ef4444;            /* Red-500 */
    --color-info: #3b82f6;              /* Blue-500 */

    /* Abstände */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-full: 9999px;

    /* Schatten */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

    /* Login-Seite Gradient */
    --login-gradient-start: #1a1a2e;
    --login-gradient-end: #1a1a2e;

    /* Ostercamp-Seite */
    --ostercamp-gradient-start: #1a1a2e;     /* Green-400 */
    --ostercamp-gradient-mid: #1a1a2e;       /* Emerald-500 */
    --ostercamp-gradient-end: #1a1a2e;       /* Teal-500 */
    --ostercamp-accent: #059669;             /* Emerald-600 */
    --ostercamp-text-light: #d1fae5;         /* Emerald-100 */
}


/* ==========================================================================
   Globale Styles mit CSS-Variablen
   ========================================================================== */

.bg-body  {
    background-color: #1a1a2e;
    --login-gradient-start: #1a1a2e;
    --login-gradient-end: #1a1a2e;
}

/* Body Hintergrund überschreiben */
html.custom-bg {
    background-color: var(--bg-body) !important;
}

/* Navigation mit Custom Properties */
nav.custom-nav {
    background-color: var(--bg-nav) !important;
}

nav.custom-nav a:hover {
    background-color: var(--color-primary-hover) !important;
}

/* Karten Styling */
.custom-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--text-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}

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

.btn-danger {
    background-color: var(--color-danger);
    color: var(--text-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}

.btn-danger:hover {
    background-color: #dc2626;
}

/* ==========================================================================
   Login-Seite Styles
   ========================================================================== */

.login-background {
    background: linear-gradient(135deg, var(--login-gradient-start) 0%, var(--login-gradient-end) 100%);
    min-height: 100vh;
}

.login-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Ostercamp-Seite Styles
   ========================================================================== */

.ostercamp-background {
    background: linear-gradient(to bottom right, var(--ostercamp-gradient-start), var(--ostercamp-gradient-mid), var(--ostercamp-gradient-end));
    min-height: 100vh;
}

.ostercamp-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.ostercamp-header {
    background-color: var(--ostercamp-accent);
}

.ostercamp-accent {
    color: var(--ostercamp-accent);
}

.ostercamp-text-light {
    color: var(--ostercamp-text-light);
}

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

.ostercamp-btn {
    background-color: var(--ostercamp-accent);
    transition: background-color 0.2s ease;
}

.ostercamp-btn:hover {
    background-color: var(--ostercamp-gradient-mid);
}

/* ==========================================================================
   Utility Klassen
   ========================================================================== */

/* Text Farben */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

/* Hintergrund Farben */
.bg-body { background-color: var(--bg-body); }
.bg-card { background-color: var(--bg-card); }
.bg-primary { background-color: var(--color-primary); }

/* Status Farben */
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-danger { background-color: var(--color-danger); }
.bg-info { background-color: var(--color-info); }

/* ==========================================================================
   Responsive Anpassungen
   ========================================================================== */

@media (max-width: 640px) {
    :root {
        --spacing-md: 0.75rem;
        --spacing-lg: 1rem;
    }
}

/* ==========================================================================
   Dark Mode (optional - auskommentiert)
   Entferne die Kommentare um Dark Mode zu aktivieren
   ========================================================================== */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --bg-body: #1f2937;
        --bg-card: #374151;
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --text-muted: #9ca3af;
    }
}
*/