/* BUSINESS THEME (LIGHT MODE)  */
html.light {
    /* --- Base Colors --- */
    --color-bg: #f5f6f8;                        /* Helles, neutrales Grundlayout */
    --color-bg-alt: #eaecef;                    /* Leicht abgesetzte Fläche */

    --color-surface-1: #ffffff;                 /* Kartenhintergrund */
    --color-surface-2: #f9fafc;                 /* Erhöhte Fläche */
    --color-surface-3: #f0f2f6;                 /* Tiefer liegende Fläche */

    --color-border: #d0d3da;                    /* Dezente Rahmenfarbe */
    --color-border-strong: #b8bcc4;             /* Stärkerer Rahmen */

    --color-text: #1a1b20;                      /* Primärer Text */
    --color-text-secondary: #4c4f5d;            /* Sekundärer Text */
    --color-text-muted: #7f828f;                /* Gedämpfter Text */

    /* --- Brand Colors (seriös, ohne Neon) --- */
    --color-primary: #2a4d9c;                   /* Tiefes Blau */
    --color-primary-light: #6a8bd4;             /* Helles Blau */
    --color-primary-dark: #1c3266;              /* Dunkleres Blau */

    --color-secondary: #4a9c72;                 /* Gedämpftes Grün */
    --color-secondary-light: #7fc9a3;           /* Helles Grün */
    --color-secondary-dark: #2f6d4f;            /* Dunkleres Grün */

    /* --- Gradients --- */
    --gradient-bg: linear-gradient(140deg, #f5f6f8, #eaecef);
    --gradient-surface: linear-gradient(145deg, #ffffff, #f3f4f7);
    --gradient-primary: linear-gradient(135deg, #2a4d9c, #4a9c72);
    --gradient-accent-soft: linear-gradient(135deg, #e9ecf5, #eef6f2);

    /* --- Shadows --- */
    --shadow-soft: 0 4px 12px rgba(0,0,0,0.2);
    --shadow-medium: 0 6px 20px rgba(0,0,0,0.4);
    --shadow-strong: 0 10px 35px rgba(0,0,0,0.8);

    /* --- Radii --- */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;
    --radius-xl: 24px;

    /* --- Buttons --- */
    --btn-bg: var(--gradient-primary);
    --btn-bg-hover: linear-gradient(135deg, #3a5fb0, #5fb48a);
    --btn-text: #ffffff;

    --btn-secondary-bg: var(--color-surface-2);
    --btn-secondary-border: var(--color-border);
    --btn-secondary-text: var(--color-text);

    /* --- Inputs --- */
    --input-bg: var(--color-surface-1);
    --input-border: var(--color-border);
    --input-border-focus: var(--color-primary);
    --input-text: var(--color-text);

    /* --- States --- */
    --color-success: #3cbf6b;
    --color-warning: #e8a53a;
    --color-danger: #e84545;
    --color-info: #3aa7e8;

    /* --- Opacity Layers --- */
    --layer-1: rgba(255,255,255,0.6);
    --layer-2: rgba(0,0,0,0.04);
    --layer-3: rgba(0,0,0,0.07);

    /* --- Spacing --- */
    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 14px;
    --space-l: 20px;
    --space-xl: 32px;
}

/* NEON THEME (DARK MODE) */
html.dark {
    --color-bg: #0a0b10;
    --color-bg-alt: #12131a;

    --color-surface-1: #181920;
    --color-surface-2: #21222b;
    --color-surface-3: #292b35;

    --color-border: #2a2c38;
    --color-border-strong: #404351;

    --color-text: #e2e2ec;
    --color-text-secondary: #a2a4b2;
    --color-text-muted: #75788a;

    --color-primary: #8c4dff;
    --color-primary-light: #c29aff;
    --color-primary-dark: #4a1aa8;

    --color-secondary: #2acfff;
    --color-secondary-light: #7eeeff;
    --color-secondary-dark: #178fa8;

    --gradient-bg: linear-gradient(145deg, #090a0f, #151722);
    --gradient-surface: linear-gradient(145deg, #1a1b24, #232532);
    --gradient-primary: linear-gradient(135deg, #8c4dff, #2acfff);
    --gradient-accent-soft: linear-gradient(135deg, #161625, #1a2730);

    --shadow-soft: 0 4px 14px rgba(0,0,0,0.3);
    --shadow-medium: 0 6px 20px rgba(0,0,0,0.4);
    --shadow-strong: 0 10px 40px rgba(0,0,0,0.5);

    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-xl: 20px;

    --glow-primary: 0 0 26px rgba(140,77,255,0.7);
    --glow-secondary: 0 0 26px rgba(42,207,255,0.7);
    --glow-mixed: 0 0 40px rgba(140,77,255,0.4), 0 0 40px rgba(42,207,255,0.4);

    --btn-bg: var(--gradient-primary);
    --btn-bg-hover: linear-gradient(135deg, #a060ff, #3ae1ff);
    --btn-text: #ffffff;

    --btn-secondary-bg: var(--color-surface-2);
    --btn-secondary-border: var(--color-border);
    --btn-secondary-text: var(--color-text);

    --input-bg: var(--color-surface-2);
    --input-border: var(--color-border);
    --input-border-focus: var(--color-secondary);
    --input-text: var(--color-text);

    --color-success: #3fd27a;
    --color-warning: #eca542;
    --color-danger: #ff5050;
    --color-info: #3fb8ff;

    --layer-1: rgba(255,255,255,0.08);
    --layer-2: rgba(255,255,255,0.04);
    --layer-3: rgba(0,0,0,0.25);

    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 14px;
    --space-l: 20px;
    --space-xl: 32px;
}