:root {
    /* ===== Farbpalette (Basierend auf Logo) ===== */
    --color-primary:         #ffe646;   /* Leuchtendes Gelb - Hauptakzent */
    --color-primary-light:   #fff19d;   /* Helles Gelb (Glow, Hover) */
    --color-background:      #11161b;   /* Haupt-Hintergrund */
    --color-surface:         #1a1f26;   /* Oberfläche, z. B. Cards, Modals */
    --color-surface-hover:   #252c35;   /* Oberfläche bei Hover */
    --color-border:          #3c424d;   /* Linien, Ränder */
    --color-shadow:          rgba(0, 0, 0, 0.5); /* generischer Schatten */

    /* ===== Textfarben ===== */
    --color-text-primary:    #ffe646;   /* Haupttextfarbe in Akzentfarbe */
    --color-text-default:    #f5f6f5;   /* Standard weißlicher Text */
    --color-text-muted:      #b0b3b8;   /* Dezenter Text (z. B. Meta-Infos) */
    --color-text-disabled:   #666a71;   /* Inaktiver Text */
    --color-link:            #fff19d;   /* Link-Farbe, helles Gelb */
    --color-link-hover:      #ffe646;   /* Link bei Hover (Akzentfarbe) */

    /* ===== Buttons ===== */
    --btn-bg-primary:        var(--color-primary);
    --btn-bg-primary-hover:  var(--color-primary-light);
    --btn-bg-secondary:      var(--color-surface);
    --btn-bg-secondary-hover:var(--color-surface-hover);
    --btn-text:              var(--color-background);
    --btn-text-secondary:    var(--color-text-default);
    --btn-border-radius:     0.5rem;

    /* ===== Cards ===== */
    --card-bg:               var(--color-surface);
    --card-bg-hover:         var(--color-surface-hover);
    --card-border:           var(--color-border);
    --card-shadow:           0 4px 10px var(--color-shadow);
    --card-border-radius:    1rem;
    --card-padding:          1.5rem;

    /* ===== Inputs ===== */
    --input-bg:              #1c2129;
    --input-text:            var(--color-text-default);
    --input-placeholder:     var(--color-text-muted);
    --input-border:          var(--color-border);
    --input-focus:           var(--color-primary);
    --input-border-radius:   0.5rem;

    /* ===== Modals ===== */
    --modal-bg:              var(--color-surface);
    --modal-backdrop:        rgba(17, 22, 27, 0.8);
    --modal-shadow:          0 8px 20px var(--color-shadow);
    --modal-border-radius:   1rem;

    /* ===== Shadows ===== */
    --shadow-sm:             0 2px 5px rgba(0,0,0,0.2);
    --shadow-md:             0 4px 10px rgba(0,0,0,0.3);
    --shadow-lg:             0 8px 20px rgba(0,0,0,0.4);
    --glow-yellow:           0 0 8px #ffe646, 0 0 16px #ffe646;
    --more-glow-yellow:      0 0 16px #ffe646, 0 0 20px #ffe646;

    /* ===== States & Feedback ===== */
    --success:               #b0ff87;
    --warning:               #ffe646;
    --error:                 #ff6a6a;
    --info:                  #6cbaff;

    /* ===== Abstände (optional) ===== */
    --spacing-xs:            0.25rem;
    --spacing-sm:            0.5rem;
    --spacing-md:            1rem;
    --spacing-lg:            2rem;
    --spacing-xl:            4rem;

    /* ===== Z-Index-Layer ===== */
    --z-header:              1000;
    --z-modal:               1100;
    --z-tooltip:             1200;
}