/*
 * MusicMastering Core Design System + visual personas.
 *
 * This layer intentionally sits after the legacy golden theme. It converts the
 * existing component vocabulary to semantic tokens instead of duplicating page
 * CSS ten times. Functional structure, ids and JavaScript hooks remain intact.
 */

:root,
:root[data-mm-theme="reference-studio"] {
    color-scheme: dark;

    --mm-bg: #0a0d10;
    --mm-bg-elevated: #101419;
    --mm-surface: #14191f;
    --mm-surface-2: #1a2027;
    --mm-surface-3: #212932;
    --mm-surface-4: #28323d;
    --mm-border: #313a44;
    --mm-border-muted: #252d35;
    --mm-border-strong: #536171;

    --mm-text: #f2f5f7;
    --mm-text-soft: #c8d0d7;
    --mm-muted: #96a2ad;
    --mm-muted-2: #74818d;

    --mm-accent: #33a7d8;
    --mm-accent-2: #69c4e9;
    --mm-accent-soft: rgba(51, 167, 216, .14);
    --mm-accent-border: rgba(105, 196, 233, .48);
    --mm-success: #56b870;
    --mm-success-hover: #68c780;
    --mm-success-soft: rgba(86, 184, 112, .14);
    --mm-warning: #e3a64b;
    --mm-danger: #e76c72;
    --mm-info: #69c4e9;

    --mm-font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mm-font-display: var(--mm-font-ui);
    --mm-font-numeric: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --mm-heading-weight: 680;
    --mm-heading-tracking: -.016em;
    --mm-label-tracking: .075em;
    --mm-label-transform: uppercase;

    --mm-radius-xs: 2px;
    --mm-radius-sm: 4px;
    --mm-radius-md: 6px;
    --mm-radius-lg: 8px;
    --mm-border-width: 1px;
    --mm-control-height: 2.55rem;
    --mm-control-height-sm: 2.2rem;
    --mm-icon-control: 2.55rem;
    --mm-density-space: .86;

    --mm-shadow-sm: 0 2px 8px rgba(0, 0, 0, .22);
    --mm-shadow-md: 0 8px 20px rgba(0, 0, 0, .28);
    --mm-shadow-lg: 0 14px 34px rgba(0, 0, 0, .34);
    --mm-panel-background: var(--mm-surface);
    --mm-panel-elevated-background: var(--mm-surface-2);
    --mm-header-background: #0f1317;
    --mm-control-background: #0d1115;
    --mm-row-hover: rgba(105, 196, 233, .075);
    --mm-grid-line: rgba(148, 160, 173, .12);
    --mm-waveform: #69c4e9;
    --mm-waveform-muted: #43515e;
    --mm-meter-low: #56b870;
    --mm-meter-mid: #e3a64b;
    --mm-meter-peak: #e76c72;
    --mm-motion-fast: 110ms;
    --mm-motion-medium: 160ms;

    --bs-body-bg: var(--mm-bg);
    --bs-body-color: var(--mm-text);
    --bs-secondary-color: var(--mm-muted);
    --bs-tertiary-color: var(--mm-muted-2);
    --bs-border-color: var(--mm-border);
    --bs-primary: var(--mm-accent);
    --bs-primary-rgb: 51, 167, 216;
    --bs-link-color: var(--mm-accent-2);
    --bs-link-hover-color: #8dd3ef;
}

:root[data-mm-theme="pulse-grid"] {
    --mm-bg: #050807;
    --mm-bg-elevated: #080d0c;
    --mm-surface: #0d1311;
    --mm-surface-2: #111a17;
    --mm-surface-3: #16221e;
    --mm-surface-4: #1d2c26;
    --mm-border: #263b34;
    --mm-border-muted: #182720;
    --mm-border-strong: #3e6255;
    --mm-text: #effff9;
    --mm-text-soft: #c0d9cf;
    --mm-muted: #84a397;
    --mm-muted-2: #5f7b70;
    --mm-accent: #25e6b1;
    --mm-accent-2: #70ffd1;
    --mm-accent-soft: rgba(37, 230, 177, .12);
    --mm-accent-border: rgba(112, 255, 209, .42);
    --mm-warning: #cfe953;
    --mm-info: #51cfe8;
    --mm-font-ui: "Segoe UI", Inter, ui-sans-serif, sans-serif;
    --mm-font-display: "Arial Narrow", "Roboto Condensed", var(--mm-font-ui);
    --mm-font-numeric: "SFMono-Regular", Consolas, monospace;
    --mm-heading-weight: 720;
    --mm-heading-tracking: .015em;
    --mm-label-tracking: .12em;
    --mm-radius-xs: 1px;
    --mm-radius-sm: 2px;
    --mm-radius-md: 3px;
    --mm-radius-lg: 4px;
    --mm-control-height: 2.42rem;
    --mm-control-height-sm: 2.08rem;
    --mm-density-space: .76;
    --mm-shadow-sm: none;
    --mm-shadow-md: 0 6px 18px rgba(0, 0, 0, .30);
    --mm-shadow-lg: 0 12px 28px rgba(0, 0, 0, .36);
    --mm-panel-background: #0d1311;
    --mm-panel-elevated-background: #111a17;
    --mm-header-background: #080d0c;
    --mm-control-background: #060a09;
    --mm-row-hover: rgba(37, 230, 177, .08);
    --mm-grid-line: rgba(37, 230, 177, .12);
    --mm-waveform: #25e6b1;
    --mm-waveform-muted: #29483e;
    --mm-meter-low: #25e6b1;
    --mm-meter-mid: #cfe953;
    --mm-meter-peak: #ff625f;
    --mm-motion-fast: 80ms;
    --mm-motion-medium: 120ms;
    --bs-primary-rgb: 37, 230, 177;
}

:root[data-mm-theme="beat-deck"] {
    --mm-bg: #11100e;
    --mm-bg-elevated: #171510;
    --mm-surface: #1d1a15;
    --mm-surface-2: #252118;
    --mm-surface-3: #2e291f;
    --mm-surface-4: #393126;
    --mm-border: #4b4234;
    --mm-border-muted: #342e25;
    --mm-border-strong: #73634c;
    --mm-text: #fff6df;
    --mm-text-soft: #dfd2b7;
    --mm-muted: #aa9b80;
    --mm-muted-2: #81745f;
    --mm-accent: #f07b32;
    --mm-accent-2: #ff9a54;
    --mm-accent-soft: rgba(240, 123, 50, .14);
    --mm-accent-border: rgba(255, 154, 84, .45);
    --mm-warning: #f0c24b;
    --mm-info: #70b8c7;
    --mm-font-ui: Inter, "Segoe UI", sans-serif;
    --mm-font-display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    --mm-font-numeric: "SFMono-Regular", Consolas, monospace;
    --mm-heading-weight: 720;
    --mm-heading-tracking: .008em;
    --mm-label-tracking: .09em;
    --mm-radius-xs: 2px;
    --mm-radius-sm: 3px;
    --mm-radius-md: 5px;
    --mm-radius-lg: 6px;
    --mm-control-height: 2.58rem;
    --mm-density-space: .84;
    --mm-shadow-sm: 3px 3px 0 rgba(0, 0, 0, .30);
    --mm-shadow-md: 6px 6px 0 rgba(0, 0, 0, .28);
    --mm-shadow-lg: 9px 9px 0 rgba(0, 0, 0, .26);
    --mm-panel-background: #1d1a15;
    --mm-panel-elevated-background: #252118;
    --mm-header-background: #171510;
    --mm-control-background: #0e0d0b;
    --mm-row-hover: rgba(240, 123, 50, .09);
    --mm-grid-line: rgba(255, 246, 223, .10);
    --mm-waveform: #ff9a54;
    --mm-waveform-muted: #564a37;
    --mm-meter-low: #7cc078;
    --mm-meter-mid: #f0c24b;
    --mm-meter-peak: #ef5b4f;
    --bs-primary-rgb: 240, 123, 50;
}

:root[data-mm-theme="backline"] {
    --mm-bg: #0c0c0c;
    --mm-bg-elevated: #131313;
    --mm-surface: #191919;
    --mm-surface-2: #202020;
    --mm-surface-3: #292929;
    --mm-surface-4: #333333;
    --mm-border: #414141;
    --mm-border-muted: #2a2a2a;
    --mm-border-strong: #696969;
    --mm-text: #f0eee9;
    --mm-text-soft: #cbc6bd;
    --mm-muted: #99948b;
    --mm-muted-2: #747068;
    --mm-accent: #bd5a35;
    --mm-accent-2: #db7750;
    --mm-accent-soft: rgba(189, 90, 53, .15);
    --mm-accent-border: rgba(219, 119, 80, .46);
    --mm-warning: #d6a44f;
    --mm-info: #7da6b8;
    --mm-font-ui: "Segoe UI", Inter, sans-serif;
    --mm-font-display: Rockwell, "Roboto Slab", Georgia, serif;
    --mm-font-numeric: Consolas, "SFMono-Regular", monospace;
    --mm-heading-weight: 700;
    --mm-heading-tracking: -.006em;
    --mm-label-tracking: .085em;
    --mm-radius-xs: 0;
    --mm-radius-sm: 2px;
    --mm-radius-md: 2px;
    --mm-radius-lg: 3px;
    --mm-control-height: 2.56rem;
    --mm-density-space: .82;
    --mm-shadow-sm: 0 3px 0 #050505;
    --mm-shadow-md: 0 6px 0 #050505;
    --mm-shadow-lg: 0 9px 0 #050505;
    --mm-panel-background: #191919;
    --mm-panel-elevated-background: #202020;
    --mm-header-background: #101010;
    --mm-control-background: #0b0b0b;
    --mm-row-hover: rgba(189, 90, 53, .09);
    --mm-grid-line: rgba(240, 238, 233, .11);
    --mm-waveform: #db7750;
    --mm-waveform-muted: #4d4642;
    --mm-meter-low: #73ae68;
    --mm-meter-mid: #d6a44f;
    --mm-meter-peak: #d9574f;
    --bs-primary-rgb: 189, 90, 53;
}

:root[data-mm-theme="foundry"] {
    --mm-bg: #070809;
    --mm-bg-elevated: #0b0d0f;
    --mm-surface: #101316;
    --mm-surface-2: #15191d;
    --mm-surface-3: #1b2025;
    --mm-surface-4: #22282e;
    --mm-border: #3d444b;
    --mm-border-muted: #242a30;
    --mm-border-strong: #626c75;
    --mm-text: #eef0f1;
    --mm-text-soft: #c3c7ca;
    --mm-muted: #8c949a;
    --mm-muted-2: #697178;
    --mm-accent: #e7a528;
    --mm-accent-2: #ffc252;
    --mm-accent-soft: rgba(231, 165, 40, .12);
    --mm-accent-border: rgba(255, 194, 82, .42);
    --mm-warning: #e7a528;
    --mm-info: #87a7b7;
    --mm-font-ui: "Arial Narrow", "Segoe UI", sans-serif;
    --mm-font-display: "Arial Narrow", Impact, sans-serif;
    --mm-font-numeric: Consolas, "SFMono-Regular", monospace;
    --mm-heading-weight: 760;
    --mm-heading-tracking: .045em;
    --mm-label-tracking: .13em;
    --mm-radius-xs: 0;
    --mm-radius-sm: 0;
    --mm-radius-md: 0;
    --mm-radius-lg: 0;
    --mm-border-width: 1px;
    --mm-control-height: 2.34rem;
    --mm-control-height-sm: 2rem;
    --mm-density-space: .70;
    --mm-shadow-sm: none;
    --mm-shadow-md: none;
    --mm-shadow-lg: none;
    --mm-panel-background: #101316;
    --mm-panel-elevated-background: #15191d;
    --mm-header-background: #0b0d0f;
    --mm-control-background: #07090a;
    --mm-row-hover: rgba(231, 165, 40, .08);
    --mm-grid-line: rgba(231, 165, 40, .10);
    --mm-waveform: #ffc252;
    --mm-waveform-muted: #45443d;
    --mm-meter-low: #70b36f;
    --mm-meter-mid: #e7a528;
    --mm-meter-peak: #ef5650;
    --mm-motion-fast: 70ms;
    --mm-motion-medium: 100ms;
    --bs-primary-rgb: 231, 165, 40;
}

:root[data-mm-theme="airwave"] {
    color-scheme: light;
    --mm-bg: #f5f3ef;
    --mm-bg-elevated: #ffffff;
    --mm-surface: #ffffff;
    --mm-surface-2: #f0eee9;
    --mm-surface-3: #e8e5df;
    --mm-surface-4: #ddd9d1;
    --mm-border: #d4d0c8;
    --mm-border-muted: #e4e0da;
    --mm-border-strong: #aaa69f;
    --mm-text: #172034;
    --mm-text-soft: #3f485b;
    --mm-muted: #697184;
    --mm-muted-2: #858b99;
    --mm-accent: #e25e69;
    --mm-accent-2: #c94454;
    --mm-accent-soft: rgba(226, 94, 105, .10);
    --mm-accent-border: rgba(201, 68, 84, .36);
    --mm-success: #34845a;
    --mm-success-hover: #286d49;
    --mm-success-soft: rgba(52, 132, 90, .11);
    --mm-warning: #a87320;
    --mm-danger: #c63f4b;
    --mm-info: #367b9f;
    --mm-font-ui: Inter, ui-sans-serif, "Segoe UI", sans-serif;
    --mm-font-display: "Segoe UI", Inter, sans-serif;
    --mm-font-numeric: "SFMono-Regular", Consolas, monospace;
    --mm-heading-weight: 650;
    --mm-heading-tracking: -.024em;
    --mm-label-tracking: .055em;
    --mm-label-transform: none;
    --mm-radius-xs: 5px;
    --mm-radius-sm: 8px;
    --mm-radius-md: 10px;
    --mm-radius-lg: 12px;
    --mm-control-height: 2.75rem;
    --mm-density-space: 1.02;
    --mm-shadow-sm: 0 2px 8px rgba(24, 31, 46, .06);
    --mm-shadow-md: 0 8px 24px rgba(24, 31, 46, .09);
    --mm-shadow-lg: 0 16px 38px rgba(24, 31, 46, .12);
    --mm-panel-background: #ffffff;
    --mm-panel-elevated-background: #ffffff;
    --mm-header-background: rgba(255, 255, 255, .96);
    --mm-control-background: #fbfaf7;
    --mm-row-hover: rgba(226, 94, 105, .065);
    --mm-grid-line: rgba(23, 32, 52, .09);
    --mm-waveform: #e25e69;
    --mm-waveform-muted: #c8c3bb;
    --mm-meter-low: #34845a;
    --mm-meter-mid: #c08a2d;
    --mm-meter-peak: #c63f4b;
    --bs-primary-rgb: 226, 94, 105;
}

:root[data-mm-theme="night-session"] {
    --mm-bg: #0c1016;
    --mm-bg-elevated: #121821;
    --mm-surface: #171e28;
    --mm-surface-2: #1e2732;
    --mm-surface-3: #26313d;
    --mm-surface-4: #303c49;
    --mm-border: #3e4650;
    --mm-border-muted: #2a3139;
    --mm-border-strong: #6d6258;
    --mm-text: #f2eadf;
    --mm-text-soft: #d0c4b5;
    --mm-muted: #9f9488;
    --mm-muted-2: #7b7168;
    --mm-accent: #b58a55;
    --mm-accent-2: #d4aa73;
    --mm-accent-soft: rgba(181, 138, 85, .13);
    --mm-accent-border: rgba(212, 170, 115, .40);
    --mm-warning: #d6a35b;
    --mm-info: #6aa2ad;
    --mm-font-ui: Inter, "Segoe UI", sans-serif;
    --mm-font-display: Georgia, "Times New Roman", serif;
    --mm-font-numeric: "SFMono-Regular", Consolas, monospace;
    --mm-heading-weight: 600;
    --mm-heading-tracking: -.012em;
    --mm-label-tracking: .11em;
    --mm-radius-xs: 1px;
    --mm-radius-sm: 3px;
    --mm-radius-md: 5px;
    --mm-radius-lg: 6px;
    --mm-control-height: 2.62rem;
    --mm-density-space: .94;
    --mm-shadow-sm: 0 3px 12px rgba(0, 0, 0, .20);
    --mm-shadow-md: 0 9px 26px rgba(0, 0, 0, .26);
    --mm-shadow-lg: 0 18px 42px rgba(0, 0, 0, .30);
    --mm-panel-background: #171e28;
    --mm-panel-elevated-background: #1e2732;
    --mm-header-background: #111720;
    --mm-control-background: #0d1218;
    --mm-row-hover: rgba(181, 138, 85, .08);
    --mm-grid-line: rgba(212, 170, 115, .10);
    --mm-waveform: #d4aa73;
    --mm-waveform-muted: #4d4843;
    --mm-meter-low: #759c72;
    --mm-meter-mid: #d6a35b;
    --mm-meter-peak: #bc5c63;
    --bs-primary-rgb: 181, 138, 85;
}

:root[data-mm-theme="chamber"] {
    color-scheme: light;
    --mm-bg: #f3f0e8;
    --mm-bg-elevated: #fbfaf6;
    --mm-surface: #fbfaf6;
    --mm-surface-2: #efebe1;
    --mm-surface-3: #e5dfd2;
    --mm-surface-4: #d8d0c0;
    --mm-border: #c9c1b2;
    --mm-border-muted: #ddd7cc;
    --mm-border-strong: #988f80;
    --mm-text: #1e2925;
    --mm-text-soft: #46534e;
    --mm-muted: #6f7a75;
    --mm-muted-2: #8c958f;
    --mm-accent: #356652;
    --mm-accent-2: #274d3e;
    --mm-accent-soft: rgba(53, 102, 82, .09);
    --mm-accent-border: rgba(53, 102, 82, .32);
    --mm-success: #3e7855;
    --mm-success-hover: #326646;
    --mm-success-soft: rgba(62, 120, 85, .10);
    --mm-warning: #9c702b;
    --mm-danger: #9c4545;
    --mm-info: #4f7785;
    --mm-font-ui: Georgia, "Times New Roman", serif;
    --mm-font-display: Georgia, "Times New Roman", serif;
    --mm-font-numeric: "SFMono-Regular", Consolas, monospace;
    --mm-heading-weight: 600;
    --mm-heading-tracking: -.012em;
    --mm-label-tracking: .04em;
    --mm-label-transform: none;
    --mm-radius-xs: 0;
    --mm-radius-sm: 1px;
    --mm-radius-md: 2px;
    --mm-radius-lg: 2px;
    --mm-control-height: 2.72rem;
    --mm-density-space: 1.08;
    --mm-shadow-sm: none;
    --mm-shadow-md: 0 8px 24px rgba(42, 47, 43, .07);
    --mm-shadow-lg: 0 14px 34px rgba(42, 47, 43, .09);
    --mm-panel-background: #fbfaf6;
    --mm-panel-elevated-background: #fbfaf6;
    --mm-header-background: #f7f5ef;
    --mm-control-background: #ffffff;
    --mm-row-hover: rgba(53, 102, 82, .055);
    --mm-grid-line: rgba(30, 41, 37, .10);
    --mm-waveform: #356652;
    --mm-waveform-muted: #b4b0a7;
    --mm-meter-low: #3e7855;
    --mm-meter-mid: #a37934;
    --mm-meter-peak: #9c4545;
    --mm-motion-fast: 100ms;
    --mm-motion-medium: 140ms;
    --bs-primary-rgb: 53, 102, 82;
}

:root[data-mm-theme="field-notes"] {
    color-scheme: light;
    --mm-bg: #ece8dc;
    --mm-bg-elevated: #f6f2e7;
    --mm-surface: #f6f2e7;
    --mm-surface-2: #e8e2d3;
    --mm-surface-3: #dcd4c2;
    --mm-surface-4: #cec4ae;
    --mm-border: #bdb39f;
    --mm-border-muted: #d3cbb9;
    --mm-border-strong: #8d826e;
    --mm-text: #292a25;
    --mm-text-soft: #515248;
    --mm-muted: #77766a;
    --mm-muted-2: #939184;
    --mm-accent: #65794e;
    --mm-accent-2: #4e603b;
    --mm-accent-soft: rgba(101, 121, 78, .10);
    --mm-accent-border: rgba(78, 96, 59, .34);
    --mm-success: #547044;
    --mm-success-hover: #405a33;
    --mm-success-soft: rgba(84, 112, 68, .10);
    --mm-warning: #a16d32;
    --mm-danger: #a04e46;
    --mm-info: #527886;
    --mm-font-ui: Georgia, "Segoe UI", serif;
    --mm-font-display: Georgia, "Times New Roman", serif;
    --mm-font-numeric: "Courier New", Consolas, monospace;
    --mm-heading-weight: 620;
    --mm-heading-tracking: -.008em;
    --mm-label-tracking: .055em;
    --mm-label-transform: none;
    --mm-radius-xs: 2px;
    --mm-radius-sm: 4px;
    --mm-radius-md: 5px;
    --mm-radius-lg: 6px;
    --mm-control-height: 2.68rem;
    --mm-density-space: 1;
    --mm-shadow-sm: 1px 2px 0 rgba(79, 72, 58, .09);
    --mm-shadow-md: 2px 4px 0 rgba(79, 72, 58, .10);
    --mm-shadow-lg: 3px 6px 0 rgba(79, 72, 58, .11);
    --mm-panel-background: #f6f2e7;
    --mm-panel-elevated-background: #f6f2e7;
    --mm-header-background: #eee9dc;
    --mm-control-background: #fbf8f0;
    --mm-row-hover: rgba(101, 121, 78, .065);
    --mm-grid-line: rgba(41, 42, 37, .10);
    --mm-waveform: #65794e;
    --mm-waveform-muted: #aaa391;
    --mm-meter-low: #547044;
    --mm-meter-mid: #a16d32;
    --mm-meter-peak: #a04e46;
    --bs-primary-rgb: 101, 121, 78;
}

:root[data-mm-theme="bedroom-tape"] {
    --mm-bg: #151819;
    --mm-bg-elevated: #1b1f20;
    --mm-surface: #222627;
    --mm-surface-2: #292e2e;
    --mm-surface-3: #313737;
    --mm-surface-4: #3b4241;
    --mm-border: #4b5451;
    --mm-border-muted: #363d3b;
    --mm-border-strong: #717c77;
    --mm-text: #eee8dc;
    --mm-text-soft: #d0c8ba;
    --mm-muted: #9d998e;
    --mm-muted-2: #7d7a72;
    --mm-accent: #8fa783;
    --mm-accent-2: #acc39e;
    --mm-accent-soft: rgba(143, 167, 131, .13);
    --mm-accent-border: rgba(172, 195, 158, .40);
    --mm-warning: #d0a564;
    --mm-danger: #c97979;
    --mm-info: #7ea8ad;
    --mm-font-ui: "Segoe UI", Inter, sans-serif;
    --mm-font-display: "Trebuchet MS", "Segoe UI", sans-serif;
    --mm-font-numeric: "Courier New", Consolas, monospace;
    --mm-heading-weight: 640;
    --mm-heading-tracking: -.006em;
    --mm-label-tracking: .08em;
    --mm-radius-xs: 3px;
    --mm-radius-sm: 5px;
    --mm-radius-md: 7px;
    --mm-radius-lg: 8px;
    --mm-control-height: 2.55rem;
    --mm-density-space: .9;
    --mm-shadow-sm: 0 3px 9px rgba(0, 0, 0, .18);
    --mm-shadow-md: 0 8px 20px rgba(0, 0, 0, .22);
    --mm-shadow-lg: 0 14px 32px rgba(0, 0, 0, .26);
    --mm-panel-background: #222627;
    --mm-panel-elevated-background: #292e2e;
    --mm-header-background: #191d1d;
    --mm-control-background: #171a1b;
    --mm-row-hover: rgba(143, 167, 131, .08);
    --mm-grid-line: rgba(238, 232, 220, .09);
    --mm-waveform: #acc39e;
    --mm-waveform-muted: #535c57;
    --mm-meter-low: #8fa783;
    --mm-meter-mid: #d0a564;
    --mm-meter-peak: #c97979;
    --mm-motion-fast: 125ms;
    --mm-motion-medium: 180ms;
    --bs-primary-rgb: 143, 167, 131;
}

/* Core typography and surfaces */
html[data-mm-theme] {
    background: var(--mm-bg);
}

body.mm-body,
body.mm-body button,
body.mm-body input,
body.mm-body select,
body.mm-body textarea {
    font-family: var(--mm-font-ui);
}

body.mm-body {
    background: var(--mm-bg);
    color: var(--mm-text);
}

body.mm-body h1,
body.mm-body h2,
body.mm-body h3,
body.mm-body h4,
body.mm-body h5,
body.mm-body h6,
body.mm-body .h1,
body.mm-body .h2,
body.mm-body .h3,
body.mm-body .h4,
body.mm-body .h5,
body.mm-body .h6 {
    font-family: var(--mm-font-display);
    font-weight: var(--mm-heading-weight);
    letter-spacing: var(--mm-heading-tracking);
}

.mm-sidebar-section-title,
.mm-settings-eyebrow,
.mm-settings-group-title,
.mm-theme-preview__family,
.form-label,
[data-mm-meter-label] {
    letter-spacing: var(--mm-label-tracking);
    text-transform: var(--mm-label-transform);
}

.mm-metric-value,
.mm-stat-value,
[data-mm-value],
[data-lufs],
[data-db],
code,
kbd,
samp {
    font-family: var(--mm-font-numeric);
    font-variant-numeric: tabular-nums;
}

/* Remove generic AI/SaaS decoration. Surfaces read as instrument panels. */
body.mm-body .mm-page-header,
body.mm-body .mm-card,
body.mm-body .card,
body.mm-body .modal-content,
body.mm-body .offcanvas,
body.mm-body .toast,
body.mm-body .accordion-item,
body.mm-body .dropdown-menu,
body.mm-body .list-group-item,
body.mm-body .popover {
    background: var(--mm-panel-background);
    border-color: var(--mm-border);
    box-shadow: var(--mm-shadow-sm);
}

body.mm-body .mm-page-header {
    border-top-color: var(--mm-border-strong);
    border-radius: var(--mm-radius-lg);
}

body.mm-body .card-header,
body.mm-body .card-footer,
body.mm-body .modal-header,
body.mm-body .modal-footer,
body.mm-body .offcanvas-header,
body.mm-body .accordion-button {
    background: var(--mm-panel-elevated-background);
    border-color: var(--mm-border-muted);
}

body.mm-body .mm-main-header,
body.mm-body .mm-navbar,
body.mm-body .mm-topbar,
body.mm-body .mm-public-header__navbar {
    background: var(--mm-header-background);
    border-color: var(--mm-border-muted);
    box-shadow: none;
    backdrop-filter: none;
}

body.mm-body .form-control,
body.mm-body .form-select,
body.mm-body .input-group-text,
body.mm-body .form-control:disabled,
body.mm-body .form-select:disabled {
    min-height: var(--mm-control-height);
    color: var(--mm-text);
    background: var(--mm-control-background);
    border-color: var(--mm-border);
    border-radius: var(--mm-radius-sm);
    box-shadow: none;
}

body.mm-body .form-control:focus,
body.mm-body .form-select:focus,
body.mm-body .form-check-input:focus,
body.mm-body .btn:focus-visible,
body.mm-body a:focus-visible,
body.mm-body button:focus-visible,
body.mm-body [tabindex]:focus-visible {
    outline: 2px solid var(--mm-accent-2);
    outline-offset: 2px;
    box-shadow: none;
}

body.mm-body .btn {
    min-height: 2.5rem;
    border-radius: var(--mm-radius-sm);
    transition:
        background-color var(--mm-motion-fast) ease,
        border-color var(--mm-motion-fast) ease,
        color var(--mm-motion-fast) ease,
        transform var(--mm-motion-fast) ease;
}

body.mm-body .btn-primary {
    color: #fff;
    background: var(--mm-accent);
    border-color: var(--mm-accent);
    box-shadow: none;
}

:root[data-bs-theme="light"] body.mm-body .btn-primary {
    color: #fff;
}

body.mm-body .btn-primary:hover,
body.mm-body .btn-primary:focus-visible {
    background: var(--mm-accent-2);
    border-color: var(--mm-accent-2);
}

body.mm-body .btn-outline-primary {
    color: var(--mm-accent-2);
    border-color: var(--mm-accent-border);
    background: transparent;
}

body.mm-body .btn-outline-primary:hover,
body.mm-body .btn-outline-primary:focus-visible {
    color: var(--mm-text);
    border-color: var(--mm-accent-2);
    background: var(--mm-accent-soft);
}

body.mm-body .badge,
body.mm-body .rounded-pill {
    border-radius: var(--mm-radius-xs);
}

body.mm-body .dropdown-item,
body.mm-body .nav-link,
body.mm-body .mm-sidebar-link {
    border-radius: var(--mm-radius-sm);
}

body.mm-body .dropdown-item:hover,
body.mm-body .dropdown-item:focus,
body.mm-body .list-group-item-action:hover,
body.mm-body .table-hover > tbody > tr:hover > * {
    background: var(--mm-row-hover);
    color: var(--mm-text);
}

body.mm-body table,
body.mm-body .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mm-text);
    --bs-table-border-color: var(--mm-border-muted);
    --bs-table-hover-bg: var(--mm-row-hover);
    --bs-table-hover-color: var(--mm-text);
}

body.mm-body .table > :not(caption) > * > * {
    border-bottom-width: var(--mm-border-width);
}

body.mm-body .progress {
    overflow: hidden;
    background: var(--mm-surface-3);
    border-radius: var(--mm-radius-xs);
    box-shadow: none;
}

body.mm-body .progress-bar {
    background: var(--mm-accent);
}

body.mm-body .alert {
    border-radius: var(--mm-radius-sm);
    box-shadow: none;
}

/* Audio first: waveform, meters and mastering values are visually privileged. */
body.mm-body .mini-waveform {
    gap: 2px;
    background-image: linear-gradient(to bottom, transparent 49%, var(--mm-grid-line) 50%, transparent 51%);
}

body.mm-body .mini-waveform span {
    background: var(--mm-waveform);
    border-radius: 0;
}

body.mm-body [class*="waveform"] canvas,
body.mm-body [class*="spectrum"] canvas,
body.mm-body [class*="meter"] canvas {
    border-color: var(--mm-border-muted);
}

body.mm-body [class*="meter"] .progress-bar,
body.mm-body [data-mm-meter] .progress-bar {
    background: var(--mm-meter-low);
}

body.mm-body [data-mm-meter="warning"] .progress-bar,
body.mm-body [data-mm-level="warning"] {
    background: var(--mm-meter-mid);
}

body.mm-body [data-mm-meter="peak"] .progress-bar,
body.mm-body [data-mm-level="peak"],
body.mm-body [data-mm-clipping="true"] {
    background: var(--mm-meter-peak);
}

/* Navigation: remove decorative gradient selection; use a precise signal rail. */
body.mm-body .mm-sidebar-link:hover,
body.mm-body .mm-sidebar-link:focus-visible,
body.mm-body .mm-sidebar-link.active,
body.mm-body .mm-sidebar-nav .nav-link:hover,
body.mm-body .mm-sidebar-nav .nav-link:focus-visible,
body.mm-body .mm-sidebar-nav .nav-link.active {
    color: var(--mm-text);
    background: var(--mm-row-hover);
    border-color: var(--mm-border-muted);
}

body.mm-body .mm-sidebar-link.active,
body.mm-body .mm-sidebar-nav .nav-link.active {
    box-shadow: inset 2px 0 0 var(--mm-accent-2);
}

/* Theme-specific structural character. UX positions remain stable. */
:root[data-mm-theme="pulse-grid"] body.mm-body .mm-card,
:root[data-mm-theme="pulse-grid"] body.mm-body .card,
:root[data-mm-theme="pulse-grid"] body.mm-body .mm-page-header {
    background-image:
        linear-gradient(var(--mm-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mm-grid-line) 1px, transparent 1px);
    background-size: 24px 24px;
    background-color: var(--mm-panel-background);
}

:root[data-mm-theme="beat-deck"] body.mm-body .mm-page-header,
:root[data-mm-theme="beat-deck"] body.mm-body .card-header,
:root[data-mm-theme="beat-deck"] body.mm-body .mm-settings-panel-head {
    border-left: 4px solid var(--mm-accent);
}

:root[data-mm-theme="backline"] body.mm-body .mm-card,
:root[data-mm-theme="backline"] body.mm-body .card,
:root[data-mm-theme="backline"] body.mm-body .modal-content {
    border-top-width: 2px;
}

:root[data-mm-theme="foundry"] body.mm-body .mm-card,
:root[data-mm-theme="foundry"] body.mm-body .card,
:root[data-mm-theme="foundry"] body.mm-body .modal-content,
:root[data-mm-theme="foundry"] body.mm-body .form-control,
:root[data-mm-theme="foundry"] body.mm-body .form-select,
:root[data-mm-theme="foundry"] body.mm-body .btn {
    border-width: 1px;
    box-shadow: none;
}

:root[data-mm-theme="foundry"] body.mm-body .mm-page-header,
:root[data-mm-theme="foundry"] body.mm-body .card-header {
    border-left: 3px solid var(--mm-warning);
}

:root[data-mm-theme="airwave"] body.mm-body .mm-page-host,
:root[data-mm-theme="airwave"] body.mm-body .mm-public-content,
:root[data-mm-theme="chamber"] body.mm-body .mm-page-host,
:root[data-mm-theme="chamber"] body.mm-body .mm-public-content {
    line-height: 1.58;
}

:root[data-mm-theme="night-session"] body.mm-body .mm-page-header__row,
:root[data-mm-theme="night-session"] body.mm-body .mm-settings-panel-head {
    align-items: flex-start;
}

:root[data-mm-theme="night-session"] body.mm-body .mm-page-header__title,
:root[data-mm-theme="night-session"] body.mm-body .mm-settings-title {
    font-style: italic;
}

:root[data-mm-theme="chamber"] body.mm-body .mm-card,
:root[data-mm-theme="chamber"] body.mm-body .card,
:root[data-mm-theme="chamber"] body.mm-body .mm-page-header {
    border-left: 0;
    border-right: 0;
    box-shadow: none;
}

:root[data-mm-theme="field-notes"] body.mm-body .mm-card,
:root[data-mm-theme="field-notes"] body.mm-body .card,
:root[data-mm-theme="field-notes"] body.mm-body .mm-page-header {
    border-style: solid;
    border-bottom-width: 2px;
}

:root[data-mm-theme="bedroom-tape"] body.mm-body .progress,
:root[data-mm-theme="bedroom-tape"] body.mm-body [class*="timeline"] {
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0 11px,
        var(--mm-grid-line) 11px 12px);
}

/* Motion is functional and respects user preference. */
body.mm-body .card,
body.mm-body .mm-card,
body.mm-body .form-control,
body.mm-body .form-select,
body.mm-body .nav-link,
body.mm-body .dropdown-item {
    transition-duration: var(--mm-motion-medium);
    transition-property: background-color, border-color, color, box-shadow;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --mm-motion-fast: 0ms;
        --mm-motion-medium: 0ms;
    }

    body.mm-body *,
    body.mm-body *::before,
    body.mm-body *::after {
        scroll-behavior: auto;
        transition-duration: 0ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

/* Responsive core: controls stay operable and dense without becoming tiny. */
@media (max-width: 1024px) {
    :root {
        --mm-control-height: max(2.55rem, 40px);
        --mm-control-height-sm: max(2.25rem, 36px);
    }
}

@media (max-width: 768px) {
    body.mm-body .card-body,
    body.mm-body .modal-body,
    body.mm-body .offcanvas-body {
        padding: calc(var(--mm-space-3) * var(--mm-density-space));
    }

    body.mm-body .table-responsive {
        scrollbar-width: thin;
        scrollbar-color: var(--mm-border-strong) var(--mm-surface);
    }

    body.mm-body .modal-dialog {
        margin: .5rem;
    }
}

@media (max-width: 430px) {
    body.mm-body .btn,
    body.mm-body .form-control,
    body.mm-body .form-select,
    body.mm-body .dropdown-item,
    body.mm-body .nav-link {
        min-height: 44px;
    }

    body.mm-body .mm-page-header {
        padding: var(--mm-space-3);
    }

    body.mm-body .mm-page-header__row {
        align-items: stretch;
        flex-direction: column;
        gap: var(--mm-space-2);
    }
}