:root {

    /* =========================================
       PRIMARY (Brand)
    ========================================= */

    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-light: #eef2ff;

    /* =========================================
       TEXT
    ========================================= */

    --color-text-main: #111111;
    --color-text-secondary: #555555;
    --color-text-muted: #666666;
    --color-text-light: #999999;

    /* =========================================
       BACKGROUND
    ========================================= */

    --color-bg-main: #f5f6f8;
    --color-bg-card: #ffffff;
    --color-bg-subtle: #f7f7f7;

    /* =========================================
       BORDERS
    ========================================= */

    --color-border: #eeeeee;
    --color-border-strong: #dddddd;
    --color-divider: #eeeeee;

    /* =========================================
       STATES
    ========================================= */

    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-error: #dc2626;

    /* =========================================
       BUTTONS
    ========================================= */

    --btn-primary-bg: var(--color-primary);
    --btn-primary-hover: var(--color-primary-hover);
    --btn-primary-text: #ffffff;

    --btn-secondary-bg: #eeeeee;
    --btn-secondary-hover: #dddddd;
    --btn-secondary-text: #111111;

    /* =========================================
       SHADOWS
    ========================================= */

    --shadow-soft: 0 10px 30px rgba(0,0,0,0.05);
    --shadow-medium: 0 6px 20px rgba(0,0,0,0.15);
    --shadow-strong: 0 10px 25px rgba(0,0,0,0.3);

    /* =========================================
       OVERLAY / MODAL
    ========================================= */

    --color-overlay: rgba(0,0,0,0.4);
    --color-modal-bg: #ffffff;

    /* =========================================
       SPECIAL UI ELEMENTS
    ========================================= */

    /* Divider */
    --divider-color: var(--color-divider);

    /* User trigger */
    --user-trigger-text: var(--color-text-main);
    --user-trigger-hover: var(--color-text-secondary);

    /* Feedback Bubble */
    --bubble-bg: #111111;
    --bubble-text: #ffffff;

    /* Footer */
    --footer-text: var(--color-text-muted);
    --footer-link: var(--color-text-muted);
    --footer-link-hover: var(--color-text-main);
    --footer-separator: #aaaaaa;

    --shadow-bubble: 0 8px 20px rgba(0,0,0,0.25);
    --shadow-bubble-hover: 0 12px 28px rgba(0,0,0,0.3);
    --color-bg-highlight: var(--color-primary-light);
}

[data-theme="dark"] {

    /* PRIMARY */
    --color-primary: #818cf8;
    --color-primary-hover: #6366f1;
    --color-primary-light: rgba(99,102,241,0.15);

    /* TEXT */
    --color-text-main: #e2e8f0;
    --color-text-secondary: #cbd5f5;
    --color-text-muted: #94a3b8;
    --color-text-light: #64748b;

    /* BACKGROUND */
    --color-bg-main: #0f172a;
    --color-bg-card: #1e293b;
    --color-bg-subtle: #1e293b;

    /* BORDER */
    --color-border: #334155;
    --color-divider: #334155;

    /* STATES */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* BUTTON */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-hover: var(--color-primary-hover);
    --btn-primary-text: #ffffff;

    /* SHADOWS */
    --shadow-soft: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-medium: 0 12px 30px rgba(0,0,0,0.6);

    /* SPECIAL */
    --bubble-bg: #e2e8f0;
    --bubble-text: #0f172a;
}

[data-theme="pastel"] {

    --color-primary: #7c83fd;
    --color-primary-hover: #6366f1;
    --color-primary-light: #e0e7ff;

    /* 👇 HIER DER GAMECHANGER */
    --color-bg-main: #f5f7ff;
    --color-bg-card: #ffffff;
    --color-bg-subtle: #eef2ff;

    --color-text-main: #2b2d42;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-text-light: #9ca3af;

    --color-border: #dbeafe;

    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-error: #f87171;

    --btn-primary-bg: var(--color-primary);
    --btn-primary-hover: var(--color-primary-hover);
    --btn-primary-text: #ffffff;

    --shadow-soft: 0 10px 30px rgba(124,131,253,0.08);
    --shadow-medium: 0 14px 40px rgba(124,131,253,0.12);

    --bubble-bg: #2b2d42;
    --bubble-text: #ffffff;
}

[data-theme="playful"] {

    --color-primary: #ff3d71;
    --color-primary-hover: #e11d48;
    --color-primary-light: #ffe4ec;

    /* 👇 FARBE IM BACKGROUND */
    --color-bg-main: #fff1f5;
    --color-bg-card: #ffffff;
    --color-bg-subtle: #ffe4ec;

    --color-text-main: #1f2937;
    --color-text-secondary: #374151;
    --color-text-muted: #6b7280;
    --color-text-light: #9ca3af;

    --color-border: #ffc2d1;

    --color-success: #22c55e;
    --color-warning: #facc15;
    --color-error: #ef4444;

    --btn-primary-bg: var(--color-primary);
    --btn-primary-hover: var(--color-primary-hover);
    --btn-primary-text: #ffffff;

    /* 👇 mehr Punch */
    --shadow-soft: 0 10px 30px rgba(255,61,113,0.2);
    --shadow-medium: 0 16px 40px rgba(255,61,113,0.3);

    --bubble-bg: #ff3d71;
    --bubble-text: #ffffff;
}