/* Cosmic Dust Theme */
:root {
    /* Primary Colors */
    --primary-brand-color: #673ab7;
    /* Deep Purple */
    --primary-brand-hover: #5e35b1;
    --secondary-brand-color: #2196f3;
    /* Blue */
    --accent-color: #e1bee7;
    /* Light Purple-Pink */

    /* Neutral Colors */
    --background-dark: #0f021c;
    /* Very Dark Purple */
    --text-light: #f3e5f5;
    /* Very Light Purple */
    --text-muted: #ce93d8;
    /* Muted Purple */
    --icon-color: #f3e5f5;

    /* Glassmorphism/Transparency */
    --glass-background: rgba(15, 2, 28, 0.8);
    --glass-border: rgba(103, 58, 183, 0.3);
    --glass-shadow: rgba(0, 0, 0, 0.4);
    --glass-item-background: rgba(103, 58, 183, 0.08);
    --glass-item-border: rgba(103, 58, 183, 0.15);
    --glass-item-hover: rgba(103, 58, 183, 0.18);
    --dark-glass-background: linear-gradient(145deg, rgba(5, 1, 10, 0.9), rgba(15, 2, 28, 0.7));
    --dark-glass-border: rgba(103, 58, 183, 0.2);

    /* Danger Colors */
    --danger-color: #f44336;
    /* Red */
    --danger-hover: #d32f2f;

    /* Backgrounds */
    --body-background: linear-gradient(145deg, #0f021c, #1f053a, #2f0858, #3f0b76, #4f0e94), black;
    --connect-button-background: linear-gradient(135deg, #1f053a, #0f021c);
    --connected-button-background: linear-gradient(135deg, #81c784, #43a047);
    --connected-button-hover-background: linear-gradient(135deg, #a5d6a7, #66bb6a);
    --connecting-button-shadow: rgba(103, 58, 183, 0.4);
    --ip-ping-background: rgba(15, 2, 28, 0.7);
    --setting-background: linear-gradient(135deg, #0f021c, #673ab7);
    --menu-background: linear-gradient(145deg, rgba(5, 1, 10, 0.85), rgba(15, 2, 28, 0.85));
    --menu-item-background: linear-gradient(145deg, rgba(25, 5, 40, 0.7), rgba(15, 2, 28, 0.8));
    --menu-item-hover-background: linear-gradient(145deg, rgba(35, 8, 55, 0.8), rgba(25, 5, 40, 0.9));
    --log-background: rgba(0, 0, 0, 0.9);
    --log-item-background: rgba(255, 255, 255, 0.05);
    --log-text-color: #e1bee7;
    --log-button-hover: #e1bee7;
    --log-command-background: rgba(255, 255, 255, 0.05);
    --modal-background: #673ab7;
    --prompt-background: #0f021c;
    --prompt-content-background: #673ab7;
    --button-default-background: #673ab7;
    --dropdown-background: #673ab7;
    --dropdown-hover-background: rgba(103, 58, 183, 0.4);
    --select-background: #673ab7;
    --select-hover-background: #7a4bb7;
    --select-focus-background: #8a5bc7;
    --select-option-background: #673ab7;
    --select-option-hover-background: #7a4bb7;
    --switch-off-background: #9575cd;
    --switch-on-background: #2196f3;
    --switch-thumb-off: linear-gradient(145deg, #f3e5f5, #e1bee7);
    --switch-thumb-on: #ffffff;

    /* Shadows and Borders */
    --box-shadow-medium: 0px 4px 20px rgba(0, 0, 0, 0.3);
    --border-radius-default: 8px;
    --header-button-hover-color: var(--accent-color);
    --connected-box-shadow: inset 0 2px 4px rgba(103, 58, 183, 0.1), 0 20px 50px rgba(0, 0, 0, 0.6);
    --connected-item-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --change-status-shadow: 0 0 10px rgba(103, 58, 183, 0.5);
    --change-status-hover-shadow: 0 0 15px rgba(103, 58, 183, 0.7);
    --change-status-connected-shadow: 0 0 25px rgba(129, 199, 132, 0.7);
    --server-select-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    --server-select-border-hover: rgba(103, 58, 183, 0.3);
    --server-flag-border: rgba(103, 58, 183, 0.2);
    --server-flag-hover-border: rgba(103, 58, 183, 0.4);
    --server-flag-hover-shadow: 0 0 10px rgba(103, 58, 183, 0.2);
    --server-mini-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    --server-mini-border: rgba(103, 58, 183, 0.15);
    --setting-shadow: -10px 0 30px rgba(0, 0, 0, 0.7);
    --setting-border-left: rgba(103, 58, 183, 0.1);
    --setting-heading-shadow: 0px 0px 8px rgba(103, 58, 183, 0.5);
    --setting-heading-line: var(--primary-brand-color);
    --setting-button-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    --setting-button-hover-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
    --content-image-border: #673ab7;
    --content-image-border-image: linear-gradient(45deg, #1f053a, #4a148c, #673ab7) 1;
    --content-image-shadow: 0px 0px 30px 6px rgba(103, 58, 183, 0.5);
    --content-image-hover-shadow: 0px 0px 35px 7px rgba(103, 58, 183, 0.6);
    --content-image-background: rgba(25, 5, 40, 0.4);
    --log-command-border: #673ab7;
    --log-command-shadow: 0 0 12px rgba(103, 58, 183, 0.3);
    --message-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    --prompt-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    --button-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    --select-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --select-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    --select-focus-shadow: 0 0 5px 2px var(--accent-color);
    --dropdown-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5);
    --input-border: #999999;
    --switch-border: rgba(103, 58, 183, 0.15);
    --switch-thumb-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    --switch-checked-shadow: 0 0 10px rgba(103, 58, 183, 0.6);

    /* Spacing */
    --default-padding: 20px;
}