html.light {
    /* -------------------- Grundfarben -------------------- */
    --color-bg-primary: #f5f5f7;               /* Haupt-Hintergrund (weiches, helles Grau) */
    --color-bg-secondary: #eaeaec;             /* Sekundär-Hintergrund (leicht dunkler) */
    --color-bg-tertiary: #dadadd;              /* Dritt-Hintergrund für Layer / Cards */
    --color-bg-overlay: rgba(245, 245, 247, 0.9); /* Overlay-Hintergrund (z.B. Modals) */

    /* -------------------- Akzentfarben (gleich wie dark) -------------------- */
    --accent-red: #ff4c4c;
    --accent-red-dark: #b83232;
    --accent-pink: #ff6b81;
    --accent-purple: #9b59b6;
    --accent-blue: #3498db;

    /* -------------------- Gradients -------------------- */
    --gradient-bg-primary: linear-gradient(45deg, #f5f5f7, #eaeaec);
    --gradient-red: linear-gradient(45deg, var(--accent-red), var(--accent-red-dark));
    --gradient-pink: linear-gradient(45deg, var(--accent-pink), var(--accent-red));
    --gradient-purple: linear-gradient(45deg, var(--accent-purple), var(--accent-red-dark));
    --gradient-blue: linear-gradient(45deg, var(--accent-blue), var(--accent-purple));

    /* -------------------- Textfarben -------------------- */
    --color-text-primary: #1a1a1a;            /* Haupttext in dunklem Grau */
    --color-text-secondary: #4c4c4c;          /* Sekundärtext in mittlerem Grau */
    --color-text-disabled: #999999;
    --color-text-inverse: #ffffff;            /* Für Texte auf dunklen Buttons etc. */
    --color-text-link: var(--accent-red);

    /* -------------------- Buttons -------------------- */
    --btn-bg-primary: var(--gradient-red);
    --btn-text-primary: #ffffff;
    --btn-border-primary: transparent;

    --btn-bg-primary-hover: var(--gradient-pink);
    --btn-text-primary-hover: #ffffff;
    --btn-border-primary-hover: transparent;

    --btn-bg-secondary: var(--color-bg-tertiary);
    --btn-text-secondary: var(--accent-red);
    --btn-border-secondary: var(--accent-red);

    --btn-bg-secondary-hover: var(--gradient-red);
    --btn-text-secondary-hover: #ffffff;
    --btn-border-secondary-hover: var(--accent-red);

    --btn-bg-disabled: #cccccc;
    --btn-text-disabled: var(--color-text-disabled);
    --btn-border-disabled: transparent;

    /* -------------------- Inputs -------------------- */
    --input-bg: var(--color-bg-secondary);
    --input-border: #bbbbbb;
    --input-border-focus: var(--accent-red);
    --input-text: var(--color-text-primary);
    --input-placeholder: #aaaaaa;
    --input-disabled-bg: #eeeeee;
    --input-disabled-text: #999999;

    /* -------------------- Modal -------------------- */
    --modal-bg: var(--gradient-bg-primary);
    --modal-text: var(--color-text-primary);
    --modal-header-border: #cccccc;
    --modal-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

    /* -------------------- Schatten -------------------- */
    --shadow-primary: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-inset: 0 6px 20px rgba(255, 76, 76, 0.25) inset;
    --shadow-hover: 0 6px 20px rgba(255, 76, 76, 0.25);
    --shadow-focus: 0 0 10px var(--accent-red);

    /* -------------------- Border Radius -------------------- */
    --border-radius-small: 6px;
    --border-radius-default: 10px;
    --border-radius-large: 16px;

    /* -------------------- Scrollbar -------------------- */
    --scrollbar-width: 10px;
    --scrollbar-track-bg: var(--color-bg-primary);
    --scrollbar-thumb-bg: var(--accent-red);
    --scrollbar-thumb-hover-bg: var(--accent-pink);

    /* -------------------- Animation & Transition -------------------- */
    --transition-default: 0.35s ease;
}
html.dark {
    /* -------------------- Grundfarben -------------------- */
    --color-bg-primary: #0f0f11;               /* Haupt-Hintergrund (noch dunkler, mehr Tiefe) */
    --color-bg-secondary: #1a1b1e;             /* Sekundär-Hintergrund (etwas neutraler) */
    --color-bg-tertiary: #24262b;              /* Dritt-Hintergrund für Layer / Cards */
    --color-bg-overlay: rgba(15, 15, 17, 0.85); /* Overlay-Hintergrund (z.B. Modals) */

    /* -------------------- Akzentfarben -------------------- */
    --accent-red: #ff4c4c;
    --accent-red-dark: #b83232;
    --accent-pink: #ff6b81;
    --accent-purple: #9b59b6;
    --accent-blue: #3498db;

    /* -------------------- Gradients -------------------- */
    --gradient-bg-primary: linear-gradient(45deg, #1c1e22, #0f0f11);
    --gradient-red: linear-gradient(45deg, var(--accent-red), var(--accent-red-dark));
    --gradient-pink: linear-gradient(45deg, var(--accent-pink), var(--accent-red));
    --gradient-purple: linear-gradient(45deg, var(--accent-purple), var(--accent-red-dark));
    --gradient-blue: linear-gradient(45deg, var(--accent-blue), var(--accent-purple));

    /* -------------------- Textfarben -------------------- */
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #b0b0b0;
    --color-text-disabled: #666666;
    --color-text-inverse: #0f0f11;
    --color-text-link: var(--accent-red);

    /* -------------------- Buttons -------------------- */
    --btn-bg-primary: var(--gradient-red);
    --btn-text-primary: #ffffff;
    --btn-border-primary: transparent;

    --btn-bg-primary-hover: var(--gradient-pink);
    --btn-text-primary-hover: #ffffff;
    --btn-border-primary-hover: transparent;

    --btn-bg-secondary: var(--color-bg-tertiary);
    --btn-text-secondary: var(--accent-red);
    --btn-border-secondary: var(--accent-red);

    --btn-bg-secondary-hover: var(--gradient-red);
    --btn-text-secondary-hover: #ffffff;
    --btn-border-secondary-hover: var(--accent-red);

    --btn-bg-disabled: #3a3a3e;
    --btn-text-disabled: var(--color-text-disabled);
    --btn-border-disabled: transparent;

    /* -------------------- Inputs -------------------- */
    --input-bg: var(--color-bg-secondary);
    --input-border: #505050;
    --input-border-focus: var(--accent-red);
    --input-text: var(--color-text-primary);
    --input-placeholder: #888888;
    --input-disabled-bg: #2a2a2e;
    --input-disabled-text: #555555;

    /* -------------------- Modal -------------------- */
    --modal-bg: var(--gradient-bg-primary);
    --modal-text: var(--color-text-primary);
    --modal-header-border: #555555;
    --modal-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);

    /* -------------------- Schatten -------------------- */
    --shadow-primary: 0 4px 20px rgba(0, 0, 0, 0.75);
    --shadow-inset: 0 6px 20px rgba(255, 76, 76, 0.5) inset;
    --shadow-hover: 0 6px 20px rgba(255, 76, 76, 0.5);
    --shadow-focus: 0 0 10px var(--accent-red);

    /* -------------------- Border Radius -------------------- */
    --border-radius-small: 6px;
    --border-radius-default: 10px;
    --border-radius-large: 16px;

    /* -------------------- Scrollbar -------------------- */
    --scrollbar-width: 10px;
    --scrollbar-track-bg: var(--color-bg-primary);
    --scrollbar-thumb-bg: var(--accent-red);
    --scrollbar-thumb-hover-bg: var(--accent-pink);

    /* -------------------- Animation & Transition -------------------- */
    --transition-default: 0.35s ease;
}