/* ========== THEME SYSTEM - CSS VARIABLES ========== */

/* Dark Theme (Default) */
:root,
:root[data-theme="dark"] {
    /* Primary Background Colors */
    --bg-primary: #000000;
    --bg-secondary: #231919;
    --bg-tertiary: #1a1a1a;
    --bg-controls: #2d2424;
    --bg-controls-input: #3a2d2d;
    --bg-waveform: #1b1b1b;
    --bg-message-user: #1a1a1a00;
    --bg-message-user-hover: #1f1d0d;
    --bg-message-system: #1a1a1a00;
    --bg-message-system-hover: #140f22;

    /* Popup & Modal Backgrounds */
    --bg-popup: #332929;
    --bg-popup-gradient-start: #332929;
    --bg-popup-gradient-end: #423b3b;
    --bg-popup-gradient-frame: #524747;
    --bg-popup-info: #423b3b;
    --bg-transparent: #ffffff15;

    /* Input & Form Backgrounds */
    --bg-input: #2d2424;
    --bg-input-dark: #1a0033;
    --bg-input-darker: #0c001a;
    --bg-input-readonly: #0c001a;
    --bg-select: #22182bff;
    --bg-select-hover: #1a0033;

    /* Button Backgrounds */
    --bg-button-primary: #0c001b;
    --bg-button-primary-hover: #575757;
    --bg-button-success: #008f07;
    --bg-button-success-hover: #196b00;
    --bg-button-danger: #8b0000;
    --bg-button-danger-hover: #b71c1c;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #cfcfcf;
    --text-tertiary: #878787;
    --text-muted: #888888;
    --text-readonly: #adadad;
    --text-accent: #fffb00;
    --text-success: #90ee90;
    --text-link: #5a9fd4;
    --text-link-hover: #7cb5e0;

    /* Border Colors */
    --border-primary: #242424;
    --border-secondary: #4a4a4a;
    --border-tertiary: #5e5e5e;
    --border-tertiary-hover-over: #777777;
    --border-input: #818181;
    --border-hover: #979797;
    --border-focus: #00a108;
    --border-separator: #494949;

    /* Border Size */
    --border-size-thin: 1px;
    --border-size-medium: 2px;
    --border-size-thick: 6px;
    --border-size-thick-popups: 3px; 
    --border-radius-popup: 24px;

    /* Status Bar & Indicators */
    --status-bg: #2d2424;
    --status-border: #383838;
    --status-text: #ffffffff;

    /* Menu Colors */
    --menu-bg: #000000;
    --menu-border: #4e4e4e;
    --menu-text: #ffffff;
    --menu-hover-bg: #ffffff;
    --menu-hover-text: #0a0a0a;
    --menu-submenu-bg: #271f1f;
    --menu-submenu-border: #5f5f5f;
    --menu-brand-gradient-start: #4e00a1;
    --menu-brand-gradient-end: #90ee90;

    /* Accent Colors */
    --accent-primary: #00a108;
    --accent-primary-hover: #00d911;
    --accent-warning: #ff6b6b;
    --accent-danger: #ff5555;

    /* Accent Colors with Opacity (for borders, shadows, overlays) */
    --accent-primary-10: rgba(0, 161, 8, 0.1);
    --accent-primary-20: rgba(0, 161, 8, 0.2);
    --accent-primary-30: rgba(0, 161, 8, 0.3);
    --accent-primary-48: rgba(0, 161, 8, 0.48);

    /* Shadow Colors */
    --shadow-primary: rgba(0, 0, 0, 0.5);
    --shadow-secondary: rgba(0, 0, 0, 0.8);
    --shadow-light: rgba(0, 0, 0, 0.05);

    /* White with Opacity */
    --white-48: rgba(255, 255, 255, 0.48);

    /* Icon Colors */
    --icon-primary: rgb(143, 143, 143);
    --icon-hover: #ffffff;
    --icon-success: #48ff00;
    --icon-danger: #ff0000;

    /* Code & Syntax Highlighting */
    --code-bg: #1a1a1a;
    --code-border: #444444;
    --code-text: #90ee90;

    /* Toggle Switch */
    --toggle-bg: #555555;
    --toggle-bg-active: #0a7c0a;
    --toggle-thumb: #ffffff;

    /* Slider Colors */
    --slider-gradient-start: #000000;
    --slider-gradient-end: #ffffff;
    --slider-thumb: #ffffff;
    --slider-thumb-hover: #dddddd;
    --slider-border: #5e5e5e;
    --mixer-slider-value: #ffffff;
    --mixer-slider-moz-range-thumb-off: #ffffff;
    --mixer-slider-moz-range-thumb-on: #4f4f4f;

    /* Slider Range Colors */
    --slider-range-01: #000000;
    --slider-range-02: #272727;
    --slider-range-03: #444444;
    --slider-range-04: #999999;
    --slider-range-05: #c5c5c5;

    /* Profile & Status Cards */
    --profile-tab-bg: transparent;
    --profile-tab-active-bg: #332929;
    --profile-tab-hover-bg: #000000;
    --status-card-bg-start: rgba(0, 161, 8, 0.1);
    --status-card-bg-end: rgba(0, 161, 8, 0.05);
    --status-card-border: #00a108;

    /* Tooltips */
    --tooltip-bg: #1a1a1a;
    --tooltip-border: #ffffff;
    --tooltip-arrow: #00ff0d;

    /* Info Box*/
    --info-font-color: #ffffff;
    --info-bg-color: #ffffff00;   
    --info-font-color_headline: #ffff00;  

    /* Status Button Bottom*/
    --status-button-bg-hover: #ffffff;
    --status-button-border-hover: #ffffff;
    --status-button-font-hover: #000000;

    /* Tonalität Loader Popup */
    --tonalitaet-loader-font-color: #ffffff;
    --tonalitaet-loader-bg-color: #22182b;
    --tonalitaet-loader-bg-hover-color: #1d0c2b;
    --tonalitaet-loader-border-color: #383838;    

    /* General Style Data*/
    --font-color-general: #ffffff;
    --button-font-color-general: #fbfbfb;
    --button-font-hover-color-general: #ffffff;
    --button-bg-color-general: #100c18;
    --button-bg-hover-color-general: #32313a;
    --button-border-color-general: #a2a2a2;
    --button-border-hover-color-general: #fdfdfd;
    --mixer-section-border: #676767;
    --wave-01-opacity: 0.12;
    --wave-02-opacity: 0.07;
    --wave-03-opacity: 0.05;
    --wave-04-opacity: 0.03;
    --chat-isolation-font: #ffffff;
    --chat-isolation-hover-font: #000000;
    --chat-isolation-bg: #5e5e5e00;
    --chat-isolation-hover-bg: #ffffff;
    --chat-isolation-border: #393939;
    --chat-isolation-hover-border: #ffffff;

    /* Format options of the popup elements */
    --format-option-btn-border-radius: 9px;
    --format-option-btn-width: 233px;
    --format-option-btn-border: 3px;

    /* Prompt Input Area */
    --prompt-input_width: 900px;
}

/* Light Theme */
:root[data-theme="light"] {
    /* Primary Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #d2d2d2;
    --bg-tertiary: #ffffff;
    --bg-controls: #dbdbdb;
    --bg-controls-input: #ffffff;
    --bg-waveform: #bebebe;
    --bg-message-user: #868686;
    --bg-message-user-hover: #c2c2c2;
    --bg-message-system: #a1a1a1;
    --bg-message-system-hover: #868686;

    /* Popup & Modal Backgrounds */
    --bg-popup: #ffffff;
    --bg-popup-gradient-start: #bcbcbc;
    --bg-popup-gradient-end: #ffffff;
    --bg-popup-gradient-frame: #e9e9e9;
    --bg-popup-info: #f9f9f9;
    --bg-transparent: #00000015;

    /* Input & Form Backgrounds */
    --bg-input: #eaeaea;
    --bg-input-dark: #dedede;
    --bg-input-darker: #dbdbdb;
    --bg-input-readonly: #dbdbdb;
    --bg-select: #dbdbdb;
    --bg-select-hover: ##dbdbdb;

    /* Button Backgrounds */
    --bg-button-primary: #ffffff;
    --bg-button-primary-hover: #e0e0e0;
    --bg-button-success: #4caf50;
    --bg-button-success-hover: #45a049;
    --bg-button-danger: #f44336;
    --bg-button-danger-hover: #da190b;

    /* Text Colors */
    --text-primary: #000000;
    --text-secondary: #121212;
    --text-tertiary: #212121;
    --text-muted: #282828;
    --text-readonly: #757575;
    --text-accent: #1976d2;
    --text-success: #2e7d32;
    --text-link: #1976d2;
    --text-link-hover: #1565c0;

    /* Border Colors */
    --border-primary: #ffffff;
    --border-secondary: #bdbdbd;
    --border-tertiary: #e7e7e7;
    --border-tertiary-hover-over: #b5b5b5;
    --border-input: #bdbdbd;
    --border-hover: #8e8e8e;
    --border-focus: #1976d2;
    --border-separator: #e0e0e0;

    /* Border Size */
    --border-size-thin: 1px;
    --border-size-medium: 2px;
    --border-size-thick: 10px;
    --border-size-thick-popups: 8px; 
    --border-radius-popup: 24px;

    /* Status Bar & Indicators */
    --status-bg: #f5f5f5;
    --status-border: #e0e0e0;
    --status-text: #212121;

    /* Menu Colors */
    --menu-bg: #ffffff;
    --menu-border: #e0e0e0;
    --menu-text: #212121;
    --menu-hover-bg: #5b5b5b;
    --menu-hover-text: #ffffff;
    --menu-submenu-bg: #fafafa;
    --menu-submenu-border: #9d9d9d;
    --menu-brand-gradient-start: #1976d2;
    --menu-brand-gradient-end: #4caf50;

    /* Accent Colors */
    --accent-primary: #1976d2;
    --accent-primary-hover: #1565c0;
    --accent-warning: #ff9800;
    --accent-danger: #f44336;

    /* Accent Colors with Opacity (for borders, shadows, overlays) */
    --accent-primary-10: rgba(25, 118, 210, 0.1);
    --accent-primary-20: rgba(25, 118, 210, 0.2);
    --accent-primary-30: rgba(25, 118, 210, 0.3);
    --accent-primary-48: rgba(25, 118, 210, 0.48);

    /* Shadow Colors */
    --shadow-primary: rgba(0, 0, 0, 0.1);
    --shadow-secondary: rgba(0, 0, 0, 0.2);
    --shadow-light: rgba(0, 0, 0, 0.05);

    /* White with Opacity */
    --white-48: rgba(255, 255, 255, 0.48);

    /* Icon Colors */
    --icon-primary: #757575;
    --icon-hover: #212121;
    --icon-success: #4caf50;
    --icon-danger: #f44336;

    /* Code & Syntax Highlighting */
    --code-bg: #f5f5f5;
    --code-border: #e0e0e0;
    --code-text: #2e7d32;

    /* Toggle Switch */
    --toggle-bg: #bdbdbd;
    --toggle-bg-active: #4caf50;
    --toggle-thumb: #ffffff;

    /* Slider Colors */
    --slider-gradient-start: #e0e0e0;
    --slider-gradient-end: #212121;
    --slider-thumb: #1976d2;
    --slider-thumb-hover: #1565c0;
    --slider-border: #bdbdbd;
    --mixer-slider-value: #343434;
    --mixer-slider-moz-range-thumb-off: #b5b5b5;
    --mixer-slider-moz-range-thumb-on: #fcffa4;

    /* Slider Range Colors */
    --slider-range-01: #000000;
    --slider-range-02: #7a7a7a;
    --slider-range-03: #ffffff;
    --slider-range-04: #7a7a7a;
    --slider-range-05: #000000;

    /* Profile & Status Cards */
    --profile-tab-bg: #f5f5f5;
    --profile-tab-active-bg: #ffffff;
    --profile-tab-hover-bg: #e0e0e0;
    --status-card-bg-start: rgba(25, 118, 210, 0.1);
    --status-card-bg-end: rgba(25, 118, 210, 0.05);
    --status-card-border: #1976d2;

    /* Tooltips */
    --tooltip-bg: #212121;
    --tooltip-border: #616161;
    --tooltip-arrow: #4caf50;

    /* Info Box*/
    --info-font-color: #232323;
    --info-bg-color: #ffffff;   
    --info-font-color_headline: #000000;   

    /* Status Button Bottom*/
    --status-button-bg-hover: #333333;
    --status-button-border-hover: #000000;
    --status-button-font-hover: #ffffff;

    /* Tonalität Loader Popup */
    --tonalitaet-loader-font-color: #090909;
    --tonalitaet-loader-bg-color: #ffffff;
    --tonalitaet-loader-bg-hover-color: #d9d9d9;
    --tonalitaet-loader-border-color: #636363;    

    /* General Style Data*/
    --font-color-general: #000000;
    --button-font-color-general: #000000;
    --button-font-hover-color-general: #ffffff;
    --button-bg-color-general: #d5d5d5;
    --button-bg-hover-color-general: #3e3e3e;
    --button-border-color-general: #6a6a6a;
    --button-border-hover-color-general: #232323;
    --mixer-section-border: #a6a6a6;
    --wave-01-opacity: 0.5;
    --wave-02-opacity: 0.4;
    --wave-03-opacity: 0.3;
    --wave-04-opacity: 0.2;
    --chat-isolation-font: #000000;
    --chat-isolation-hover-font: #ffffff;
    --chat-isolation-bg: #ffffff;
    --chat-isolation-hover-bg: #000000;
    --chat-isolation-border: #000000;
    --chat-isolation-hover-border: #000000;

    /* Format options of the popup elements */
    --format-option-btn-border-radius: 9px;
    --format-option-btn-width: 233px;
    --format-option-btn-border: 2px;

    /* Prompt Input Area */
    --prompt-input_width: 900px;

}

/* Theme transition animation */
* {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* Disable transitions for specific elements to avoid flickering */
.slideshow-image,
.slideshow-container,
button,
input,
select,
textarea {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
}