/* ============================================
   SKIN FOUNDATION - CSS Variables
   See Play Show - Live Control Skin System
   ============================================ */

/* =============================================================================
   COLOR TOKENS - Theme-Dependent
   These variables change between light/dark themes and accent colors
   ============================================================================= */

:root,
.skin-standard,
.theme-light {
    /* Page backgrounds */
    --skin-page-bg: #F7F8FA;
    --skin-page-bg-accent: var(--skin-accent-soft);
    --skin-page-bg-accent-dark: var(--skin-accent-soft);
    
    /* Card/surface backgrounds */
    --skin-card-bg: #ffffff;
    --skin-card-bg-subtle: rgba(0, 0, 0, 0.02);
    --skin-card-bg-hover: rgba(0, 0, 0, 0.03);
    
    /* Text colors */
    --skin-text-primary: #111214;
    --skin-text-secondary: rgba(17, 18, 20, 0.65);
    --skin-text-muted: rgba(17, 18, 20, 0.5);
    --skin-text-hint: rgba(17, 18, 20, 0.6);
    --skin-text-inverse: #ffffff;
    
    /* Palette-driven colors (light) */
    --skin-accent-light: var(--green, #1bad5a);
    --skin-accent-hover-light: #169b4e;
    --skin-accent-rgb-light: 27, 173, 90;
    --skin-accent-soft-light: rgba(27, 173, 90, 0.12);
    --skin-control-track-light: #ddd;
    --skin-control-surface-light: #f8faf9;
    --skin-panel-bg-light: #f0f4f2;
    --skin-input-bg-light: #f8faf9;

    /* Palette-resolved tokens */
    --skin-accent: var(--skin-accent-light);
    --skin-accent-hover: var(--skin-accent-hover-light);
    --skin-accent-rgb: var(--skin-accent-rgb-light);
    --skin-accent-soft: var(--skin-accent-soft-light);
    --skin-control-track: var(--skin-control-track-light);
    --skin-control-surface: var(--skin-control-surface-light);
    --skin-panel-bg: var(--skin-panel-bg-light);
    --skin-input-bg: var(--skin-input-bg-light);
    
    /* Border colors */
    --skin-border-light: rgba(17, 18, 20, 0.08);
    --skin-border-default: rgba(17, 18, 20, 0.10);
    --skin-border-medium: rgba(17, 18, 20, 0.12);
    --skin-border-strong: rgba(17, 18, 20, 0.15);
    --skin-border-emphasis: rgba(17, 18, 20, 0.20);
    --skin-divider: rgba(17, 18, 20, 0.50);
    
    /* Shadow colors */
    --skin-shadow-color: rgba(17, 18, 20, 0.06);
    --skin-shadow-color-md: rgba(0, 0, 0, 0.15);
    --skin-shadow-color-lg: rgba(0, 0, 0, 0.20);
    
    /* Shadows */
    --skin-shadow-sm: 0 1px 3px var(--skin-shadow-color);
    --skin-shadow-md: 0 4px 12px var(--skin-shadow-color-md);
    --skin-shadow-lg: 0 8px 24px var(--skin-shadow-color-lg);
    --skin-shadow-card: 0 1px 0 rgba(17, 18, 20, 0.08), 0 10px 30px rgba(17, 18, 20, 0.06);
    
    /* Control colors - Sliders */
    --skin-slider-track: var(--skin-control-track);
    --skin-slider-thumb: var(--skin-accent);
    
    /* Control colors - Knobs */
    --skin-knob-track: var(--skin-control-track);
    --skin-knob-arc: var(--skin-accent);
    --skin-knob-center: #f8f9fa;
    --skin-knob-center-hover: #f0f0f0;
    --skin-knob-center-active: #e8e8e8;
    --skin-knob-indicator: #333;
    --skin-knob-center-stroke: #e0e0e0;
    
    /* Control colors - Toggles */
    --skin-toggle-track: var(--skin-control-track);
    --skin-toggle-active: var(--skin-accent);
    
    /* Control focus states (configurable per skin) */
    --skin-control-focus-border: var(--skin-accent);
    --skin-control-focus-shadow: 0 0 0 2px rgba(var(--skin-accent-rgb), 0.12);
    
    /* Interactive states */
    --skin-hover-bg: rgba(0, 0, 0, 0.03);
    --skin-hover-bg-strong: rgba(0, 0, 0, 0.06);
    --skin-focus-ring: rgba(var(--skin-accent-rgb), 0.15);
    --skin-focus-ring-strong: rgba(var(--skin-accent-rgb), 0.5);
    
    /* Overlay backgrounds */
    --skin-overlay-bg: rgba(0, 0, 0, 0.8);
    --skin-overlay-bg-light: rgba(0, 0, 0, 0.82);
    --skin-loading-overlay: rgba(255, 255, 255, 0.95);
    
    /* Status colors */
    --skin-status-success: #28a745;
    --skin-status-success-muted: #4A9B73;
    --skin-status-error: #dc3545;
    --skin-status-error-muted: #E05B61;
    --skin-status-warning: #ffc107;
    --skin-status-warning-text: #856404;
    --skin-status-warning-bg: #fff3cd;
    --skin-status-info: #17a2b8;
    
    /* Button secondary */
    --skin-button-secondary: #5c6370;
    --skin-button-disabled: #adb5bd;

    /* Bootstrap overrides - Form elements */
    --bs-form-control-bg: var(--skin-input-bg);
    --bs-form-control-border-color: var(--skin-border-medium);
}

/* =============================================================================
   DARK THEME
   Applied via .theme-dark class on body or container element
   ============================================================================= */

.theme-dark {
    /* Page backgrounds */
    --skin-page-bg: #0f1a26;
    --skin-page-bg-accent: var(--skin-accent-soft);
    --skin-page-bg-accent-dark: var(--skin-accent-soft);
    
    /* Card/surface backgrounds */
    --skin-card-bg: #1a2d42;
    --skin-card-bg-subtle: rgba(255, 255, 255, 0.03);
    --skin-card-bg-hover: rgba(255, 255, 255, 0.05);
    
    /* Text colors */
    --skin-text-primary: rgba(255, 255, 255, 0.95);
    --skin-text-secondary: rgba(255, 255, 255, 0.70);
    --skin-text-muted: rgba(255, 255, 255, 0.50);
    --skin-text-hint: rgba(255, 255, 255, 0.55);
    --skin-text-inverse: #111214;
    
    /* Palette-driven colors (dark) */
    --skin-accent-dark: #1bad5a;
    --skin-accent-hover-dark: #22c966;
    --skin-accent-rgb-dark: 27, 173, 90;
    --skin-accent-soft-dark: rgba(27, 173, 90, 0.18);
    --skin-control-track-dark: #3a4a5a;
    --skin-control-surface-dark: #1a2d42;
    --skin-panel-bg-dark: #1a2d42;
    --skin-input-bg-dark: #2d4a5f;

    /* Palette-resolved tokens */
    --skin-accent: var(--skin-accent-dark);
    --skin-accent-hover: var(--skin-accent-hover-dark);
    --skin-accent-rgb: var(--skin-accent-rgb-dark);
    --skin-accent-soft: var(--skin-accent-soft-dark);
    --skin-control-track: rgba(var(--skin-accent-rgb), 0.25);
    --skin-control-surface: var(--skin-control-surface-dark);
    --skin-panel-bg: var(--skin-panel-bg-dark);
    --skin-input-bg: var(--skin-input-bg-dark);
    
    /* Border colors */
    --skin-border-light: rgba(255, 255, 255, 0.06);
    --skin-border-default: rgba(255, 255, 255, 0.10);
    --skin-border-medium: rgba(255, 255, 255, 0.12);
    --skin-border-strong: rgba(255, 255, 255, 0.15);
    --skin-border-emphasis: rgba(255, 255, 255, 0.20);
    --skin-divider: rgba(255, 255, 255, 0.45);
    --panel-item-border: 1px solid rgba(var(--skin-accent-rgb), 0.2);
    
    /* Shadow colors - more subtle on dark backgrounds */
    --skin-shadow-color: rgba(0, 0, 0, 0.20);
    --skin-shadow-color-md: rgba(0, 0, 0, 0.35);
    --skin-shadow-color-lg: rgba(0, 0, 0, 0.45);
    
    /* Shadows */
    --skin-shadow-sm: 0 1px 3px var(--skin-shadow-color);
    --skin-shadow-md: 0 4px 12px var(--skin-shadow-color-md);
    --skin-shadow-lg: 0 8px 24px var(--skin-shadow-color-lg);
    --skin-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.25);
    
    /* Control colors - Sliders */
    --skin-slider-track: var(--skin-control-track);
    --skin-slider-thumb: var(--skin-accent);
    
    /* Control colors - Knobs */
    --skin-knob-track: var(--skin-control-track);
    --skin-knob-arc: var(--skin-accent);
    --skin-knob-center: #1a2d42;
    --skin-knob-center-hover: #243a52;
    --skin-knob-center-active: #2d4560;
    --skin-knob-indicator: rgba(255, 255, 255, 0.85);
    --skin-knob-center-stroke: #3a4a5a;
    
    /* Control colors - Toggles */
    --skin-toggle-track: var(--skin-control-track);
    --skin-toggle-active: var(--skin-accent);
    
    /* Control focus states (configurable per skin) */
    --skin-control-focus-border: var(--skin-accent);
    --skin-control-focus-shadow: 0 0 0 2px rgba(var(--skin-accent-rgb), 0.35);
    
    /* Interactive states */
    --skin-hover-bg: rgba(255, 255, 255, 0.05);
    --skin-hover-bg-strong: rgba(255, 255, 255, 0.10);
    --skin-focus-ring: rgba(var(--skin-accent-rgb), 0.35);
    --skin-focus-ring-strong: rgba(var(--skin-accent-rgb), 0.7);
    
    /* Overlay backgrounds */
    --skin-overlay-bg: rgba(0, 0, 0, 0.85);
    --skin-overlay-bg-light: rgba(0, 0, 0, 0.80);
    --skin-loading-overlay: rgba(15, 26, 38, 0.95);
    
    /* Status colors - brighter for dark backgrounds */
    --skin-status-success: #2ecc71;
    --skin-status-success-muted: #5cb985;
    --skin-status-error: #e74c3c;
    --skin-status-error-muted: #e57373;
    --skin-status-warning: #f1c40f;
    --skin-status-warning-text: #f1c40f;
    --skin-status-warning-bg: rgba(241, 196, 15, 0.15);
    --skin-status-info: #3498db;
    
    /* Button secondary */
    --skin-button-secondary: #8b9cad;
    --skin-button-disabled: #5a6570;
    
    /* Bootstrap overrides - Core */
    --bs-body-bg: var(--skin-page-bg);
    --bs-body-color: var(--skin-text-primary);
    --bs-border-color: var(--skin-border-default);
    --bs-secondary-color: var(--skin-text-secondary);
    --bs-tertiary-bg: var(--skin-card-bg-subtle);
    --bs-light-rgb: 26, 45, 66;
    --bs-dark-rgb: 255, 255, 255;
    
    /* Bootstrap overrides - Cards & Components */
    --bs-card-bg: var(--skin-card-bg);
    --bs-card-border-color: var(--skin-border-default);
    --bs-card-cap-bg: var(--skin-card-bg);
    --bs-secondary-bg: var(--skin-card-bg);
    --bs-heading-color: var(--skin-text-primary);
    --bs-link-color: #5dade2;
    --bs-link-hover-color: #85c1e9;
    
    /* Bootstrap overrides - Form elements */
    --bs-form-control-bg: var(--skin-input-bg);
    --bs-form-control-border-color: var(--skin-border-medium);
    
    /* Bootstrap overrides - Danger/Primary variants */
    --bs-primary-bg-subtle: rgba(61, 139, 253, 0.15);
    --bs-danger-bg-subtle: rgba(231, 76, 60, 0.15);
    --bs-danger: #e74c3c;
    --bs-primary: #3d8bfd;
    
    /* Brand palette overrides (from custom-styles.css :root) */
    --off-white: var(--skin-page-bg);
    --white: var(--skin-card-bg);
    --off-black: var(--skin-text-primary);
    --light-gray: var(--skin-card-bg);
    --medium-gray: var(--skin-border-medium);
    --dark-gray: var(--skin-text-secondary);
}

/* Dark theme utility class overrides */
.theme-dark .bg-white { background-color: var(--skin-card-bg) !important; }
.theme-dark .bg-light { background-color: var(--skin-card-bg-subtle) !important; }
.theme-dark .text-dark { color: var(--skin-text-primary) !important; }
.theme-dark .text-muted { color: var(--skin-text-muted) !important; }
.theme-dark .border { border-color: var(--skin-border-default) !important; }
.theme-dark .border-bottom { border-bottom-color: var(--skin-border-default) !important; }
.theme-dark .card { background-color: var(--skin-card-bg); border-color: var(--skin-border-default); }
.theme-dark .card-header { background-color: var(--skin-card-bg); border-bottom-color: var(--skin-border-default); }
.theme-dark .card-body { background-color: var(--skin-card-bg); }
.theme-dark .modal-content { background-color: var(--skin-card-bg); border-color: var(--skin-border-default); }
.theme-dark .form-control { 
    background-color: var(--skin-input-bg) !important; 
    border-color: var(--skin-border-strong) !important; 
    color: var(--skin-text-primary) !important; 
}
.theme-dark .form-control:focus { 
    background-color: var(--skin-input-bg) !important;
    border-color: var(--skin-accent) !important;
    color: var(--skin-text-primary) !important;
}
.theme-dark .form-select {
    background-color: var(--skin-input-bg) !important;
    border-color: var(--skin-border-strong) !important;
    color: var(--skin-text-primary) !important;
}
.theme-dark .btn-outline-secondary {
    border-color: var(--skin-border-strong);
    color: var(--skin-text-secondary);
}
.theme-dark .btn-outline-secondary:hover {
    background-color: var(--skin-hover-bg-strong);
    border-color: var(--skin-border-emphasis);
    color: var(--skin-text-primary);
}

/* Panel-specific dark theme overrides */
.theme-dark .parameter-control-wrapper {
    background-color: var(--skin-card-bg) !important;
    border-color: var(--skin-border-default) !important;
}

.theme-dark .parameter-card {
    background-color: var(--skin-card-bg) !important;
}

.theme-dark .parameter-control {
    border-bottom-color: var(--skin-border-light) !important;
}

/* Ensure form labels are light */
.theme-dark .form-label,
.theme-dark label {
    color: var(--skin-text-primary) !important;
}

/* Card overrides with higher specificity */
.theme-dark .card,
.theme-dark .card-body,
.theme-dark .card-header {
    background-color: var(--skin-card-bg) !important;
    color: var(--skin-text-primary) !important;
}

/* Panel item wrapper overrides */
.theme-dark .panel-item-wrapper {
    background-color: var(--skin-card-bg) !important;
    border-color: rgba(var(--skin-accent-rgb), 0.2) !important;
}

/* Button overrides for dark theme */
.theme-dark .btn-secondary {
    background-color: var(--skin-card-bg-subtle) !important;
    border-color: var(--skin-border-medium) !important;
    color: var(--skin-text-primary) !important;
}

.theme-dark .btn-secondary:hover {
    background-color: var(--skin-hover-bg-strong) !important;
    border-color: var(--skin-border-strong) !important;
    color: var(--skin-text-primary) !important;
}

.theme-dark .btn-light {
    background-color: var(--skin-card-bg-subtle) !important;
    border-color: var(--skin-border-medium) !important;
    color: var(--skin-text-primary) !important;
}

.theme-dark .btn-light:hover {
    background-color: var(--skin-hover-bg-strong) !important;
    border-color: var(--skin-border-strong) !important;
}

/* =============================================================================
   SPACING TOKENS - Layout-Dependent
   ============================================================================= */

:root {
    /* Spacing scale */
    --skin-spacing-2xs: 2px;
    --skin-spacing-xs: 4px;
    --skin-spacing-sm: 8px;
    --skin-spacing-md: 12px;
    --skin-spacing-lg: 16px;
    --skin-spacing-xl: 24px;
    --skin-spacing-2xl: 32px;
    
    /* Gap scale */
    --skin-gap-xs: 4px;
    --skin-gap-sm: 8px;
    --skin-gap-md: 10px;
    --skin-gap-lg: 16px;
    --skin-gap-xl: 24px;
}

/* =============================================================================
   BORDER RADIUS TOKENS
   ============================================================================= */

:root {
    --skin-radius-xs: 2px;
    --skin-radius-sm: 4px;
    --skin-radius-md: 8px;
    --skin-radius-lg: 12px;
    --skin-radius-xl: 16px;
    --skin-radius-2xl: 22px;
    --skin-radius-pill: 999px;
    --skin-radius-full: 50%;
}

/* =============================================================================
   TYPOGRAPHY TOKENS
   ============================================================================= */

:root {
    /* Font sizes */
    --skin-font-size-2xs: 10px;
    --skin-font-size-xs: 11px;
    --skin-font-size-sm: 12px;
    --skin-font-size-base: 13px;
    --skin-font-size-md: 14px;
    --skin-font-size-lg: 15px;
    --skin-font-size-xl: 16px;
    --skin-font-size-2xl: 18px;
    --skin-font-size-3xl: 24px;
    
    /* Font weights */
    --skin-font-weight-normal: 400;
    --skin-font-weight-medium: 500;
    --skin-font-weight-semibold: 600;
    --skin-font-weight-bold: 700;
    
    /* Letter spacing */
    --skin-letter-spacing-tight: -0.01em;
    --skin-letter-spacing-wide: 0.3px;
}

/* =============================================================================
   TRANSITION TOKENS
   ============================================================================= */

:root {
    --skin-transition-fast: 0.1s ease;
    --skin-transition-normal: 0.15s ease;
    --skin-transition-slow: 0.2s ease;
    --skin-transition-slower: 0.3s ease;
}

/* =============================================================================
   Z-INDEX TOKENS
   ============================================================================= */

:root {
    --skin-z-controls: 10;
    --skin-z-header: 100;
    --skin-z-bottom-bar: 150;
    --skin-z-floating: 200;
    --skin-z-notification: 250;
    --skin-z-overlay-mismatch: 290;
    --skin-z-overlay-reconnect: 295;
    --skin-z-overlay: 300;
    --skin-z-loading: 9999;
}

/* =============================================================================
   CONTROL SIZE TOKENS
   ============================================================================= */

:root {
    /* Slider dimensions */
    --skin-slider-thumb-size: 48px;
    --skin-slider-thumb-size-sm: 32px;
    --skin-slider-track-height: 8px;
    --skin-slider-vertical-height: 440px;
    
    /* Knob dimensions */
    --skin-knob-width: 180px;
    --skin-knob-height: 170px;
    
    /* Toggle dimensions */
    --skin-toggle-width: 80px;
    --skin-toggle-height: 44px;
    --skin-toggle-width-sm: 36px;
    --skin-toggle-height-sm: 20px;
    
    /* Color swatch */
    --skin-swatch-size: 36px;
    
    /* Button sizes */
    --skin-btn-height-sm: 28px;
    --skin-btn-height-md: 44px;
    --skin-btn-height-lg: 56px;
}

/* =============================================================================
   LEGACY ALIASES - Backward Compatibility
   These map old variable names to new skin variables
   ============================================================================= */

:root,
.skin-standard {
    /* Panel item variables (used throughout panel-preview.css and live-control.css) */
    --panel-item-bg: var(--skin-panel-bg);
    --panel-item-border: 1px solid var(--skin-border-default);
    --panel-item-shadow: var(--skin-shadow-card);
    --panel-item-radius: var(--skin-radius-lg);
    --panel-item-margin: var(--skin-spacing-sm);
    --panel-item-content-padding: var(--skin-spacing-sm);
    --panel-control-margin: var(--skin-spacing-sm);
    --panel-label-margin: var(--skin-spacing-xs);
    --panel-spacer-height: 1.5rem;
    --panel-divider-margin: 1rem;
    --panel-heading-padding: 0.5rem 0;
    
    /* Brand color aliases */
    --brand-green: var(--skin-accent);
}

/* =============================================================================
   PALETTE COLOR VARIANTS
   12 curated palettes with creative contextual names
   ============================================================================= */

/* Electric - Vibrant neon purple to pink gradient */
.palette-electric {
    --skin-accent-light: #B153D7;
    --skin-accent-hover-light: #C06DE0;
    --skin-accent-rgb-light: 177, 83, 215;
    --skin-accent-soft-light: rgba(177, 83, 215, 0.16);
    --skin-control-track-light: #E8C4F2;
    --skin-control-surface-light: #F9BAE0;
    --skin-panel-bg-light: #F5E0F0;
    --skin-input-bg-light: #F9E8F4;

    --skin-accent-dark: #F375C2;
    --skin-accent-hover-dark: #F58FCD;
    --skin-accent-rgb-dark: 243, 117, 194;
    --skin-accent-soft-dark: rgba(243, 117, 194, 0.24);
    --skin-control-track-dark: #4D2FB2;
    --skin-control-surface-dark: #0E21A0;
    --skin-panel-bg-dark: #0E21A0;
    --skin-input-bg-dark: #2A1DB0;
}

/* Cosmic - Deep space purple to soft pink */
.palette-cosmic {
    --skin-accent-light: #982598;
    --skin-accent-hover-light: #AA3AAA;
    --skin-accent-rgb-light: 152, 37, 152;
    --skin-accent-soft-light: rgba(152, 37, 152, 0.14);
    --skin-control-track-light: #E491C9;
    --skin-control-surface-light: #F6F1F1;
    --skin-panel-bg-light: #F1E9E9;
    --skin-input-bg-light: #F6F1F1;

    --skin-accent-dark: #E491C9;
    --skin-accent-hover-dark: #EAA8D4;
    --skin-accent-rgb-dark: 228, 145, 201;
    --skin-accent-soft-dark: rgba(228, 145, 201, 0.24);
    --skin-control-track-dark: #5A2A5A;
    --skin-control-surface-dark: #15173D;
    --skin-panel-bg-dark: #15173D;
    --skin-input-bg-dark: #2A2255;
}

/* Bubblegum - Sweet pink gradient */
.palette-bubblegum {
    --skin-accent-light: #FF9494;
    --skin-accent-hover-light: #FFA8A8;
    --skin-accent-rgb-light: 255, 148, 148;
    --skin-accent-soft-light: rgba(255, 148, 148, 0.18);
    --skin-control-track-light: #FFD1D1;
    --skin-control-surface-light: #FFF9EE;
    --skin-panel-bg-light: #FFF5E4;
    --skin-input-bg-light: #FFF9EE;

    --skin-accent-dark: #FFA8A8;
    --skin-accent-hover-dark: #FFBBBB;
    --skin-accent-rgb-dark: 255, 168, 168;
    --skin-accent-soft-dark: rgba(255, 168, 168, 0.24);
    --skin-control-track-dark: #9E6060;
    --skin-control-surface-dark: #6B4545;
    --skin-panel-bg-dark: #6B4545;
    --skin-input-bg-dark: #7E5858;
}

/* Blossom - Cherry blossom pinks */
.palette-blossom {
    --skin-accent-light: #F2BED1;
    --skin-accent-hover-light: #F5CDDC;
    --skin-accent-rgb-light: 242, 190, 209;
    --skin-accent-soft-light: rgba(242, 190, 209, 0.20);
    --skin-control-track-light: #FDCEDF;
    --skin-control-surface-light: #FAF8F8;
    --skin-panel-bg-light: #F9F5F6;
    --skin-input-bg-light: #FAF8F8;

    --skin-accent-dark: #F2BED1;
    --skin-accent-hover-dark: #F5CDDC;
    --skin-accent-rgb-dark: 242, 190, 209;
    --skin-accent-soft-dark: rgba(242, 190, 209, 0.24);
    --skin-control-track-dark: #8A6878;
    --skin-control-surface-dark: #5A4550;
    --skin-panel-bg-dark: #5A4550;
    --skin-input-bg-dark: #6E5565;
}

/* Dreamy - Soft lavender dreams */
.palette-dreamy {
    --skin-accent-light: #A6B1E1;
    --skin-accent-hover-light: #B5BFEA;
    --skin-accent-rgb-light: 166, 177, 225;
    --skin-accent-soft-light: rgba(166, 177, 225, 0.18);
    --skin-control-track-light: #DCD6F7;
    --skin-control-surface-light: #F7F3FF;
    --skin-panel-bg-light: #F4EEFF;
    --skin-input-bg-light: #F7F3FF;

    --skin-accent-dark: #B5BFEA;
    --skin-accent-hover-dark: #C4CDF0;
    --skin-accent-rgb-dark: 181, 191, 234;
    --skin-accent-soft-dark: rgba(181, 191, 234, 0.24);
    --skin-control-track-dark: #5A5F8A;
    --skin-control-surface-dark: #424874;
    --skin-panel-bg-dark: #424874;
    --skin-input-bg-dark: #525A88;
}

/* Cotton - Soft blue-purple cotton candy clouds */
.palette-cotton {
    --skin-accent-light: #B1B2FF;
    --skin-accent-hover-light: #C0C1FF;
    --skin-accent-rgb-light: 177, 178, 255;
    --skin-accent-soft-light: rgba(177, 178, 255, 0.20);
    --skin-control-track-light: #D2DAFF;
    --skin-control-surface-light: #F3F5FF;
    --skin-panel-bg-light: #EEF1FF;
    --skin-input-bg-light: #F3F5FF;

    --skin-accent-dark: #AAC4FF;
    --skin-accent-hover-dark: #BDD2FF;
    --skin-accent-rgb-dark: 170, 196, 255;
    --skin-accent-soft-dark: rgba(170, 196, 255, 0.24);
    --skin-control-track-dark: #5A5A8A;
    --skin-control-surface-dark: #3A3A60;
    --skin-panel-bg-dark: #3A3A60;
    --skin-input-bg-dark: #4D4D75;
}

/* Candy - Mixed pastel candy colors */
.palette-candy {
    --skin-accent-light: #AA96DA;
    --skin-accent-hover-light: #BBA9E2;
    --skin-accent-rgb-light: 170, 150, 218;
    --skin-accent-soft-light: rgba(170, 150, 218, 0.18);
    --skin-control-track-light: #FCBAD3;
    --skin-control-surface-light: #FFFFE4;
    --skin-panel-bg-light: #FFFFD2;
    --skin-input-bg-light: #FFFFE4;

    --skin-accent-dark: #FCBAD3;
    --skin-accent-hover-dark: #FDCADD;
    --skin-accent-rgb-dark: 252, 186, 211;
    --skin-accent-soft-dark: rgba(252, 186, 211, 0.24);
    --skin-control-track-dark: #7A6A92;
    --skin-control-surface-dark: #4A4062;
    --skin-panel-bg-dark: #4A4062;
    --skin-input-bg-dark: #5D5278;
}

/* Rosé - Pink meets teal summer vibes */
.palette-rose {
    --skin-accent-light: #61C0BF;
    --skin-accent-hover-light: #75CCCB;
    --skin-accent-rgb-light: 97, 192, 191;
    --skin-accent-soft-light: rgba(97, 192, 191, 0.16);
    --skin-control-track-light: #BBDED6;
    --skin-control-surface-light: #FCEEE8;
    --skin-panel-bg-light: #FAE3D9;
    --skin-input-bg-light: #FCEEE8;

    --skin-accent-dark: #FFB6B9;
    --skin-accent-hover-dark: #FFC8CA;
    --skin-accent-rgb-dark: 255, 182, 185;
    --skin-accent-soft-dark: rgba(255, 182, 185, 0.24);
    --skin-control-track-dark: #4A8A89;
    --skin-control-surface-dark: #2D5A5A;
    --skin-panel-bg-dark: #2D5A5A;
    --skin-input-bg-dark: #406D6D;
}

/* Forest - Deep nature greens */
.palette-forest {
    --skin-accent-light: #609966;
    --skin-accent-hover-light: #72A878;
    --skin-accent-rgb-light: 96, 153, 102;
    --skin-accent-soft-light: rgba(96, 153, 102, 0.14);
    --skin-control-track-light: #9DC08B;
    --skin-control-surface-light: #F4F6E6;
    --skin-panel-bg-light: #EDF1D6;
    --skin-input-bg-light: #F4F6E6;

    --skin-accent-dark: #9DC08B;
    --skin-accent-hover-dark: #ADCD9E;
    --skin-accent-rgb-dark: 157, 192, 139;
    --skin-accent-soft-dark: rgba(157, 192, 139, 0.22);
    --skin-control-track-dark: #526647;
    --skin-control-surface-dark: #40513B;
    --skin-panel-bg-dark: #40513B;
    --skin-input-bg-dark: #52644C;
}

/* Dusk - Pink to blue twilight gradient */
.palette-dusk {
    --skin-accent-light: #C06C84;
    --skin-accent-hover-light: #CC7F95;
    --skin-accent-rgb-light: 192, 108, 132;
    --skin-accent-soft-light: rgba(192, 108, 132, 0.16);
    --skin-control-track-light: #E8B4C0;
    --skin-control-surface-light: #FAB8BF;
    --skin-panel-bg-light: #F5E0E4;
    --skin-input-bg-light: #FAE8EB;

    --skin-accent-dark: #F67280;
    --skin-accent-hover-dark: #F88590;
    --skin-accent-rgb-dark: 246, 114, 128;
    --skin-accent-soft-dark: rgba(246, 114, 128, 0.24);
    --skin-control-track-dark: #6C5B7B;
    --skin-control-surface-dark: #355C7D;
    --skin-panel-bg-dark: #355C7D;
    --skin-input-bg-dark: #476D8E;
}

/* Velvet - Rich berry and burgundy tones */
.palette-velvet {
    --skin-accent-light: #88304E;
    --skin-accent-hover-light: #9A4260;
    --skin-accent-rgb-light: 136, 48, 78;
    --skin-accent-soft-light: rgba(136, 48, 78, 0.16);
    --skin-control-track-light: #E8A0B0;
    --skin-control-surface-light: #F3B1BB;
    --skin-panel-bg-light: #F5E0E4;
    --skin-input-bg-light: #F8E8EC;

    --skin-accent-dark: #E23E57;
    --skin-accent-hover-dark: #E75A70;
    --skin-accent-rgb-dark: 226, 62, 87;
    --skin-accent-soft-dark: rgba(226, 62, 87, 0.24);
    --skin-control-track-dark: #522546;
    --skin-control-surface-dark: #311D3F;
    --skin-panel-bg-dark: #311D3F;
    --skin-input-bg-dark: #442A52;
}

/* Serenity - Pink to blue calm gradient */
.palette-serenity {
    --skin-accent-light: #748DA6;
    --skin-accent-hover-light: #879DB4;
    --skin-accent-rgb-light: 116, 141, 166;
    --skin-accent-soft-light: rgba(116, 141, 166, 0.16);
    --skin-control-track-light: #D3CEDF;
    --skin-control-surface-light: #F7E7E8;
    --skin-panel-bg-light: #F2D7D9;
    --skin-input-bg-light: #F7E7E8;

    --skin-accent-dark: #9CB4CC;
    --skin-accent-hover-dark: #ADC3D8;
    --skin-accent-rgb-dark: 156, 180, 204;
    --skin-accent-soft-dark: rgba(156, 180, 204, 0.24);
    --skin-control-track-dark: #5A6A7A;
    --skin-control-surface-dark: #3A4A5A;
    --skin-panel-bg-dark: #3A4A5A;
    --skin-input-bg-dark: #4D5D6D;
}

/* =============================================================================
   VJ-SYDNEY SKIN - Base Variables
   Dark-only broadcast/VJ style with neon accents
   ============================================================================= */

.skin-vj-sydney {
    /* Force dark theme colors as base (dark-only skin) */
    /* Unified dark blue background - cohesive broadcast mixer look */
    --skin-page-bg: #0d1b2a;
    --skin-page-bg-accent: rgba(255, 20, 147, 0.03);
    
    /* Card/surface backgrounds - slightly darker for subtle distinction */
    --skin-card-bg: #0a1824;
    --skin-card-bg-subtle: #081420;
    --skin-card-bg-hover: #0f2030;
    --skin-panel-bg: #0a1824;
    --skin-input-bg: #0a1824;
    
    /* Text colors - high contrast */
    --skin-text-primary: #ffffff;
    --skin-text-secondary: #b0b0b0;
    --skin-text-muted: #707070;
    --skin-text-hint: #505050;
    
    /* Borders - subtle dark (neon accents applied via specific selectors) */
    --skin-border-light: #152535;
    --skin-border-default: #1a2a3a;
    --skin-border-medium: #253545;
    --skin-border-strong: #304050;
    --skin-border-emphasis: #405060;
    --skin-divider: rgba(255, 255, 255, 0.1);
    
    /* Shadows - darker, more dramatic */
    --skin-shadow-color: rgba(0, 0, 0, 0.6);
    --skin-shadow-color-md: rgba(0, 0, 0, 0.7);
    --skin-shadow-color-lg: rgba(0, 0, 0, 0.8);
    
    /* Interactive states */
    --skin-hover-bg: rgba(255, 255, 255, 0.05);
    --skin-hover-bg-strong: rgba(255, 255, 255, 0.1);
    
    /* Control surfaces */
    --skin-control-surface: #0d1b2a;
    --skin-slider-track: #081420;
    --skin-toggle-track: #152535;
}

/* VJ-Sydney Palettes - Neon accent colors */

.skin-vj-sydney.palette-neon-classic {
    --skin-accent: #FF1493;
    --skin-accent-hover: #FF3DAA;
    --skin-accent-rgb: 255, 20, 147;
    --skin-accent-soft: rgba(255, 20, 147, 0.2);
    --skin-toggle-active: #FF1493;
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #00FFFF;
    --vj-slider-thumb-rgb: 0, 255, 255;
}

.skin-vj-sydney.palette-cyberpunk {
    --skin-accent: #00FFFF;
    --skin-accent-hover: #33FFFF;
    --skin-accent-rgb: 0, 255, 255;
    --skin-accent-soft: rgba(0, 255, 255, 0.2);
    --skin-toggle-active: #00FFFF;
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #FFFF00;
    --vj-slider-thumb-rgb: 255, 255, 0;
}

.skin-vj-sydney.palette-synthwave {
    --skin-accent: #FF6B9D;
    --skin-accent-hover: #FF8DB5;
    --skin-accent-rgb: 255, 107, 157;
    --skin-accent-soft: rgba(255, 107, 157, 0.2);
    --skin-toggle-active: #FF6B9D;
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #00E5FF;
    --vj-slider-thumb-rgb: 0, 229, 255;
}

.skin-vj-sydney.palette-arcade {
    --skin-accent: #FF0000;
    --skin-accent-hover: #FF3333;
    --skin-accent-rgb: 255, 0, 0;
    --skin-accent-soft: rgba(255, 0, 0, 0.2);
    --skin-toggle-active: #FF0000;
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #FFCC00;
    --vj-slider-thumb-rgb: 255, 204, 0;
}

.skin-vj-sydney.palette-neon-noir {
    --skin-accent: #9929EA;
    --skin-accent-hover: #B153FF;
    --skin-accent-rgb: 153, 41, 234;
    --skin-accent-soft: rgba(153, 41, 234, 0.2);
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #00FFFF;
    --vj-slider-thumb-rgb: 0, 255, 255;
}

.skin-vj-sydney.palette-ion-drive {
    --skin-accent: #5B23FF;
    --skin-accent-hover: #7A4BFF;
    --skin-accent-rgb: 91, 35, 255;
    --skin-accent-soft: rgba(91, 35, 255, 0.2);
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #E4FF30;
    --vj-slider-thumb-rgb: 228, 255, 48;
}

.skin-vj-sydney.palette-teal-rose {
    --skin-accent: #08D9D6;
    --skin-accent-hover: #3BFFF0;
    --skin-accent-rgb: 8, 217, 214;
    --skin-accent-soft: rgba(8, 217, 214, 0.2);
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #F2F2F2;
    --vj-slider-thumb-rgb: 242, 242, 242;
}

.skin-vj-sydney.palette-miami-fader {
    --skin-accent: #3FC1C9;
    --skin-accent-hover: #6BE7EF;
    --skin-accent-rgb: 63, 193, 201;
    --skin-accent-soft: rgba(63, 193, 201, 0.2);
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #F5F5F5;
    --vj-slider-thumb-rgb: 245, 245, 245;
}

.skin-vj-sydney.palette-crimson-noir {
    --skin-accent: #FF0000;
    --skin-accent-hover: #FF3333;
    --skin-accent-rgb: 255, 0, 0;
    --skin-accent-soft: rgba(255, 0, 0, 0.2);
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #FF9999;
    --vj-slider-thumb-rgb: 255, 153, 153;
}

.skin-vj-sydney.palette-ultra-violet {
    --skin-accent: #892CDC;
    --skin-accent-hover: #A55BFF;
    --skin-accent-rgb: 137, 44, 220;
    --skin-accent-soft: rgba(137, 44, 220, 0.2);
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #E4C5F9;
    --vj-slider-thumb-rgb: 228, 197, 249;
}

.skin-vj-sydney.palette-aqua-spark {
    --skin-accent: #00B8A9;
    --skin-accent-hover: #33E6D3;
    --skin-accent-rgb: 0, 184, 169;
    --skin-accent-soft: rgba(0, 184, 169, 0.2);
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #FFDE7D;
    --vj-slider-thumb-rgb: 255, 222, 125;
}

.skin-vj-sydney.palette-neon-teal {
    --skin-accent: #14FFEC;
    --skin-accent-hover: #6BFFF6;
    --skin-accent-rgb: 20, 255, 236;
    --skin-accent-soft: rgba(20, 255, 236, 0.2);
    /* Slider thumb (light palette color) */
    --vj-slider-thumb: #A1FFF7;
    --vj-slider-thumb-rgb: 161, 255, 247;
}

/* =============================================================================
   VJ-SYDNEY BUTTON COLOR ROTATION
   6 colors per palette, assigned via data-color-index attribute
   ============================================================================= */

/* Neon Classic palette colors */
.skin-vj-sydney.palette-neon-classic .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-neon-classic .live-momentary-button[data-color-index="0"] {
    background: #FF1493; /* Hot Pink */
    box-shadow: 0 4px 12px rgba(255, 20, 147, 0.4);
}
.skin-vj-sydney.palette-neon-classic .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-neon-classic .live-momentary-button[data-color-index="1"] {
    background: #00D4FF; /* Electric Blue */
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4);
}
.skin-vj-sydney.palette-neon-classic .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-neon-classic .live-momentary-button[data-color-index="2"] {
    background: #39FF14; /* Lime */
    box-shadow: 0 4px 12px rgba(57, 255, 20, 0.4);
}
.skin-vj-sydney.palette-neon-classic .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-neon-classic .live-momentary-button[data-color-index="3"] {
    background: #FF6B00; /* Orange */
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4);
}
.skin-vj-sydney.palette-neon-classic .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-neon-classic .live-momentary-button[data-color-index="4"] {
    background: #BF00FF; /* Purple */
    box-shadow: 0 4px 12px rgba(191, 0, 255, 0.4);
}
.skin-vj-sydney.palette-neon-classic .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-neon-classic .live-momentary-button[data-color-index="5"] {
    background: #00FFFF; /* Cyan */
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.4);
}

/* Cyberpunk palette colors */
.skin-vj-sydney.palette-cyberpunk .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-cyberpunk .live-momentary-button[data-color-index="0"] {
    background: #FF00FF; /* Magenta */
    box-shadow: 0 4px 12px rgba(255, 0, 255, 0.4);
}
.skin-vj-sydney.palette-cyberpunk .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-cyberpunk .live-momentary-button[data-color-index="1"] {
    background: #00FFFF; /* Cyan */
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.4);
}
.skin-vj-sydney.palette-cyberpunk .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-cyberpunk .live-momentary-button[data-color-index="2"] {
    background: #FFFF00; /* Yellow */
    box-shadow: 0 4px 12px rgba(255, 255, 0, 0.4);
}
.skin-vj-sydney.palette-cyberpunk .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-cyberpunk .live-momentary-button[data-color-index="3"] {
    background: #8B00FF; /* Electric Purple */
    box-shadow: 0 4px 12px rgba(139, 0, 255, 0.4);
}
.skin-vj-sydney.palette-cyberpunk .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-cyberpunk .live-momentary-button[data-color-index="4"] {
    background: #FF1493; /* Hot Pink */
    box-shadow: 0 4px 12px rgba(255, 20, 147, 0.4);
}
.skin-vj-sydney.palette-cyberpunk .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-cyberpunk .live-momentary-button[data-color-index="5"] {
    background: #ADFF2F; /* Lime */
    box-shadow: 0 4px 12px rgba(173, 255, 47, 0.4);
}

/* Synthwave palette colors */
.skin-vj-sydney.palette-synthwave .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-synthwave .live-momentary-button[data-color-index="0"] {
    background: #FF6B9D; /* Pink */
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}
.skin-vj-sydney.palette-synthwave .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-synthwave .live-momentary-button[data-color-index="1"] {
    background: #C77DFF; /* Purple */
    box-shadow: 0 4px 12px rgba(199, 125, 255, 0.4);
}
.skin-vj-sydney.palette-synthwave .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-synthwave .live-momentary-button[data-color-index="2"] {
    background: #00E5FF; /* Cyan */
    box-shadow: 0 4px 12px rgba(0, 229, 255, 0.4);
}
.skin-vj-sydney.palette-synthwave .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-synthwave .live-momentary-button[data-color-index="3"] {
    background: #FF8C42; /* Orange */
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.4);
}
.skin-vj-sydney.palette-synthwave .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-synthwave .live-momentary-button[data-color-index="4"] {
    background: #3D5AFE; /* Blue */
    box-shadow: 0 4px 12px rgba(61, 90, 254, 0.4);
}
.skin-vj-sydney.palette-synthwave .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-synthwave .live-momentary-button[data-color-index="5"] {
    background: #E040FB; /* Magenta */
    box-shadow: 0 4px 12px rgba(224, 64, 251, 0.4);
}

/* Retro Arcade palette colors */
.skin-vj-sydney.palette-arcade .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-arcade .live-momentary-button[data-color-index="0"] {
    background: #FF0000; /* Red */
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
}
.skin-vj-sydney.palette-arcade .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-arcade .live-momentary-button[data-color-index="1"] {
    background: #0066FF; /* Blue */
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.4);
}
.skin-vj-sydney.palette-arcade .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-arcade .live-momentary-button[data-color-index="2"] {
    background: #FFCC00; /* Yellow */
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.4);
}
.skin-vj-sydney.palette-arcade .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-arcade .live-momentary-button[data-color-index="3"] {
    background: #00CC00; /* Green */
    box-shadow: 0 4px 12px rgba(0, 204, 0, 0.4);
}
.skin-vj-sydney.palette-arcade .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-arcade .live-momentary-button[data-color-index="4"] {
    background: #FF6600; /* Orange */
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.4);
}
.skin-vj-sydney.palette-arcade .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-arcade .live-momentary-button[data-color-index="5"] {
    background: #9900FF; /* Purple */
    box-shadow: 0 4px 12px rgba(153, 0, 255, 0.4);
}

/* Neon Noir palette colors (jazzed neon set) */
.skin-vj-sydney.palette-neon-noir .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-neon-noir .live-momentary-button[data-color-index="0"] {
    background: #9929EA; /* Electric Purple */
    box-shadow: 0 4px 12px rgba(153, 41, 234, 0.45);
}
.skin-vj-sydney.palette-neon-noir .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-neon-noir .live-momentary-button[data-color-index="1"] {
    background: #FF5FCF; /* Neon Pink */
    box-shadow: 0 4px 12px rgba(255, 95, 207, 0.45);
}
.skin-vj-sydney.palette-neon-noir .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-neon-noir .live-momentary-button[data-color-index="2"] {
    background: #00FFFF; /* Cyan */
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.45);
}
.skin-vj-sydney.palette-neon-noir .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-neon-noir .live-momentary-button[data-color-index="3"] {
    background: #E4FF30; /* Neon Lime */
    box-shadow: 0 4px 12px rgba(228, 255, 48, 0.45);
}
.skin-vj-sydney.palette-neon-noir .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-neon-noir .live-momentary-button[data-color-index="4"] {
    background: #FAEB92; /* Neon Yellow */
    box-shadow: 0 4px 12px rgba(250, 235, 146, 0.4);
}
.skin-vj-sydney.palette-neon-noir .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-neon-noir .live-momentary-button[data-color-index="5"] {
    background: #FF3B3B; /* Neon Red */
    box-shadow: 0 4px 12px rgba(255, 59, 59, 0.45);
}

/* Ion Drive palette colors */
.skin-vj-sydney.palette-ion-drive .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-ion-drive .live-momentary-button[data-color-index="0"] {
    background: #5B23FF; /* Violet */
    box-shadow: 0 4px 12px rgba(91, 35, 255, 0.45);
}
.skin-vj-sydney.palette-ion-drive .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-ion-drive .live-momentary-button[data-color-index="1"] {
    background: #008BFF; /* Electric Blue */
    box-shadow: 0 4px 12px rgba(0, 139, 255, 0.45);
}
.skin-vj-sydney.palette-ion-drive .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-ion-drive .live-momentary-button[data-color-index="2"] {
    background: #00FFFF; /* Cyan */
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.45);
}
.skin-vj-sydney.palette-ion-drive .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-ion-drive .live-momentary-button[data-color-index="3"] {
    background: #E4FF30; /* Neon Lime */
    box-shadow: 0 4px 12px rgba(228, 255, 48, 0.45);
}
.skin-vj-sydney.palette-ion-drive .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-ion-drive .live-momentary-button[data-color-index="4"] {
    background: #FF2EDC; /* Electric Magenta */
    box-shadow: 0 4px 12px rgba(255, 46, 220, 0.45);
}
.skin-vj-sydney.palette-ion-drive .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-ion-drive .live-momentary-button[data-color-index="5"] {
    background: #FF7B00; /* Neon Orange */
    box-shadow: 0 4px 12px rgba(255, 123, 0, 0.45);
}

/* Teal Rose palette colors */
.skin-vj-sydney.palette-teal-rose .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-teal-rose .live-momentary-button[data-color-index="0"] {
    background: #08D9D6; /* Teal */
    box-shadow: 0 4px 12px rgba(8, 217, 214, 0.45);
}
.skin-vj-sydney.palette-teal-rose .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-teal-rose .live-momentary-button[data-color-index="1"] {
    background: #FF2E63; /* Hot Pink */
    box-shadow: 0 4px 12px rgba(255, 46, 99, 0.45);
}
.skin-vj-sydney.palette-teal-rose .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-teal-rose .live-momentary-button[data-color-index="2"] {
    background: #00FFFF; /* Cyan */
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.45);
}
.skin-vj-sydney.palette-teal-rose .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-teal-rose .live-momentary-button[data-color-index="3"] {
    background: #E4FF30; /* Neon Lime */
    box-shadow: 0 4px 12px rgba(228, 255, 48, 0.45);
}
.skin-vj-sydney.palette-teal-rose .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-teal-rose .live-momentary-button[data-color-index="4"] {
    background: #F2F2F2; /* Light */
    box-shadow: 0 4px 12px rgba(242, 242, 242, 0.25);
}
.skin-vj-sydney.palette-teal-rose .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-teal-rose .live-momentary-button[data-color-index="5"] {
    background: #FF00FF; /* Magenta */
    box-shadow: 0 4px 12px rgba(255, 0, 255, 0.45);
}

/* Miami Fader palette colors */
.skin-vj-sydney.palette-miami-fader .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-miami-fader .live-momentary-button[data-color-index="0"] {
    background: #3FC1C9; /* Aqua */
    box-shadow: 0 4px 12px rgba(63, 193, 201, 0.45);
}
.skin-vj-sydney.palette-miami-fader .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-miami-fader .live-momentary-button[data-color-index="1"] {
    background: #FC5185; /* Pink */
    box-shadow: 0 4px 12px rgba(252, 81, 133, 0.45);
}
.skin-vj-sydney.palette-miami-fader .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-miami-fader .live-momentary-button[data-color-index="2"] {
    background: #FFDE7D; /* Warm Yellow */
    box-shadow: 0 4px 12px rgba(255, 222, 125, 0.4);
}
.skin-vj-sydney.palette-miami-fader .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-miami-fader .live-momentary-button[data-color-index="3"] {
    background: #00FFFF; /* Neon Cyan */
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.45);
}
.skin-vj-sydney.palette-miami-fader .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-miami-fader .live-momentary-button[data-color-index="4"] {
    background: #FF5FCF; /* Neon Pink */
    box-shadow: 0 4px 12px rgba(255, 95, 207, 0.45);
}
.skin-vj-sydney.palette-miami-fader .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-miami-fader .live-momentary-button[data-color-index="5"] {
    background: #39FF14; /* Lime */
    box-shadow: 0 4px 12px rgba(57, 255, 20, 0.45);
}

/* Crimson Noir palette colors */
.skin-vj-sydney.palette-crimson-noir .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-crimson-noir .live-momentary-button[data-color-index="0"] {
    background: #FF0000; /* Red */
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.45);
}
.skin-vj-sydney.palette-crimson-noir .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-crimson-noir .live-momentary-button[data-color-index="1"] {
    background: #FF4D00; /* Orange Red */
    box-shadow: 0 4px 12px rgba(255, 77, 0, 0.45);
}
.skin-vj-sydney.palette-crimson-noir .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-crimson-noir .live-momentary-button[data-color-index="2"] {
    background: #FF5FCF; /* Neon Pink */
    box-shadow: 0 4px 12px rgba(255, 95, 207, 0.45);
}
.skin-vj-sydney.palette-crimson-noir .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-crimson-noir .live-momentary-button[data-color-index="3"] {
    background: #FAEB92; /* Warm Yellow */
    box-shadow: 0 4px 12px rgba(250, 235, 146, 0.4);
}
.skin-vj-sydney.palette-crimson-noir .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-crimson-noir .live-momentary-button[data-color-index="4"] {
    background: #FF9999; /* Light Red */
    box-shadow: 0 4px 12px rgba(255, 153, 153, 0.3);
}
.skin-vj-sydney.palette-crimson-noir .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-crimson-noir .live-momentary-button[data-color-index="5"] {
    background: #950101; /* Deep Red */
    box-shadow: 0 4px 12px rgba(149, 1, 1, 0.45);
}

/* Ultra Violet palette colors */
.skin-vj-sydney.palette-ultra-violet .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-ultra-violet .live-momentary-button[data-color-index="0"] {
    background: #52057B; /* Deep Purple */
    box-shadow: 0 4px 12px rgba(82, 5, 123, 0.45);
}
.skin-vj-sydney.palette-ultra-violet .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-ultra-violet .live-momentary-button[data-color-index="1"] {
    background: #892CDC; /* Electric Purple */
    box-shadow: 0 4px 12px rgba(137, 44, 220, 0.45);
}
.skin-vj-sydney.palette-ultra-violet .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-ultra-violet .live-momentary-button[data-color-index="2"] {
    background: #BC6FF1; /* Violet */
    box-shadow: 0 4px 12px rgba(188, 111, 241, 0.45);
}
.skin-vj-sydney.palette-ultra-violet .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-ultra-violet .live-momentary-button[data-color-index="3"] {
    background: #00FFFF; /* Cyan */
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.45);
}
.skin-vj-sydney.palette-ultra-violet .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-ultra-violet .live-momentary-button[data-color-index="4"] {
    background: #FF5FCF; /* Neon Pink */
    box-shadow: 0 4px 12px rgba(255, 95, 207, 0.45);
}
.skin-vj-sydney.palette-ultra-violet .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-ultra-violet .live-momentary-button[data-color-index="5"] {
    background: #E4C5F9; /* Light Violet */
    box-shadow: 0 4px 12px rgba(228, 197, 249, 0.25);
}

/* Aqua Spark palette colors */
.skin-vj-sydney.palette-aqua-spark .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-aqua-spark .live-momentary-button[data-color-index="0"] {
    background: #00B8A9; /* Aqua */
    box-shadow: 0 4px 12px rgba(0, 184, 169, 0.45);
}
.skin-vj-sydney.palette-aqua-spark .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-aqua-spark .live-momentary-button[data-color-index="1"] {
    background: #F6416C; /* Neon Pink/Red */
    box-shadow: 0 4px 12px rgba(246, 65, 108, 0.45);
}
.skin-vj-sydney.palette-aqua-spark .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-aqua-spark .live-momentary-button[data-color-index="2"] {
    background: #FFDE7D; /* Yellow */
    box-shadow: 0 4px 12px rgba(255, 222, 125, 0.4);
}
.skin-vj-sydney.palette-aqua-spark .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-aqua-spark .live-momentary-button[data-color-index="3"] {
    background: #00FFFF; /* Cyan */
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.45);
}
.skin-vj-sydney.palette-aqua-spark .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-aqua-spark .live-momentary-button[data-color-index="4"] {
    background: #FF00FF; /* Magenta */
    box-shadow: 0 4px 12px rgba(255, 0, 255, 0.45);
}
.skin-vj-sydney.palette-aqua-spark .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-aqua-spark .live-momentary-button[data-color-index="5"] {
    background: #F8F3D4; /* Warm light */
    box-shadow: 0 4px 12px rgba(248, 243, 212, 0.22);
}

/* Neon Teal palette colors */
.skin-vj-sydney.palette-neon-teal .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-neon-teal .live-momentary-button[data-color-index="0"] {
    background: #14FFEC; /* Neon Teal */
    box-shadow: 0 4px 12px rgba(20, 255, 236, 0.45);
}
.skin-vj-sydney.palette-neon-teal .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-neon-teal .live-momentary-button[data-color-index="1"] {
    background: #0D7377; /* Deep Teal */
    box-shadow: 0 4px 12px rgba(13, 115, 119, 0.45);
}
.skin-vj-sydney.palette-neon-teal .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-neon-teal .live-momentary-button[data-color-index="2"] {
    background: #00FFFF; /* Cyan */
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.45);
}
.skin-vj-sydney.palette-neon-teal .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-neon-teal .live-momentary-button[data-color-index="3"] {
    background: #E4FF30; /* Neon Lime */
    box-shadow: 0 4px 12px rgba(228, 255, 48, 0.45);
}
.skin-vj-sydney.palette-neon-teal .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-neon-teal .live-momentary-button[data-color-index="4"] {
    background: #FF2E63; /* Neon Pink */
    box-shadow: 0 4px 12px rgba(255, 46, 99, 0.45);
}
.skin-vj-sydney.palette-neon-teal .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-neon-teal .live-momentary-button[data-color-index="5"] {
    background: #A1FFF7; /* Light Teal */
    box-shadow: 0 4px 12px rgba(161, 255, 247, 0.25);
}

/* Hover states preserve the color but brighten */
.skin-vj-sydney .live-pulse-button[data-color-index]:hover,
.skin-vj-sydney .live-momentary-button[data-color-index]:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
}

/* Active states dim slightly */
.skin-vj-sydney .live-pulse-button[data-color-index]:active,
.skin-vj-sydney .live-pulse-button[data-color-index].active,
.skin-vj-sydney .live-momentary-button[data-color-index]:active,
.skin-vj-sydney .live-momentary-button[data-color-index].active {
    filter: brightness(0.9);
    transform: translateY(1px);
}