/* CSS Variables for consistent theming */
:root {
    /* Base Colors */
    --bg-color: #0c0c0c;
    --panel-bg: #111111;
    --section-bg: #212128;
    --control-bg: #37373766;
    /* The one accent left in the palette: a light neutral used only for
       interactive state (focus/active/selected, the live knob-value arc).
       Everything that used to carry a distinct hue - per-effect knob
       theming, the pitch/mod wheels, the keyboard's pressed-key glow - now
       resolves to this same grey, since in every one of those spots the
       hue duplicated a text label or position that was already visible. */
    --accent-color: #c9c9c9;
    --accent-glow: #ffffff6b;
    --text-primary: #ececec;
    --text-secondary: #aaa;
    --border-color: #333;
    --border-color-dark: #171717;
    
    /* Spacing Scale */
    --spacing-2xs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Font Size Scale */
    --text-2xs: 0.5em;
    --text-xs: 0.55em;
    --text-sm: 0.6em;
    --text-md: 0.65em;
    --text-base: 1em;
    
    /* Z-Index Layers */
    --z-base: 1;
    --z-elevated: 2;
    --z-above: 3;
    --z-dropdown: 10;
    --z-modal: 100;
    --z-tooltip: 1000;
    --z-floating: 10000;
    --z-floating-high: 10001;
    
    /* Knob Sizes */
    --knob-sm: 38px;
    --knob-md: 42px;
    --knob-lg: 50px;
    --knob-xl: 54px;
    
    /* Keyboard Colors - pressed-key glow; same reasoning as --accent-color
       above (the note is already identified by its position and title
       tooltip, so left/right no longer need distinct hues). */
    --key-left-color: var(--accent-color);
    --key-right-color: var(--accent-color);

    /* Effect Colors - each effect's fx-name label in its section header
       already identifies it, so the nine-hue "Sunset to Midnight" gradient
       these once held was redundant color; all nine now point at the one
       kept accent so effect knobs/toggles read as part of the same UI
       instead of nine separately-branded ones. */
    --fx-str-color: var(--accent-color);
    --fx-sat-color: var(--accent-color);
    --fx-eq-color: var(--accent-color);
    --fx-cmp-color: var(--accent-color);
    --fx-fil-color: var(--accent-color);
    --fx-cho-color: var(--accent-color);
    --fx-flg-color: var(--accent-color);
    --fx-dly-color: var(--accent-color);
    --fx-rev-color: var(--accent-color);
}