:root {
    
    /* ### AI ARCHITECTURE PROMPT & MAINTAINANCE GUIDELINES ###

  DIESE DATEI IST DAS ZENTRALE FARBSYSTEM (SINGLE SOURCE OF TRUTH).
  BEFOLGE DIESE REGELN BEI ERWEITERUNGEN:

  1. NAMENSKONVENTION: 
     - Nutze funktionale Namen: --bg-[bereich], --text-[status], --accent-[farbe].
     - Vermeide spezifische Seitennamen (z.B. nicht --userlist-bg, sondern --bg-card).

  2. RE-USE (ALIASTING):
     - Bevor du einen neuen Hex-Code einfügst, prüfe, ob ein vorhandener Akzent passt.
     - Falls spezifische Legacy-Namen nötig sind, verweise per Alias: --legacy-var: var(--system-var);

  3. FARB-LOGIK:
     - Primär-Akzent: #8a70ff (Lila-Thematik).
     - Status-Farben: Erfolg (Grün), Info (Blau), Warnung (Orange), Fehler (Rot).
     - Transparenzen: Nutze rgba() basierend auf den Akzentfarben für Overlays.

  4. STRUKTUR:
     - Halte die Gruppierung (Basics, Text, Akzente, Status, Overlays) strikt ein.
     - Neue Gradienten immer am Ende unter "GRADIENTEN" definieren.

  PROMPT-COMMAND: "Analysiere diese colors.css und erstelle neue CSS-Klassen 
  ausnahmslos unter Verwendung der existierenden Variablen. Erstelle neue 
  Variablen nur, wenn keine Farbkombination im System das gewünschte 
  Kontrastverhältnis oder die Bedeutung erfüllt."
*/
    
    /* --- ZENTRALE PALETTE (Das neue System) --- */


    --bg-main: #0c0817;
    --bg-sidebar: #140e29;
    --bg-workarea: #2b2149;
    --bg-card: #302c54;
    --bg-card-hover: #383264;
    --bg-nav-hover: #1e163d;
    --text-main: #ffffff;
    --text-bright: #f0eefa;
    --text-muted: #b3b3b3;
    --text-dim: #667085;
    --text-disabled: #495057;
    --accent-purple: #8a70ff;
    --accent-purple-dark: #6b52e0;
    --accent-purple-hover: #7156ff;
    --accent-purple-trans: rgba(138, 112, 255, 0.15);
    --border-main: #2d244a;
    --border-card: #3d3563;
    --border-accent: rgba(138, 112, 255, 0.2);
    --border-light: rgba(255, 255, 255, 0.05);
    --success: #2ecc71;
    --info: #3498db;
    --warning: #e67e22;
    --danger: #ff4d4d;
    --finance-green: #4caf50;
    --finance-red: #f44336;
    --modal-overlay: rgba(0, 0, 0, 0.85);

    /* --- ABWÄRTSKOMPATIBILITÄT (Aliasing für dein bestehendes CSS) --- */
    /* Hier werden deine alten Variablennamen auf die neuen Werte "gemappt" */
    
    --text-muted-alt: var(--text-dim);
    --text-light: var(--text-muted);
    --text-muted-row: var(--text-bright);
    --text-muted-icon: rgba(255, 255, 255, 0.2);
    
    --border-accent-dim: var(--border-accent);
    --border-search: var(--border-accent);
    --border-league-filter: var(--border-accent);
    --border-card-header: var(--border-light);
    --top-nav-border: var(--text-dim);
    
    --bg-dark-trans: rgba(20, 14, 41, 0.3);
    --bg-accent-trans: var(--accent-purple-trans);
    --bg-league-btn: var(--accent-purple-trans);
    --bg-card-header: var(--border-light);
    --bg-danger-dim: rgba(255, 0, 0, 0.05);
    
    --shadow-purple: rgba(138, 112, 255, 0.3);
    --shadow-purple-strong: rgba(138, 112, 255, 0.5);
    --ios-badge: var(--danger);
    --ios-group-bg: var(--border-light);
    
    --accent-green: var(--success);
    --accent-blue: var(--info);
    --accent-orange: var(--warning);
    --danger-soft: var(--finance-red);
    
    --grad-purple: linear-gradient(180deg, var(--accent-purple) 0%, var(--accent-purple-dark) 100%);
}