/**
 * Gamet Studios - Color & Design System
 * Zentrale Verwaltung aller Farben und Design-Token
 * Kann leicht für verschiedene Anlässe angepasst werden
 */

:root {
    /* ===== PRIMARY COLORS ===== */
    --color-primary: #ffffff;          /* Haupttextfarbe */
    --color-primary-dark: #cccccc;     /* Hover/Light Variant */
    --color-secondary: #888888;        /* Sekundärer Text */
    --color-secondary-light: #999999;  /* Leicht heller als secondary */
    --color-tertiary: #666666;         /* Tertiary Text */

    /* ===== BACKGROUND COLORS ===== */
    --bg-primary: #180a0a;
    --bg-secondary: #1d0f0f;
    --bg-tertiary: #1d1010;
    --bg-light: #271212;

    /* 
    CHRISTMAS BACKGROUND
    --bg-primary: #1b0b0b;
    --bg-secondary: #221111;
    --bg-tertiary: #251414;
    --bg-light: #361818; 
    
    NORMAL BACKGROUND
    --bg-primary: #0d0d0d;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-light: #2d2d2d;
    */

    /* ===== NEUTRAL & BORDER COLORS ===== */
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-border-medium: rgba(255, 255, 255, 0.2);
    --color-border-heavy: rgba(255, 255, 255, 0.3);
    
    --color-overlay-xs: rgba(255, 255, 255, 0.03);
    --color-overlay-sm: rgba(255, 255, 255, 0.05);
    --color-overlay-md: rgba(255, 255, 255, 0.1);
    --color-overlay-lg: rgba(255, 255, 255, 0.15);
    --color-overlay-xl: rgba(255, 255, 255, 0.25);

    /* ===== SCROLLBAR COLORS ===== */
    --scrollbar-color: #1d1d1d;
    --scrollbar-color-thumb: rgba(29, 29, 29, 0.6);
    --scrollbar-color-thumb-hover: #444;

    /* ===== SHADOW COLORS ===== */
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.5);
    --shadow-lg: rgba(0, 0, 0, 1.0);

    /* ===== NAVIGATION COLORS ===== */
    --nav-bg: rgba(21, 11, 11, 0.5); /* Normal: 24, 24, 24*/
    --nav-border: rgba(87, 87, 87, 0.05);
    --nav-text: #ffffff;
    --nav-text-hover: #bdbdbd;

    /* ===== BUTTON COLORS ===== */
    --btn-bg: rgba(24, 24, 24, 0.5);
    --btn-border: rgba(255, 255, 255, 0.2);
    --btn-bg-hover: rgba(255, 255, 255, 0.1);
    --btn-border-hover: rgba(255, 255, 255, 0.3);

    /* ===== CARD & BOX COLORS ===== */
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-bg-hover: rgba(255, 255, 255, 0.05);
    --card-border-hover: rgba(255, 255, 255, 0.2);

    /* ===== FOOTER COLORS ===== */
    --footer-bg: rgba(21, 11, 11, 0.6); /* Normal: 0, 0, 0*/
    --footer-text: #888888;
    --footer-text-hover: #cccccc;

    /* ===== FUNCTIONAL COLORS (für spezielle Anlässe) ===== */
    --color-success: rgba(34, 197, 94, 0.15);      /* Grün für erfolgreiche Meldungen */
    --color-success-border: rgba(34, 197, 94, 0.3);
    --color-success-text: #86efac;

    --color-error: rgba(239, 68, 68, 0.15);        /* Rot für Fehler */
    --color-error-border: rgba(239, 68, 68, 0.3);
    --color-error-text: #fca5a5;

    --color-warning: rgba(245, 158, 11, 0.15);     /* Orange für Warnungen */
    --color-warning-border: rgba(245, 158, 11, 0.3);
    --color-warning-text: #fcd34d;

    --color-info: rgba(59, 130, 246, 0.15);        /* Blau für Infos */
    --color-info-border: rgba(59, 130, 246, 0.3);
    --color-info-text: #93c5fd;

    /* ===== FESTIVE MODE COLORS (für Weihnachten, etc.) ===== */
    /* Einfach die Primary-Farben ersetzen für schnelle Theme-Änderungen */
    /* --color-primary: #ff0000; */
    /* --color-secondary: #00aa00; */

    /* ===== TYPOGRAPHY COLORS ===== */
    --text-heading: #ffffff;
    --text-body: #999999;
    --text-muted: #666666;
    --text-accent: #cccccc;

    /* ===== BACKDROP & BLUR COLORS ===== */
    --backdrop-blur: blur(10px);
    --backdrop-blur-sm: blur(5px);
    --backdrop-blur-lg: blur(20px);

    /* ===== OPACITY VARIABLES ===== */
    --opacity-disabled: 0.5;
    --opacity-hover: 0.8;
    --opacity-active: 1;
}

/* ===== DARK MODE VARIANT (optional) ===== */
/* Uncomment wenn ein vollständiger Dark Mode nötig ist */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #ffffff;
        --bg-primary: #000000;
        --bg-secondary: #111111;
    }
}
*/

/* ===== FESTIVE MODE BEISPIEL ===== */
/* Aktiviere diese Klasse auf body für schnelle Theme-Änderungen */
/*
html.festive-mode {
    --color-primary: #ff0000;
    --color-secondary: #00aa00;
    --bg-primary: #1a0000;
    --bg-secondary: #0a0a0a;
}
*/

/* ===== NEON THEME EXAMPLE ===== */
/*
html.neon-mode {
    --color-primary: #00ff00;
    --color-secondary: #ffff00;
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
}
*/