/*
 * Dots - Design Tokens
 *
 * Central location for all design tokens.
 * Common values (typography, spacing, etc.) are in :root.
 * ALL color variables are defined in each palette.
 *
 * Usage: var(--color-primary)
 *
 * Button System (defined in base.css):
 * ------------------------------------
 * Base `button` and `.btn` - standard button styling (padding, font, border-radius, cursor, transitions)
 * `.btn-primary`     - main call-to-action (uses --color-primary)
 * `.btn-secondary`   - default/neutral (uses --color-bg-button)
 * `.btn-danger`      - destructive actions
 * `.btn-success`     - positive actions
 * `.btn-warning`     - caution actions
 * `.btn-sm`          - small variant
 * `.btn-link`        - minimal text-like appearance
 * `.btn-link-danger` - danger variant of link
 * `.btn-icon`        - icon-only buttons
 * `.btn-icon-danger` - icon danger variant (for remove X buttons)
 */

:root {
    /* Typography - Font Family */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Typography - Font Weights (matches Inter import: 100-600) */
    --font-weight-thin: 100;
    --font-weight-light: 200;
    --font-weight-book: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Font sizes */
    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 14px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 24px;
    --font-3xl: 30px;
    --font-4xl: 48px;

    /* Spacing */
    --spacing-2xs: 2px;
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 50px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;

    /* Component widths */
    --width-input-label: 70px;
    --width-filter-btn: 120px;
    --width-inline-select: 140px;
    --width-search-sm: 150px;
    --width-filter-sidebar: 160px;
    --width-dropdown: 200px;
    --width-search-lg: 300px;
    --width-modal-sm: 400px;
    --width-modal-md: 500px;
}

/* ==========================================================================
   Color Palettes
   Apply these classes to <body> to change the color scheme.
   Each palette defines ALL color variables for complete theming.
   Default (no class) uses baroque palette.
   ========================================================================== */

/*
 * Baroque palette (default)
 * primary: #88e4d4 (bright teal)
 * secondary: #7dd3c5 (medium teal)
 * bg: #ffffff (white)
 */
body,
.palette-baroque {
    /* Brand */
    --color-primary: #88e4d4;
    --color-primary-light: #ffffff;
    --color-primary-dark: #7dd3c5;

    /* UI feedback */
    --color-success: #aee8ac;
    --color-danger: #ffe4eb;
    --color-danger-text: #c06070;
    --color-warning: #d32f2f;
    --color-record: #d32f2f;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #141c17;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #28a745;

    /* Text hierarchy */
    --color-text: #4a6050;
    --color-text-dark: #2a3a2e;
    --color-text-light: #5a7060;
    --color-text-muted: #9aaa98;
    --color-icon: #6a7a6e;
    --color-placeholder: #8a9a8e;
    --color-hint: #aab8a8;

    /* Backgrounds */
    --color-bg-main: #ffffff;
    --color-bg-page: #f5f5f7;
    --color-bg-secondary: #f9f9f9;
    --color-bg-hover: #d3efeb;
    --color-bg-menubar: linear-gradient(180deg, #ffffff 0%, #7dd0d3 100%);
    --color-menubar-light: #ffffff;
    --color-menubar-dark: #7dd0d3;
    --color-bg-player: #88e4d4;
    --color-bg-button: #e8e8e8;
    --color-bg-input: #ffffff;
    --color-bg-modal: #ffffff;
    --color-bg-item: #fafafa;
    --color-bg-item-hover: #f0f0f0;
    --color-bg-accordion: #e8e8e8;
    --color-bg-progress: #e9ecef;

    /* Drag and drop */
    --color-bg-draggable: #dbfffd;
    --color-bg-dragging: #e9fff9;
    --color-bg-drop-target: #d6efeb;
    --color-drop-indicator: #87c3af;
    --color-drop-overlay: rgba(11, 66, 103, 0.9);

    /* Borders */
    --color-border-light: #eeeeee;
    --color-border-dark: #d1d1d1;
    --color-border-input: #cccccc;
    --color-border-panel: #e0e0e0;

    /* Interactive states */
    --color-focus: #0b4267;
    --color-active: #a3efe3;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #0b4267, #48e4ab);

    /* Dropdown */
    --color-bg-dropdown: #ffffff;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * Blues palette
 * primary: #5A7A9F (softened navy)
 * secondary: #7A9AC5 (medium blue)
 * bg: #F5F3EF (warm off-white)
 */
.palette-blues {
    /* Brand */
    --color-primary: #5A7A9F;
    --color-primary-light: #F5F3EF;
    --color-primary-dark: #7A9AC5;

    /* UI feedback */
    --color-success: #A8D4E6;
    --color-danger: #E6A8B4;
    --color-danger-text: #a85565;
    --color-warning: #c45858;
    --color-record: #c45858;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #141c27;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #5a9f6a;

    /* Text hierarchy */
    --color-text: #3A5A7F;
    --color-text-dark: #2A3A4F;
    --color-text-light: #5A7A9F;
    --color-text-muted: #8A9BB5;
    --color-icon: #7A8A9F;
    --color-placeholder: #9AAABF;
    --color-hint: #AAB5C5;

    /* Backgrounds */
    --color-bg-main: #F5F3EF;
    --color-bg-page: #F0EDE8;
    --color-bg-secondary: #EDEBE7;
    --color-bg-hover: #DBE2ED;
    --color-bg-menubar: linear-gradient(180deg, #F5F3EF 0%, #7A9AC5 100%);
    --color-menubar-light: #F5F3EF;
    --color-menubar-dark: #7A9AC5;
    --color-bg-player: #88e4d4;
    --color-bg-button: #DDD9D4;
    --color-bg-input: #F5F3EF;
    --color-bg-modal: #F5F3EF;
    --color-bg-item: #F0EDE8;
    --color-bg-item-hover: #E5E2DD;
    --color-bg-accordion: #DDD9D4;
    --color-bg-progress: #E0DDD8;

    /* Drag and drop */
    --color-bg-draggable: #E4E9F1;
    --color-bg-dragging: #EDF0F6;
    --color-bg-drop-target: #D2DBE9;
    --color-drop-indicator: #7A9AC5;
    --color-drop-overlay: rgba(58, 90, 127, 0.9);

    /* Borders */
    --color-border-light: #D8D5D0;
    --color-border-dark: #B8B5B0;
    --color-border-input: #C8C5C0;
    --color-border-panel: #D0CCC7;

    /* Interactive states */
    --color-focus: #3A5A7F;
    --color-active: #A8C4E6;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #3A5A7F, #A8D4E6);

    /* Dropdown */
    --color-bg-dropdown: #F5F3EF;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * Heavy palette
 * primary: #557A7A (softened muted teal)
 * secondary: #7F9F9A (desaturated sage)
 * bg: #F4F6F5 (cool off-white)
 */
.palette-heavy {
    /* Brand */
    --color-primary: #557A7A;
    --color-primary-light: #F4F6F5;
    --color-primary-dark: #7F9F9A;

    /* UI feedback */
    --color-success: #A8D4C8;
    --color-danger: #D4A8A8;
    --color-danger-text: #a85555;
    --color-warning: #b54545;
    --color-record: #b54545;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #15201f;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #4a8a5a;

    /* Text hierarchy */
    --color-text: #3A5555;
    --color-text-dark: #2A4040;
    --color-text-light: #557A7A;
    --color-text-muted: #7A8F8A;
    --color-icon: #6A7F7A;
    --color-placeholder: #8A9F9A;
    --color-hint: #9AAFAA;

    /* Backgrounds */
    --color-bg-main: #F4F6F5;
    --color-bg-page: #EFF1F0;
    --color-bg-secondary: #ECEEED;
    --color-bg-hover: #DFE5E4;
    --color-bg-menubar: linear-gradient(180deg, #d4e6dc 0%, #8ABAB2 100%);
    --color-menubar-light: #d4e6dc;
    --color-menubar-dark: #8ABAB2;
    --color-bg-player: #88e4d4;
    --color-bg-button: #DADEDD;
    --color-bg-input: #F4F6F5;
    --color-bg-modal: #F4F6F5;
    --color-bg-item: #EFF1F0;
    --color-bg-item-hover: #E4E6E5;
    --color-bg-accordion: #DADEDD;
    --color-bg-progress: #DFE1E0;

    /* Drag and drop */
    --color-bg-draggable: #E7EBEA;
    --color-bg-dragging: #EFF2F1;
    --color-bg-drop-target: #D7DFDE;
    --color-drop-indicator: #7F9F9A;
    --color-drop-overlay: rgba(58, 85, 85, 0.9);

    /* Borders */
    --color-border-light: #D5DAD9;
    --color-border-dark: #A5AAA9;
    --color-border-input: #C5CAC9;
    --color-border-panel: #CDCFCE;

    /* Interactive states */
    --color-focus: #3A5555;
    --color-active: #A8D4C8;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #3A5555, #A8D4C8);

    /* Dropdown */
    --color-bg-dropdown: #F4F6F5;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * Slate palette
 * primary: #AABBCB (softened muted slate blue)
 * secondary: #AAB6B0 (soft eucalyptus)
 * bg: #F7F8F6 (warm pastel off-white)
 */
.palette-slate {
    /* Brand */
    --color-primary: #AABBCB;
    --color-primary-light: #F7F8F6;
    --color-primary-dark: #9AAABA;

    /* UI feedback */
    --color-success: #B5D4C8;
    --color-danger: #D4B5B5;
    --color-danger-text: #a85a5a;
    --color-warning: #c45858;
    --color-record: #c45858;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #1b202a;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #5a9f6a;

    /* Text hierarchy */
    --color-text: #5A6578;
    --color-text-dark: #3A4558;
    --color-text-light: #6A7588;
    --color-text-muted: #9AA6A0;
    --color-icon: #8A9690;
    --color-placeholder: #9AA6A0;
    --color-hint: #AAB6B0;

    /* Backgrounds */
    --color-bg-main: #F7F8F6;
    --color-bg-page: #F2F3F1;
    --color-bg-secondary: #F5F6F5;
    --color-bg-hover: #EEF0EF;
    --color-bg-menubar: linear-gradient(180deg, #F7F8F6 0%, #AAB6B0 100%);
    --color-menubar-light: #F7F8F6;
    --color-menubar-dark: #AAB6B0;
    --color-bg-player: #88e4d4;
    --color-bg-button: #E2E4E3;
    --color-bg-input: #F7F8F6;
    --color-bg-modal: #F7F8F6;
    --color-bg-item: #F2F3F1;
    --color-bg-item-hover: #E8E9E7;
    --color-bg-accordion: #E2E4E3;
    --color-bg-progress: #E5E7E6;

    /* Drag and drop */
    --color-bg-draggable: #EBEDEC;
    --color-bg-dragging: #F2F3F2;
    --color-bg-drop-target: #DEE1E0;
    --color-drop-indicator: #9AAABA;
    --color-drop-overlay: rgba(90, 101, 120, 0.9);

    /* Borders */
    --color-border-light: #DCDEDD;
    --color-border-dark: #ACAEAD;
    --color-border-input: #CCCECE;
    --color-border-panel: #D4D6D5;

    /* Interactive states */
    --color-focus: #5A6578;
    --color-active: #C5D6E0;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #5A6578, #B5D4C8);

    /* Dropdown */
    --color-bg-dropdown: #F7F8F6;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * Modern palette
 * primary: #7FAFAB (softened pastel teal)
 * secondary: #9FC7C2 (light desaturated teal)
 * bg: #F3F7F6 (cool pastel off-white)
 */
.palette-modern {
    /* Brand */
    --color-primary: #7FAFAB;
    --color-primary-light: #F3F7F6;
    --color-primary-dark: #9FC7C2;

    /* UI feedback */
    --color-success: #A8E0D8;
    --color-danger: #E0A8B0;
    --color-danger-text: #b85560;
    --color-warning: #c45858;
    --color-record: #c45858;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #152322;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #5a9f6a;

    /* Text hierarchy */
    --color-text: #3A5855;
    --color-text-dark: #2A4845;
    --color-text-light: #4A6865;
    --color-text-muted: #7FA7A2;
    --color-icon: #6A9792;
    --color-placeholder: #8FB7B2;
    --color-hint: #9FC7C2;

    /* Backgrounds */
    --color-bg-main: #F3F7F6;
    --color-bg-page: #EEF2F1;
    --color-bg-secondary: #EBEFEE;
    --color-bg-hover: #E5EFED;
    --color-bg-menubar: linear-gradient(180deg, #F3F7F6 0%, #9FC7C2 100%);
    --color-menubar-light: #F3F7F6;
    --color-menubar-dark: #9FC7C2;
    --color-bg-player: #88e4d4;
    --color-bg-button: #DCE3E1;
    --color-bg-input: #F3F7F6;
    --color-bg-modal: #F3F7F6;
    --color-bg-item: #EEF2F1;
    --color-bg-item-hover: #E3E7E6;
    --color-bg-accordion: #DCE3E1;
    --color-bg-progress: #E0E7E5;

    /* Drag and drop */
    --color-bg-draggable: #EBF3F1;
    --color-bg-dragging: #F2F7F6;
    --color-bg-drop-target: #DFEBE9;
    --color-drop-indicator: #7FAFAB;
    --color-drop-overlay: rgba(74, 106, 103, 0.9);

    /* Borders */
    --color-border-light: #D6E0DE;
    --color-border-dark: #A6B0AE;
    --color-border-input: #C6D0CE;
    --color-border-panel: #CED8D6;

    /* Interactive states */
    --color-focus: #4A6A67;
    --color-active: #A8E0D8;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #4A6A67, #A8E0D8);

    /* Dropdown */
    --color-bg-dropdown: #F3F7F6;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * Romance palette
 * primary: #c3a17f (warm gold/tan)
 * secondary: #d3bdaf (light warm beige)
 * bg: #F4F8FA (cool pastel off-white)
 */
.palette-romance {
    /* Brand */
    --color-primary: #c3a17f;
    --color-primary-light: #F4F8FA;
    --color-primary-dark: #d3bdaf;

    /* UI feedback */
    --color-success: #e8c5a8;
    --color-danger: #E8A8B8;
    --color-danger-text: #b85568;
    --color-warning: #c45858;
    --color-record: #b84a5a;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #15232b;
    --color-stage-text: #fff7f2;
    --color-stage-muted: color-mix(in srgb, #fff7f2 55%, transparent);
    --color-stage-border: color-mix(in srgb, #fff7f2 15%, transparent);
    --color-saved: #5a9f6a;

    /* Text hierarchy */
    --color-text: #3A5868;
    --color-text-dark: #2A4858;
    --color-text-light: #4A6878;
    --color-text-muted: #9A8A76;
    --color-icon: #8A7A66;
    --color-placeholder: #B0A08C;
    --color-hint: #C0B0A0;

    /* Backgrounds */
    --color-bg-main: #faf6f4;
    --color-bg-page: #EFF3F5;
    --color-bg-secondary: #ECF0F2;
    --color-bg-hover: #E6EEF1;
    --color-bg-menubar: linear-gradient(180deg, #F4F8FA 0%, #dad0aa 100%);
    --color-menubar-light: #F4F8FA;
    --color-menubar-dark: #dad0aa;
    --color-bg-player: #f3d4b2;
    --color-bg-button: #dfcbc2;
    --color-bg-input: #faf6f4;
    --color-bg-modal: #faf6f4;
    --color-bg-item: #f5efec;
    --color-bg-item-hover: #ebe5e2;
    --color-bg-accordion: #dfcbc2;
    --color-bg-progress: #e5dbd8;

    /* Drag and drop */
    --color-bg-draggable: #f5efec;
    --color-bg-dragging: #f9f5f3;
    --color-bg-drop-target: #ede2df;
    --color-drop-indicator: #c3a17f;
    --color-drop-overlay: rgba(74, 106, 122, 0.9);

    /* Borders */
    --color-border-light: #e6dad8;
    --color-border-dark: #b6aaa8;
    --color-border-input: #d6cac8;
    --color-border-panel: #ded2d0;

    /* Interactive states */
    --color-focus: #8a6a4a;
    --color-active: #e8c5a8;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #8a6a4a, #e8c5a8);

    /* Dropdown */
    --color-bg-dropdown: #faf6f4;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   WordPress-inspired Color Palettes
   ========================================================================== */

/*
 * WP Default palette
 * Inspired by WordPress Default admin scheme
 * Dark grey / blue / light blue / light grey
 */
.palette-wp-default {
    /* Brand */
    --color-primary: #0073aa;
    --color-primary-light: #d4e9f5;
    --color-primary-dark: #005a87;

    /* UI feedback */
    --color-success: #a8d8b9;
    --color-danger: #f5c6cb;
    --color-danger-text: #c06070;
    --color-warning: #d32f2f;
    --color-record: #d32f2f;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #121619;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #28a745;

    /* Text hierarchy */
    --color-text: #3c434a;
    --color-text-dark: #1d2327;
    --color-text-light: #50575e;
    --color-text-muted: #8c8f94;
    --color-icon: #787c82;
    --color-placeholder: #a0a5aa;
    --color-hint: #b0b5b9;

    /* Backgrounds */
    --color-bg-main: #ffffff;
    --color-bg-page: #f0f0f1;
    --color-bg-secondary: #f6f7f7;
    --color-bg-hover: #dce5ef;
    --color-bg-menubar: linear-gradient(180deg, #919496 0%, #80b9d5 100%);
    --color-menubar-light: #919496;
    --color-menubar-dark: #80b9d5;
    --color-bg-player: #0073aa;
    --color-bg-button: #dcdcde;
    --color-bg-input: #ffffff;
    --color-bg-modal: #ffffff;
    --color-bg-item: #f6f7f7;
    --color-bg-item-hover: #eaeaec;
    --color-bg-accordion: #dcdcde;
    --color-bg-progress: #dcdcde;

    /* Drag and drop */
    --color-bg-draggable: #dce5ef;
    --color-bg-dragging: #e8f0f8;
    --color-bg-drop-target: #c5d9ea;
    --color-drop-indicator: #0073aa;
    --color-drop-overlay: rgba(0, 115, 170, 0.9);

    /* Borders */
    --color-border-light: #dcdcde;
    --color-border-dark: #b0b5b9;
    --color-border-input: #c3c4c7;
    --color-border-panel: #d0d0d2;

    /* Interactive states */
    --color-focus: #005a87;
    --color-active: #72aee6;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #005a87, #72aee6);

    /* Dropdown */
    --color-bg-dropdown: #ffffff;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * WP Light palette
 * Inspired by WordPress Light admin scheme
 * Grey / dark grey / magenta-pink / cyan
 */
.palette-wp-light {
    /* Brand */
    --color-primary: #04a4cc;
    --color-primary-light: #ffffff;
    --color-primary-dark: #038bb0;

    /* UI feedback */
    --color-success: #a8e0d8;
    --color-danger: #f5c6d0;
    --color-danger-text: #c06070;
    --color-warning: #d32f2f;
    --color-record: #d32f2f;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #1c1c1c;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #28a745;

    /* Text hierarchy */
    --color-text: #555555;
    --color-text-dark: #333333;
    --color-text-light: #686868;
    --color-text-muted: #999999;
    --color-icon: #888888;
    --color-placeholder: #aaaaaa;
    --color-hint: #bbbbbb;

    /* Backgrounds */
    --color-bg-main: #ffffff;
    --color-bg-page: #f5f5f5;
    --color-bg-secondary: #fafafa;
    --color-bg-hover: #dcf2f8;
    --color-bg-menubar: linear-gradient(180deg, #e5e5e5 0%, #999999 100%);
    --color-menubar-light: #e5e5e5;
    --color-menubar-dark: #999999;
    --color-bg-player: #04a4cc;
    --color-bg-button: #e0e0e0;
    --color-bg-input: #ffffff;
    --color-bg-modal: #ffffff;
    --color-bg-item: #fafafa;
    --color-bg-item-hover: #eeeeee;
    --color-bg-accordion: #e0e0e0;
    --color-bg-progress: #e0e0e0;

    /* Drag and drop */
    --color-bg-draggable: #dcf2f8;
    --color-bg-dragging: #eaf8fc;
    --color-bg-drop-target: #c5e8f2;
    --color-drop-indicator: #04a4cc;
    --color-drop-overlay: rgba(4, 164, 204, 0.9);

    /* Borders */
    --color-border-light: #e0e0e0;
    --color-border-dark: #b0b0b0;
    --color-border-input: #cccccc;
    --color-border-panel: #d5d5d5;

    /* Interactive states */
    --color-focus: #038bb0;
    --color-active: #72d4ee;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #e14d76, #04a4cc);

    /* Dropdown */
    --color-bg-dropdown: #ffffff;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * WP Modern palette
 * Inspired by WordPress Modern admin scheme
 * Black / dark navy / purple-lavender / dark teal
 */
.palette-wp-modern {
    /* Brand */
    --color-primary: #3858e9;
    --color-primary-light: #e8ecfc;
    --color-primary-dark: #2c47c0;

    /* UI feedback */
    --color-success: #a8c8e6;
    --color-danger: #e6a8b8;
    --color-danger-text: #b85568;
    --color-warning: #d32f2f;
    --color-record: #d32f2f;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #161616;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #28a745;

    /* Text hierarchy */
    --color-text: #40464d;
    --color-text-dark: #1e1e1e;
    --color-text-light: #555d66;
    --color-text-muted: #8e949b;
    --color-icon: #7b8087;
    --color-placeholder: #9da3a9;
    --color-hint: #adb3b9;

    /* Backgrounds */
    --color-bg-main: #ffffff;
    --color-bg-page: #f0f2f5;
    --color-bg-secondary: #f5f7f9;
    --color-bg-hover: #e0e4f5;
    --color-bg-menubar: linear-gradient(180deg, #8f8f8f 0%, #9cacf4 100%);
    --color-menubar-light: #8f8f8f;
    --color-menubar-dark: #9cacf4;
    --color-bg-player: #3858e9;
    --color-bg-button: #dddfe2;
    --color-bg-input: #ffffff;
    --color-bg-modal: #ffffff;
    --color-bg-item: #f5f7f9;
    --color-bg-item-hover: #e8eaed;
    --color-bg-accordion: #dddfe2;
    --color-bg-progress: #dddfe2;

    /* Drag and drop */
    --color-bg-draggable: #e0e4f5;
    --color-bg-dragging: #eceffb;
    --color-bg-drop-target: #cdd3ee;
    --color-drop-indicator: #3858e9;
    --color-drop-overlay: rgba(56, 88, 233, 0.9);

    /* Borders */
    --color-border-light: #dddfe2;
    --color-border-dark: #b0b5b9;
    --color-border-input: #c5c8cc;
    --color-border-panel: #d2d5d9;

    /* Interactive states */
    --color-focus: #2c47c0;
    --color-active: #96abf5;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #1e1e1e, #7b90ee);

    /* Dropdown */
    --color-bg-dropdown: #ffffff;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * WP Blue palette
 * Inspired by WordPress Blue admin scheme
 * Dark teal / blue / steel blue / light steel
 */
.palette-wp-blue {
    /* Brand */
    --color-primary: #52accc;
    --color-primary-light: #e1f0f7;
    --color-primary-dark: #4095b0;

    /* UI feedback */
    --color-success: #a8d8e0;
    --color-danger: #e0b0b8;
    --color-danger-text: #b85a65;
    --color-warning: #d32f2f;
    --color-record: #d32f2f;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #0f2129;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #28a745;

    /* Text hierarchy */
    --color-text: #3a5a6a;
    --color-text-dark: #1a3a4a;
    --color-text-light: #4a6a7a;
    --color-text-muted: #7a9aaa;
    --color-icon: #6a8a9a;
    --color-placeholder: #8aaaba;
    --color-hint: #9abaca;

    /* Backgrounds */
    --color-bg-main: #ffffff;
    --color-bg-page: #eef3f6;
    --color-bg-secondary: #f4f8fa;
    --color-bg-hover: #d8eaf1;
    --color-bg-menubar: linear-gradient(180deg, #84b2c2 0%, #a9d6e6 100%);
    --color-menubar-light: #84b2c2;
    --color-menubar-dark: #a9d6e6;
    --color-bg-player: #52accc;
    --color-bg-button: #d5dfe4;
    --color-bg-input: #ffffff;
    --color-bg-modal: #ffffff;
    --color-bg-item: #f4f8fa;
    --color-bg-item-hover: #e4ecf0;
    --color-bg-accordion: #d5dfe4;
    --color-bg-progress: #d8e2e8;

    /* Drag and drop */
    --color-bg-draggable: #d8eaf1;
    --color-bg-dragging: #e8f2f7;
    --color-bg-drop-target: #c0d8e5;
    --color-drop-indicator: #52accc;
    --color-drop-overlay: rgba(9, 100, 132, 0.9);

    /* Borders */
    --color-border-light: #d0dce2;
    --color-border-dark: #a0b5c0;
    --color-border-input: #b8c8d2;
    --color-border-panel: #c8d5dc;

    /* Interactive states */
    --color-focus: #096484;
    --color-active: #8acae0;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #096484, #8acae0);

    /* Dropdown */
    --color-bg-dropdown: #ffffff;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * WP Coffee palette
 * Inspired by WordPress Coffee admin scheme
 * Dark brown / medium brown / tan / olive-gold
 */
.palette-wp-coffee {
    /* Brand */
    --color-primary: #c7a589;
    --color-primary-light: #f7f0ea;
    --color-primary-dark: #a68b70;

    /* UI feedback */
    --color-success: #c8d8a0;
    --color-danger: #e0b0a8;
    --color-danger-text: #b86055;
    --color-warning: #c45858;
    --color-record: #b54545;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #1f1915;
    --color-stage-text: #fff7ef;
    --color-stage-muted: color-mix(in srgb, #fff7ef 55%, transparent);
    --color-stage-border: color-mix(in srgb, #fff7ef 15%, transparent);
    --color-saved: #5a9f6a;

    /* Text hierarchy */
    --color-text: #56483a;
    --color-text-dark: #3c3028;
    --color-text-light: #6a5a4a;
    --color-text-muted: #9a8a7a;
    --color-icon: #8a7a6a;
    --color-placeholder: #a8988a;
    --color-hint: #b8a89a;

    /* Backgrounds */
    --color-bg-main: #faf7f4;
    --color-bg-page: #f3ede7;
    --color-bg-secondary: #f8f4f0;
    --color-bg-hover: #ebe0d5;
    --color-bg-menubar: linear-gradient(180deg, #a3a09e 0%, #e3d2c4 100%);
    --color-menubar-light: #a3a09e;
    --color-menubar-dark: #e3d2c4;
    --color-bg-player: #c7a589;
    --color-bg-button: #e0d5ca;
    --color-bg-input: #faf7f4;
    --color-bg-modal: #faf7f4;
    --color-bg-item: #f5efe9;
    --color-bg-item-hover: #e8e0d8;
    --color-bg-accordion: #e0d5ca;
    --color-bg-progress: #e2d8ce;

    /* Drag and drop */
    --color-bg-draggable: #ebe0d5;
    --color-bg-dragging: #f2eae2;
    --color-bg-drop-target: #ddd0c2;
    --color-drop-indicator: #a68b70;
    --color-drop-overlay: rgba(70, 64, 60, 0.9);

    /* Borders */
    --color-border-light: #ddd2c7;
    --color-border-dark: #b0a598;
    --color-border-input: #ccc0b5;
    --color-border-panel: #d5c8bc;

    /* Interactive states */
    --color-focus: #59524c;
    --color-active: #d9c0a8;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #59524c, #c7a589);

    /* Dropdown */
    --color-bg-dropdown: #faf7f4;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * WP Ectoplasm palette
 * Inspired by WordPress Ectoplasm admin scheme
 * Dark purple / blue / green / gold-amber
 */
.palette-wp-ectoplasm {
    /* Brand */
    --color-primary: #a3b745;
    --color-primary-light: #f2f5e5;
    --color-primary-dark: #839237;

    /* UI feedback */
    --color-success: #b5d490;
    --color-danger: #d4a0b0;
    --color-danger-text: #a85060;
    --color-warning: #c45858;
    --color-record: #c0392b;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #1a1424;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #5a9f6a;

    /* Text hierarchy */
    --color-text: #483c5a;
    --color-text-dark: #2e2440;
    --color-text-light: #5a4e6a;
    --color-text-muted: #8a7e9a;
    --color-icon: #7a6e8a;
    --color-placeholder: #9a8eaa;
    --color-hint: #aaa0b5;

    /* Backgrounds */
    --color-bg-main: #faf9fc;
    --color-bg-page: #f2f0f5;
    --color-bg-secondary: #f7f5fa;
    --color-bg-hover: #e5e0ee;
    --color-bg-menubar: linear-gradient(180deg, #a099ab 0%, #d1dba2 100%);
    --color-menubar-light: #a099ab;
    --color-menubar-dark: #d1dba2;
    --color-bg-player: #a3b745;
    --color-bg-button: #ddd8e4;
    --color-bg-input: #faf9fc;
    --color-bg-modal: #faf9fc;
    --color-bg-item: #f4f2f8;
    --color-bg-item-hover: #e8e5ee;
    --color-bg-accordion: #ddd8e4;
    --color-bg-progress: #dfdbe5;

    /* Drag and drop */
    --color-bg-draggable: #e8e4f0;
    --color-bg-dragging: #f0edf5;
    --color-bg-drop-target: #d5d0e2;
    --color-drop-indicator: #a3b745;
    --color-drop-overlay: rgba(65, 50, 86, 0.9);

    /* Borders */
    --color-border-light: #dad5e2;
    --color-border-dark: #aaa5b2;
    --color-border-input: #c5c0cc;
    --color-border-panel: #d0ccd8;

    /* Interactive states */
    --color-focus: #413256;
    --color-active: #c5d888;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #413256, #a3b745);

    /* Dropdown */
    --color-bg-dropdown: #faf9fc;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * WP Midnight palette
 * Inspired by WordPress Midnight admin scheme
 * Dark charcoal / dark grey / orange / red
 */
.palette-wp-midnight {
    /* Brand */
    --color-primary: #e14d43;
    --color-primary-light: #fce8e7;
    --color-primary-dark: #c03e35;

    /* UI feedback */
    --color-success: #a8d8b9;
    --color-danger: #f5c6c4;
    --color-danger-text: #c06060;
    --color-warning: #d32f2f;
    --color-record: #f0a830;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #1a1512;
    --color-stage-text: #fff7ef;
    --color-stage-muted: color-mix(in srgb, #fff7ef 55%, transparent);
    --color-stage-border: color-mix(in srgb, #fff7ef 15%, transparent);
    --color-saved: #28a745;

    /* Text hierarchy */
    --color-text: #4a4440;
    --color-text-dark: #2a2420;
    --color-text-light: #5a5450;
    --color-text-muted: #8a8480;
    --color-icon: #7a7470;
    --color-placeholder: #9a9490;
    --color-hint: #aaa4a0;

    /* Backgrounds */
    --color-bg-main: #ffffff;
    --color-bg-page: #f2f0ef;
    --color-bg-secondary: #f7f6f5;
    --color-bg-hover: #f5e0de;
    --color-bg-menubar: linear-gradient(180deg, #929496 0%, #f0a6a1 100%);
    --color-menubar-light: #929496;
    --color-menubar-dark: #f0a6a1;
    --color-bg-player: #e14d43;
    --color-bg-button: #dddbd9;
    --color-bg-input: #ffffff;
    --color-bg-modal: #ffffff;
    --color-bg-item: #f5f4f3;
    --color-bg-item-hover: #eae8e6;
    --color-bg-accordion: #dddbd9;
    --color-bg-progress: #dfddd9;

    /* Drag and drop */
    --color-bg-draggable: #f5e0de;
    --color-bg-dragging: #faeae9;
    --color-bg-drop-target: #eaccc8;
    --color-drop-indicator: #e14d43;
    --color-drop-overlay: rgba(37, 40, 43, 0.9);

    /* Borders */
    --color-border-light: #dad8d5;
    --color-border-dark: #aaa8a5;
    --color-border-input: #c5c3c0;
    --color-border-panel: #d2d0cd;

    /* Interactive states */
    --color-focus: #c03e35;
    --color-active: #f0a09a;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #25282b, #e14d43);

    /* Dropdown */
    --color-bg-dropdown: #ffffff;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * WP Ocean palette
 * Inspired by WordPress Ocean admin scheme
 * Dark teal / teal / sage-green / tan-khaki
 */
.palette-wp-ocean {
    /* Brand */
    --color-primary: #9ebaa0;
    --color-primary-light: #f0f5f0;
    --color-primary-dark: #738e76;

    /* UI feedback */
    --color-success: #b0d8b5;
    --color-danger: #d8b0a8;
    --color-danger-text: #b06055;
    --color-warning: #c45858;
    --color-record: #c45858;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #161d17;
    --color-stage-text: #ffffff;
    --color-stage-muted: color-mix(in srgb, #ffffff 55%, transparent);
    --color-stage-border: color-mix(in srgb, #ffffff 15%, transparent);
    --color-saved: #5a9f6a;

    /* Text hierarchy */
    --color-text: #4a5a4c;
    --color-text-dark: #2a3a2c;
    --color-text-light: #5a6a5c;
    --color-text-muted: #8a9a8c;
    --color-icon: #7a8a7c;
    --color-placeholder: #9aaa9c;
    --color-hint: #aabaa8;

    /* Backgrounds */
    --color-bg-main: #fafcfa;
    --color-bg-page: #f0f2f0;
    --color-bg-secondary: #f5f7f5;
    --color-bg-hover: #dfe8e0;
    --color-bg-menubar: linear-gradient(180deg, #b1bec1 0%, #cfddd0 100%);
    --color-menubar-light: #b1bec1;
    --color-menubar-dark: #cfddd0;
    --color-bg-player: #9ebaa0;
    --color-bg-button: #d8ddd8;
    --color-bg-input: #fafcfa;
    --color-bg-modal: #fafcfa;
    --color-bg-item: #f2f5f2;
    --color-bg-item-hover: #e5eae5;
    --color-bg-accordion: #d8ddd8;
    --color-bg-progress: #dbe0db;

    /* Drag and drop */
    --color-bg-draggable: #dfe8e0;
    --color-bg-dragging: #ecf2ec;
    --color-bg-drop-target: #cddace;
    --color-drop-indicator: #738e76;
    --color-drop-overlay: rgba(98, 124, 131, 0.9);

    /* Borders */
    --color-border-light: #d5dbd5;
    --color-border-dark: #a5aba5;
    --color-border-input: #c0c8c0;
    --color-border-panel: #cdd3cd;

    /* Interactive states */
    --color-focus: #627c83;
    --color-active: #c0d8c2;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #627c83, #9ebaa0);

    /* Dropdown */
    --color-bg-dropdown: #fafcfa;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}

/*
 * WP Sunrise palette
 * Inspired by WordPress Sunrise admin scheme
 * Red / dark red-maroon / coral-salmon / gold-yellow
 */
.palette-wp-sunrise {
    /* Brand */
    --color-primary: #dd823b;
    --color-primary-light: #fdf0e5;
    --color-primary-dark: #c36e2d;

    /* UI feedback */
    --color-success: #d8c8a0;
    --color-danger: #f0b0a0;
    --color-danger-text: #c06050;
    --color-warning: #d32f2f;
    --color-record: #b0173b;        /* recording: punch regions, armed Play (added 2026-10-01) */
    --color-tuner-intune: #88e4d4;  /* tuner/volume: in tune / good level (added 2026-10-06) */
    --color-tuner-close: #c5d488;   /* tuner/volume: close */
    --color-tuner-off: #e8a85c;     /* tuner/volume: sharp, flat / too loud */
    --color-info: #5b9bd5;          /* practice chart: reading line */
    /* Stage (dark) surfaces — the Notation Viewer and metronome overlay (added 2026-10-01) */
    --color-stage-bg: #1f130f;
    --color-stage-text: #fff7ef;
    --color-stage-muted: color-mix(in srgb, #fff7ef 55%, transparent);
    --color-stage-border: color-mix(in srgb, #fff7ef 15%, transparent);
    --color-saved: #28a745;

    /* Text hierarchy */
    --color-text: #5a3e30;
    --color-text-dark: #3a2018;
    --color-text-light: #6a4e40;
    --color-text-muted: #9a8070;
    --color-icon: #8a7060;
    --color-placeholder: #a89080;
    --color-hint: #b8a090;

    /* Backgrounds */
    --color-bg-main: #fdf9f6;
    --color-bg-page: #f5f0ec;
    --color-bg-secondary: #faf6f3;
    --color-bg-hover: #f5e2d0;
    --color-bg-menubar: linear-gradient(180deg, #df9b98 0%, #eec19d 100%);
    --color-menubar-light: #df9b98;
    --color-menubar-dark: #eec19d;
    --color-bg-player: #dd823b;
    --color-bg-button: #e2d8d0;
    --color-bg-input: #fdf9f6;
    --color-bg-modal: #fdf9f6;
    --color-bg-item: #f7f2ee;
    --color-bg-item-hover: #ece4de;
    --color-bg-accordion: #e2d8d0;
    --color-bg-progress: #e5dcd5;

    /* Drag and drop */
    --color-bg-draggable: #f5e2d0;
    --color-bg-dragging: #faefe2;
    --color-bg-drop-target: #e8d0b8;
    --color-drop-indicator: #dd823b;
    --color-drop-overlay: rgba(190, 54, 49, 0.9);

    /* Borders */
    --color-border-light: #e0d5cc;
    --color-border-dark: #b0a598;
    --color-border-input: #ccc2b8;
    --color-border-panel: #d8cec5;

    /* Interactive states */
    --color-focus: #be3631;
    --color-active: #f0b888;

    /* Progress bar */
    --color-progress-fill: linear-gradient(90deg, #be3631, #ecba40);

    /* Dropdown */
    --color-bg-dropdown: #fdf9f6;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);
}