/* ============================================
   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;
    
    /* Control font family (per skin) */
    --skin-font-controls: 'Inter', system-ui, sans-serif;
}

/* =============================================================================
   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: 56px;
    --skin-slider-thumb-size-sm: 44px;
    --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 {
    /* Skin font */
    --skin-font-controls: 'Orbitron', sans-serif;
    
    /* 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-bondi-glow {
    --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-harbour-lights {
    --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-outback-sunset {
    --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-barrier-reef {
    --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-melbourne-night {
    --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-blue-mountains {
    --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-coral-coast {
    --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-byron-bay {
    --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-red-centre {
    --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-southern-cross {
    --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-gold-coast {
    --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-great-ocean {
    --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
   ============================================================================= */

/* Bondi Glow palette colors */
.skin-vj-sydney.palette-bondi-glow .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-bondi-glow .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-bondi-glow .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-bondi-glow .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-bondi-glow .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-bondi-glow .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-bondi-glow .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-bondi-glow .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-bondi-glow .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-bondi-glow .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-bondi-glow .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-bondi-glow .live-momentary-button[data-color-index="5"] {
    background: #00FFFF; /* Cyan */
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.4);
}

/* Harbour Lights palette colors */
.skin-vj-sydney.palette-harbour-lights .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-harbour-lights .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-harbour-lights .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-harbour-lights .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-harbour-lights .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-harbour-lights .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-harbour-lights .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-harbour-lights .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-harbour-lights .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-harbour-lights .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-harbour-lights .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-harbour-lights .live-momentary-button[data-color-index="5"] {
    background: #ADFF2F; /* Lime */
    box-shadow: 0 4px 12px rgba(173, 255, 47, 0.4);
}

/* Outback Sunset palette colors */
.skin-vj-sydney.palette-outback-sunset .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-outback-sunset .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-outback-sunset .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-outback-sunset .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-outback-sunset .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-outback-sunset .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-outback-sunset .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-outback-sunset .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-outback-sunset .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-outback-sunset .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-outback-sunset .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-outback-sunset .live-momentary-button[data-color-index="5"] {
    background: #E040FB; /* Magenta */
    box-shadow: 0 4px 12px rgba(224, 64, 251, 0.4);
}

/* Barrier Reef palette colors */
.skin-vj-sydney.palette-barrier-reef .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-barrier-reef .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-barrier-reef .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-barrier-reef .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-barrier-reef .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-barrier-reef .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-barrier-reef .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-barrier-reef .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-barrier-reef .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-barrier-reef .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-barrier-reef .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-barrier-reef .live-momentary-button[data-color-index="5"] {
    background: #9900FF; /* Purple */
    box-shadow: 0 4px 12px rgba(153, 0, 255, 0.4);
}

/* Melbourne Night palette colors (jazzed neon set) */
.skin-vj-sydney.palette-melbourne-night .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-melbourne-night .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-melbourne-night .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-melbourne-night .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-melbourne-night .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-melbourne-night .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-melbourne-night .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-melbourne-night .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-melbourne-night .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-melbourne-night .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-melbourne-night .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-melbourne-night .live-momentary-button[data-color-index="5"] {
    background: #FF3B3B; /* Neon Red */
    box-shadow: 0 4px 12px rgba(255, 59, 59, 0.45);
}

/* Blue Mountains palette colors */
.skin-vj-sydney.palette-blue-mountains .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-blue-mountains .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-blue-mountains .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-blue-mountains .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-blue-mountains .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-blue-mountains .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-blue-mountains .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-blue-mountains .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-blue-mountains .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-blue-mountains .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-blue-mountains .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-blue-mountains .live-momentary-button[data-color-index="5"] {
    background: #FF7B00; /* Neon Orange */
    box-shadow: 0 4px 12px rgba(255, 123, 0, 0.45);
}

/* Coral Coast palette colors */
.skin-vj-sydney.palette-coral-coast .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-coral-coast .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-coral-coast .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-coral-coast .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-coral-coast .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-coral-coast .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-coral-coast .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-coral-coast .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-coral-coast .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-coral-coast .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-coral-coast .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-coral-coast .live-momentary-button[data-color-index="5"] {
    background: #FF00FF; /* Magenta */
    box-shadow: 0 4px 12px rgba(255, 0, 255, 0.45);
}

/* Byron Bay palette colors */
.skin-vj-sydney.palette-byron-bay .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-byron-bay .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-byron-bay .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-byron-bay .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-byron-bay .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-byron-bay .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-byron-bay .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-byron-bay .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-byron-bay .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-byron-bay .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-byron-bay .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-byron-bay .live-momentary-button[data-color-index="5"] {
    background: #39FF14; /* Lime */
    box-shadow: 0 4px 12px rgba(57, 255, 20, 0.45);
}

/* Red Centre palette colors */
.skin-vj-sydney.palette-red-centre .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-red-centre .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-red-centre .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-red-centre .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-red-centre .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-red-centre .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-red-centre .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-red-centre .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-red-centre .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-red-centre .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-red-centre .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-red-centre .live-momentary-button[data-color-index="5"] {
    background: #950101; /* Deep Red */
    box-shadow: 0 4px 12px rgba(149, 1, 1, 0.45);
}

/* Southern Cross palette colors */
.skin-vj-sydney.palette-southern-cross .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-southern-cross .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-southern-cross .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-southern-cross .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-southern-cross .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-southern-cross .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-southern-cross .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-southern-cross .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-southern-cross .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-southern-cross .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-southern-cross .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-southern-cross .live-momentary-button[data-color-index="5"] {
    background: #E4C5F9; /* Light Violet */
    box-shadow: 0 4px 12px rgba(228, 197, 249, 0.25);
}

/* Gold Coast palette colors */
.skin-vj-sydney.palette-gold-coast .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-gold-coast .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-gold-coast .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-gold-coast .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-gold-coast .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-gold-coast .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-gold-coast .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-gold-coast .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-gold-coast .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-gold-coast .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-gold-coast .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-gold-coast .live-momentary-button[data-color-index="5"] {
    background: #F8F3D4; /* Warm light */
    box-shadow: 0 4px 12px rgba(248, 243, 212, 0.22);
}

/* Great Ocean palette colors */
.skin-vj-sydney.palette-great-ocean .live-pulse-button[data-color-index="0"],
.skin-vj-sydney.palette-great-ocean .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-great-ocean .live-pulse-button[data-color-index="1"],
.skin-vj-sydney.palette-great-ocean .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-great-ocean .live-pulse-button[data-color-index="2"],
.skin-vj-sydney.palette-great-ocean .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-great-ocean .live-pulse-button[data-color-index="3"],
.skin-vj-sydney.palette-great-ocean .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-great-ocean .live-pulse-button[data-color-index="4"],
.skin-vj-sydney.palette-great-ocean .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-great-ocean .live-pulse-button[data-color-index="5"],
.skin-vj-sydney.palette-great-ocean .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);
}

/* =============================================================================
   80S-STEREO SKIN - Hardware Mixer Style
   Retro brushed metal aesthetic with light/dark modes
   Inspired by 80s hi-fi equipment and mixing consoles
   ============================================================================= */

.skin-80s-stereo {
    /* Skin font */
    --skin-font-controls: 'Russo One', sans-serif;
    
    /* Page backgrounds - brushed silver metallic */
    --skin-page-bg: #b8c0c8;
    /* Tie ambient glow to the active palette accent */
    --skin-page-bg-accent: rgba(var(--skin-accent-rgb), 0.08);
    --skin-page-bg-accent-dark: rgba(var(--skin-accent-rgb), 0.05);
    
    /* Panel surfaces - lighter brushed metal */
    --skin-panel-bg: #d0d8e0;
    --skin-panel-bg-light: #e0e8f0;
    --skin-panel-bg-dark: #c0c8d0;
    
    /* Cards inherit panel styling */
    --skin-card-bg: var(--skin-panel-bg);
    --skin-card-bg-hover: #d8e0e8;
    
    /* Borders - subtle metallic edges */
    --skin-border-default: rgba(8, 217, 214, 0.25);
    --skin-border-light: rgba(255, 255, 255, 0.5);
    --skin-border-heavy: rgba(0, 0, 0, 0.2);
    
    /* Text - dark on light */
    --skin-text-primary: #1a2028;
    --skin-text-secondary: rgba(26, 32, 40, 0.7);
    --skin-text-muted: rgba(26, 32, 40, 0.5);
    --skin-text-inverse: #ffffff;
    
    /* Shadows - metallic depth */
    --skin-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
    --skin-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
    --skin-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
    --skin-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.15);
    --skin-shadow-glow: 0 0 12px var(--skin-accent-soft);
    
    /* Accent colors - default to Arcade Fire palette */
    --skin-accent: #FF2E63;
    --skin-accent-hover: #FF5580;
    --skin-accent-rgb: 255, 46, 99;
    --skin-accent-soft: rgba(255, 46, 99, 0.25);
    --skin-accent-softer: rgba(255, 46, 99, 0.1);
    
    /* Secondary accent */
    --skin-accent-secondary: #08D9D6;
    --skin-accent-secondary-rgb: 8, 217, 214;
    
    /* Control surfaces - HIGH contrast metallic for visible 3D gradient */
    /* Must have 100+ value difference between light and dark for visible effect */
    --skin-control-light: #f8fcff;  /* ~252 - nearly white highlight */
    --skin-control-mid: #b8c4d0;    /* ~188 - neutral silver */
    --skin-control-dark: #707888;   /* ~120 - darker shadow tone */
    --skin-control-track: #0a0a0a;  /* nearly black groove */
    
    /* Toggle specific */
    --skin-toggle-track: #1a1a1a;
    --skin-toggle-track-active: #1a1a1a;
    --skin-toggle-thumb: var(--skin-control-mid);
    --skin-toggle-active: var(--skin-accent);
    
    /* Slider specific */
    --skin-slider-track: #1a1a1a;
    --skin-slider-thumb: var(--skin-control-mid);
    --skin-slider-accent: var(--skin-accent);
    
    /* Metallic effects - reusable by any skin */
    --skin-metal-highlight: rgba(255, 255, 255, 0.5);
    --skin-metal-highlight-soft: rgba(255, 255, 255, 0.25);
    --skin-metal-shadow: rgba(0, 0, 0, 0.4);
    --skin-metal-shadow-soft: rgba(0, 0, 0, 0.2);
    --skin-metal-shadow-deep: rgba(0, 0, 0, 0.6);
    
    /* Panel styling */
    --skin-panel-border: var(--skin-border-default);
    --skin-panel-highlight: inset 0 1px 0 var(--skin-metal-highlight-soft);
    --skin-panel-shadow: 
        0 4px 12px var(--skin-metal-shadow-soft),
        0 8px 24px rgba(0, 0, 0, 0.1);
    
    /* Knob specific */
    --skin-knob-track: var(--skin-control-track);
    --skin-knob-arc: var(--skin-accent);
    --skin-knob-center: var(--skin-control-mid);
    --skin-knob-center-stroke: var(--skin-control-dark);
    --skin-knob-indicator: var(--skin-accent);
    
    /* Focus states */
    --skin-focus-ring: 0 0 0 3px var(--skin-accent-soft);
    
    /* Legacy aliases */
    --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);
    
    /* Backward compatibility with hw- prefix */
    --hw-highlight: var(--skin-metal-highlight);
    --hw-highlight-soft: var(--skin-metal-highlight-soft);
    --hw-shadow: var(--skin-metal-shadow);
    --hw-shadow-soft: var(--skin-metal-shadow-soft);
    --hw-shadow-deep: var(--skin-metal-shadow-deep);
}

/* 80s Stereo Dark Theme */
.skin-80s-stereo.theme-dark {
    /* Page backgrounds - dark charcoal */
    --skin-page-bg: #1a1e26;
    /* Tie ambient glow to the active palette accent */
    --skin-page-bg-accent: rgba(var(--skin-accent-rgb), 0.03);
    --skin-page-bg-accent-dark: rgba(var(--skin-accent-rgb), 0.02);
    
    /* Panel surfaces - darker metal */
    --skin-panel-bg: #252a34;
    --skin-panel-bg-light: #2f3542;
    --skin-panel-bg-dark: #1a1e26;
    
    /* Cards */
    --skin-card-bg: var(--skin-panel-bg);
    --skin-card-bg-hover: #2f3542;
    
    /* Borders - subtle glow */
    --skin-border-default: rgba(8, 217, 214, 0.15);
    --skin-border-light: rgba(255, 255, 255, 0.1);
    --skin-border-heavy: rgba(0, 0, 0, 0.5);
    
    /* Text - light on dark */
    --skin-text-primary: #EAEAEA;
    --skin-text-secondary: rgba(234, 234, 234, 0.7);
    --skin-text-muted: rgba(234, 234, 234, 0.5);
    --skin-text-inverse: #1a1e26;
    
    /* Control surfaces - dark metallic */
    --skin-control-light: #4d5464;
    --skin-control-mid: #3f4552;
    --skin-control-dark: #2a3040;
    
    /* Metallic effects - adjusted for dark mode */
    --skin-metal-highlight: rgba(255, 255, 255, 0.15);
    --skin-metal-highlight-soft: rgba(255, 255, 255, 0.08);
    --skin-metal-shadow: rgba(0, 0, 0, 0.5);
    --skin-metal-shadow-soft: rgba(0, 0, 0, 0.3);
    --skin-metal-shadow-deep: rgba(0, 0, 0, 0.7);
    
    /* Panel styling - darker */
    --skin-panel-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* Knob specific - darker center */
    --skin-knob-center: var(--skin-control-mid);
    --skin-knob-center-stroke: var(--skin-control-dark);
    
    /* Shadows - deeper for dark mode */
    --skin-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --skin-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --skin-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --skin-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
    --skin-shadow-glow: 0 0 16px var(--skin-accent-soft);
}

/* =============================================================================
   80S-STEREO PALETTES - Named after 80s bands
   ============================================================================= */

/* Midnight Star - Purple/pink night glow */
.skin-80s-stereo.palette-midnight-star {
    --skin-accent: #B153D7;
    --skin-accent-hover: #C77DE5;
    --skin-accent-rgb: 177, 83, 215;
    --skin-accent-soft: rgba(177, 83, 215, 0.25);
    --skin-accent-softer: rgba(177, 83, 215, 0.1);
    --skin-accent-secondary: #F375C2;
    --skin-accent-secondary-rgb: 243, 117, 194;
}
.skin-80s-stereo.palette-midnight-star.theme-light {
    /* Lavender-tinted brushed metal - high contrast */
    --skin-page-bg: #b5adc9;
    --skin-panel-bg: #d7d0e6;
    --skin-border-default: rgba(177, 83, 215, 0.3);
    --skin-control-light: #f8f4ff;
    --skin-control-mid: #c0b5d8;
    --skin-control-dark: #8878a8;
    --skin-control-track: #1a1822;
    --skin-text-primary: #22152f;
    --skin-text-secondary: rgba(34, 21, 47, 0.72);
}
.skin-80s-stereo.palette-midnight-star.theme-dark {
    --skin-page-bg: #0E1A3D;
    --skin-panel-bg: #152252;
    --skin-border-default: rgba(177, 83, 215, 0.2);
    --skin-control-light: #5a6a98;
    --skin-control-mid: #3a4a78;
    --skin-control-dark: #1a2a50;
    --skin-text-primary: #F9BAE0;
}

/* Blondie - Hot pink neon */
.skin-80s-stereo.palette-blondie {
    --skin-accent: #FF5FCF;
    --skin-accent-hover: #FF8ADE;
    --skin-accent-rgb: 255, 95, 207;
    --skin-accent-soft: rgba(255, 95, 207, 0.25);
    --skin-accent-softer: rgba(255, 95, 207, 0.1);
    --skin-accent-secondary: #9929EA;
    --skin-accent-secondary-rgb: 153, 41, 234;
}
.skin-80s-stereo.palette-blondie.theme-light {
    /* Pink champagne anodized metal - high contrast */
    --skin-page-bg: #d2b4c7;
    --skin-panel-bg: #f0d7e6;
    --skin-border-default: rgba(153, 41, 234, 0.25);
    --skin-control-light: #fff5fa;
    --skin-control-mid: #d8a8c4;
    --skin-control-dark: #9a6888;
    --skin-control-track: #221018;
    --skin-text-primary: #2a0a22;
    --skin-text-secondary: rgba(42, 10, 34, 0.72);
}
.skin-80s-stereo.palette-blondie.theme-dark {
    --skin-page-bg: #0a0014;
    --skin-panel-bg: #1a0a28;
    --skin-border-default: rgba(153, 41, 234, 0.25);
    --skin-control-light: #6a4090;
    --skin-control-mid: #4a2868;
    --skin-control-dark: #280a38;
    --skin-text-primary: #FAEB92;
}

/* Yellow Magic Orchestra - Neon yellow */
.skin-80s-stereo.palette-yellow-magic {
    --skin-accent: #E4FF30;
    --skin-accent-hover: #EBFF66;
    --skin-accent-rgb: 228, 255, 48;
    --skin-accent-soft: rgba(228, 255, 48, 0.25);
    --skin-accent-softer: rgba(228, 255, 48, 0.1);
    --skin-accent-secondary: #5B23FF;
    --skin-accent-secondary-rgb: 91, 35, 255;
}
.skin-80s-stereo.palette-yellow-magic.theme-light {
    /* Cool electric-blue metal (lets neon yellow pop) */
    --skin-page-bg: #b7c9f3;
    --skin-panel-bg: #d7e3ff;
    --skin-border-default: rgba(0, 139, 255, 0.25);
    --skin-control-light: #eef4ff;
    --skin-control-mid: #c4d3ff;
    --skin-control-dark: #97aeea;
    --skin-control-track: #0f1222;
    --skin-text-primary: #151733;
    --skin-text-secondary: rgba(21, 23, 51, 0.72);
}
.skin-80s-stereo.palette-yellow-magic.theme-dark {
    --skin-page-bg: #1a1833;
    --skin-panel-bg: #252145;
    --skin-border-default: rgba(0, 139, 255, 0.2);
    --skin-control-light: #6a65a0;
    --skin-control-mid: #4a4578;
    --skin-control-dark: #282450;
    --skin-text-primary: #F4FFAC;
}

/* Silver Bullet - Classic chrome/silver (default) */
.skin-80s-stereo.palette-silver-bullet {
    --skin-accent: #4A90A4;
    --skin-accent-hover: #5BA8BE;
    --skin-accent-rgb: 74, 144, 164;
    --skin-accent-soft: rgba(74, 144, 164, 0.25);
    --skin-accent-softer: rgba(74, 144, 164, 0.1);
    --skin-accent-secondary: #2ECC71;
    --skin-accent-secondary-rgb: 46, 204, 113;
}
.skin-80s-stereo.palette-silver-bullet.theme-light {
    /* Classic brushed aluminum / chrome */
    --skin-page-bg: #c8ccd0;
    --skin-panel-bg: #dfe3e7;
    --skin-border-default: rgba(74, 144, 164, 0.3);
    /* High contrast control surfaces for visible 3D gradient */
    --skin-control-light: #f8fafc;
    --skin-control-mid: #c0c8d0;
    --skin-control-dark: #808890;
    --skin-control-track: #0a0a0a;
    --skin-text-primary: #1a1e22;
    --skin-text-secondary: rgba(26, 30, 34, 0.7);
}
.skin-80s-stereo.palette-silver-bullet.theme-dark {
    --skin-page-bg: #1c1e22;
    --skin-panel-bg: #282a30;
    --skin-border-default: rgba(74, 144, 164, 0.2);
    --skin-control-light: #707880;
    --skin-control-mid: #505860;
    --skin-control-dark: #303438;
    --skin-text-primary: #E8EAEC;
}

/* Orange Juice - Orange sunset */
.skin-80s-stereo.palette-orange-juice {
    --skin-accent: #F08A5D;
    --skin-accent-hover: #F5A680;
    --skin-accent-rgb: 240, 138, 93;
    --skin-accent-soft: rgba(240, 138, 93, 0.25);
    --skin-accent-softer: rgba(240, 138, 93, 0.1);
    --skin-accent-secondary: #F9ED69;
    --skin-accent-secondary-rgb: 249, 237, 105;
}
.skin-80s-stereo.palette-orange-juice.theme-light {
    /* Warm sunset metal */
    --skin-page-bg: #e3c0aa;
    --skin-panel-bg: #f3dfd0;
    --skin-border-default: rgba(249, 237, 105, 0.3);
    --skin-control-light: #fff1e8;
    --skin-control-mid: #e3c6b2;
    --skin-control-dark: #c4a18a;
    --skin-control-track: #23140f;
    --skin-text-primary: #2d1422;
    --skin-text-secondary: rgba(45, 20, 34, 0.72);
}
.skin-80s-stereo.palette-orange-juice.theme-dark {
    --skin-page-bg: #2d1a3d;
    --skin-panel-bg: #3d2450;
    --skin-border-default: rgba(249, 237, 105, 0.15);
    --skin-control-light: #8858a0;
    --skin-control-mid: #684080;
    --skin-control-dark: #482858;
    --skin-text-primary: #FCF7C3;
}

/* The Moody Blues - Coral/mauve mood */
.skin-80s-stereo.palette-moody-blues {
    --skin-accent: #F67280;
    --skin-accent-hover: #F9949E;
    --skin-accent-rgb: 246, 114, 128;
    --skin-accent-soft: rgba(246, 114, 128, 0.25);
    --skin-accent-softer: rgba(246, 114, 128, 0.1);
    --skin-accent-secondary: #C06C84;
    --skin-accent-secondary-rgb: 192, 108, 132;
}
.skin-80s-stereo.palette-moody-blues.theme-light {
    /* Cool steel blue metal */
    --skin-page-bg: #b0bfd0;
    --skin-panel-bg: #ceddee;
    --skin-border-default: rgba(192, 108, 132, 0.25);
    --skin-control-light: #e8f4ff;
    --skin-control-mid: #b9cadd;
    --skin-control-dark: #879fb9;
    --skin-control-track: #121a24;
    --skin-text-primary: #1b2636;
    --skin-text-secondary: rgba(27, 38, 54, 0.72);
}
.skin-80s-stereo.palette-moody-blues.theme-dark {
    --skin-page-bg: #1f2d42;
    --skin-panel-bg: #2a3a52;
    --skin-border-default: rgba(192, 108, 132, 0.2);
    --skin-control-light: #7888a0;
    --skin-control-mid: #566880;
    --skin-control-dark: #364858;
    --skin-text-primary: #FAB8BF;
}

/* The Blue Nile - Teal/cyan waters */
.skin-80s-stereo.palette-blue-nile {
    --skin-accent: #14FFEC;
    --skin-accent-hover: #5CFFF3;
    --skin-accent-rgb: 20, 255, 236;
    --skin-accent-soft: rgba(20, 255, 236, 0.25);
    --skin-accent-softer: rgba(20, 255, 236, 0.1);
    --skin-accent-secondary: #0D7377;
    --skin-accent-secondary-rgb: 13, 115, 119;
}
.skin-80s-stereo.palette-blue-nile.theme-light {
    /* Aqua anodized aluminum - high contrast */
    --skin-page-bg: #aee6df;
    --skin-panel-bg: #c8f4ee;
    --skin-border-default: rgba(20, 255, 236, 0.25);
    --skin-control-light: #f0fffc;
    --skin-control-mid: #a8d8d0;
    --skin-control-dark: #609890;
    --skin-control-track: #0e1f1f;
    --skin-text-primary: #0b1f1f;
    --skin-text-secondary: rgba(11, 31, 31, 0.72);
}
.skin-80s-stereo.palette-blue-nile.theme-dark {
    --skin-page-bg: #0d1214;
    --skin-panel-bg: #161c1e;
    --skin-border-default: rgba(20, 255, 236, 0.15);
    --skin-control-light: #506668;
    --skin-control-mid: #384648;
    --skin-control-dark: #1a2628;
    --skin-text-primary: #A1FFF7;
}

/* Simply Red - Blood red */
.skin-80s-stereo.palette-simply-red {
    --skin-accent: #FF0000;
    --skin-accent-hover: #FF4444;
    --skin-accent-rgb: 255, 0, 0;
    --skin-accent-soft: rgba(255, 0, 0, 0.25);
    --skin-accent-softer: rgba(255, 0, 0, 0.1);
    --skin-accent-secondary: #950101;
    --skin-accent-secondary-rgb: 149, 1, 1;
}
.skin-80s-stereo.palette-simply-red.theme-light {
    /* Rose-tinted metal - high contrast */
    --skin-page-bg: #e0b2b2;
    --skin-panel-bg: #f3d0d0;
    --skin-border-default: rgba(149, 1, 1, 0.25);
    --skin-control-light: #fff5f5;
    --skin-control-mid: #d8a0a0;
    --skin-control-dark: #a06868;
    --skin-control-track: #230f0f;
    --skin-text-primary: #200909;
    --skin-text-secondary: rgba(32, 9, 9, 0.72);
}
.skin-80s-stereo.palette-simply-red.theme-dark {
    --skin-page-bg: #0a0000;
    --skin-panel-bg: #1a0505;
    --skin-border-default: rgba(149, 1, 1, 0.3);
    --skin-control-light: #6a3838;
    --skin-control-mid: #4a2020;
    --skin-control-dark: #280808;
    --skin-text-primary: #FF9999;
}

/* Velvet Underground - Pink/burgundy */
.skin-80s-stereo.palette-velvet-underground {
    --skin-accent: #E23E57;
    --skin-accent-hover: #EB6B7D;
    --skin-accent-rgb: 226, 62, 87;
    --skin-accent-soft: rgba(226, 62, 87, 0.25);
    --skin-accent-softer: rgba(226, 62, 87, 0.1);
    --skin-accent-secondary: #88304E;
    --skin-accent-secondary-rgb: 136, 48, 78;
}
.skin-80s-stereo.palette-velvet-underground.theme-light {
    /* Burgundy / rose metal - high contrast */
    --skin-page-bg: #d7b6c3;
    --skin-panel-bg: #efd0dc;
    --skin-border-default: rgba(136, 48, 78, 0.25);
    --skin-control-light: #fff5f9;
    --skin-control-mid: #d4a8b8;
    --skin-control-dark: #986878;
    --skin-control-track: #221017;
    --skin-text-primary: #241018;
    --skin-text-secondary: rgba(36, 16, 24, 0.72);
}
.skin-80s-stereo.palette-velvet-underground.theme-dark {
    --skin-page-bg: #1a0f1a;
    --skin-panel-bg: #28162a;
    --skin-border-default: rgba(136, 48, 78, 0.25);
    --skin-control-light: #784870;
    --skin-control-mid: #583858;
    --skin-control-dark: #381838;
    --skin-text-primary: #F3B1BB;
}

/* Golden Earring - Gold accent */
.skin-80s-stereo.palette-golden-earring {
    --skin-accent: #FFD369;
    --skin-accent-hover: #FFE099;
    --skin-accent-rgb: 255, 211, 105;
    --skin-accent-soft: rgba(255, 211, 105, 0.25);
    --skin-accent-softer: rgba(255, 211, 105, 0.1);
    --skin-accent-secondary: #B8960B;
    --skin-accent-secondary-rgb: 184, 150, 11;
}
.skin-80s-stereo.palette-golden-earring.theme-light {
    /* Champagne gold metal - high contrast */
    --skin-page-bg: #e2d2aa;
    --skin-panel-bg: #f4e6c8;
    --skin-border-default: rgba(255, 211, 105, 0.3);
    --skin-control-light: #fffbf0;
    --skin-control-mid: #dcc898;
    --skin-control-dark: #a08850;
    --skin-control-track: #20170f;
    --skin-text-primary: #1f1b0a;
    --skin-text-secondary: rgba(31, 27, 10, 0.72);
}
.skin-80s-stereo.palette-golden-earring.theme-dark {
    --skin-page-bg: #141820;
    --skin-panel-bg: #1c222c;
    --skin-border-default: rgba(255, 211, 105, 0.12);
    --skin-control-light: #68707e;
    --skin-control-mid: #485058;
    --skin-control-dark: #282e38;
    --skin-text-primary: #EEEEEE;
}

/* Rainbow - Multi-color spark */
.skin-80s-stereo.palette-rainbow {
    --skin-accent: #F6416C;
    --skin-accent-hover: #F97193;
    --skin-accent-rgb: 246, 65, 108;
    --skin-accent-soft: rgba(246, 65, 108, 0.25);
    --skin-accent-softer: rgba(246, 65, 108, 0.1);
    --skin-accent-secondary: #00B8A9;
    --skin-accent-secondary-rgb: 0, 184, 169;
}
.skin-80s-stereo.palette-rainbow.theme-light {
    /* Mint/teal metal - high contrast */
    --skin-page-bg: #b0ddd2;
    --skin-panel-bg: #c8f5ea;
    --skin-border-default: rgba(0, 184, 169, 0.25);
    --skin-control-light: #f0fffc;
    --skin-control-mid: #a8d4c8;
    --skin-control-dark: #689888;
    --skin-control-track: #0e201a;
    --skin-text-primary: #0a241d;
    --skin-text-secondary: rgba(10, 36, 29, 0.72);
}
.skin-80s-stereo.palette-rainbow.theme-dark {
    --skin-page-bg: #0a1a18;
    --skin-panel-bg: #142a28;
    --skin-border-default: rgba(0, 184, 169, 0.2);
    --skin-control-light: #588078;
    --skin-control-mid: #3a5850;
    --skin-control-dark: #183830;
    --skin-text-primary: #FFDE7D;
}

/* Ultravox - Ultra-violet spectrum */
.skin-80s-stereo.palette-ultravox {
    --skin-accent: #BC6FF1;
    --skin-accent-hover: #CD95F5;
    --skin-accent-rgb: 188, 111, 241;
    --skin-accent-soft: rgba(188, 111, 241, 0.25);
    --skin-accent-softer: rgba(188, 111, 241, 0.1);
    --skin-accent-secondary: #892CDC;
    --skin-accent-secondary-rgb: 137, 44, 220;
}
.skin-80s-stereo.palette-ultravox.theme-light {
    /* Violet anodized metal - high contrast */
    --skin-page-bg: #cbb4e2;
    --skin-panel-bg: #e3cff4;
    --skin-border-default: rgba(82, 5, 123, 0.2);
    --skin-control-light: #faf2ff;
    --skin-control-mid: #c4a8d8;
    --skin-control-dark: #8860a8;
    --skin-control-track: #160f22;
    --skin-text-primary: #16001f;
    --skin-text-secondary: rgba(22, 0, 31, 0.72);
}
.skin-80s-stereo.palette-ultravox.theme-dark {
    --skin-page-bg: #08000f;
    --skin-panel-bg: #12051f;
    --skin-border-default: rgba(82, 5, 123, 0.3);
    --skin-control-light: #5c3878;
    --skin-control-mid: #402858;
    --skin-control-dark: #1e0d2f;
    --skin-text-primary: #E4C5F9;
}