/* ---------------------------------------------------- */
/* --- Theme Definitions (Same as bedrock-utils) --- */
/* ---------------------------------------------------- */

/* 1. Monochromatic Elegance (High Contrast) */
.theme-monochrome {
    --color-background: #fff;
    --color-text-primary: #222;
    --color-disabled: #f5f5f5;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.08);
    --color-background-main: #FFFFFF;
    --color-primary-accent: #1C1C1C;
    --color-primary-accent-hover: #333333;
    --color-secondary-accent: #7A7A7A;
    --color-highlight: #0077B6;
    --color-text-dark: #1C1C1C;
    --color-text-light: #FFFFFF;
    --color-card-background: #FFFFFF;
    --panel-bg-primary: #FFFFFF;
    --color-surface-subtle: rgba(28, 28, 28, 0.25);
    --color-warning-error: #DC3545;
    --color-info-background: linear-gradient(135deg, rgba(0, 119, 182, 0.15), rgba(255, 255, 255, 0.95));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.25);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(28, 28, 28, 0.15);
    --color-overlay-white: rgba(255, 255, 255, 0.1);
    --color-overlay-border: rgba(255, 255, 255, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(0, 119, 182, 0.1);
    --color-positive-bg-strong: rgba(0, 119, 182, 0.2);
    --color-negative-bg-light: rgba(220, 53, 69, 0.1);
    --color-negative-bg-strong: rgba(220, 53, 69, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(28, 28, 28, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 2. Traditional Mahogany (Warm Earth Tones) */
.theme-mahogany {
    --color-background: #fff;
    --color-text-primary: #222;
    --color-disabled: #f5f5f5;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.08);
    --color-background-main: #EDEAE4;
    --color-primary-accent: #5D4037;
    --color-primary-accent-hover: #4E342E;
    --color-secondary-accent: #8d6e63;
    --color-highlight: #999d4975;
    --color-text-dark: #3E2723;
    --color-text-light: #FFFFFF;
    --color-card-background: #FFFFFF;
    --panel-bg-primary: #FFFFFF;
    --color-surface-subtle: rgba(93, 64, 55, 0.25);
    --color-warning-error: #D84315;
    --color-info-background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 255, 255, 0.95));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.25);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(93, 64, 55, 0.15);
    --color-overlay-white: rgba(255, 255, 255, 0.1);
    --color-overlay-border: rgba(255, 255, 255, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(255, 193, 7, 0.1);
    --color-positive-bg-strong: rgba(255, 193, 7, 0.2);
    --color-negative-bg-light: rgba(216, 67, 21, 0.1);
    --color-negative-bg-strong: rgba(216, 67, 21, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(93, 64, 55, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 3. Regal Dark Mode (Deep Green/Silver) */
.theme-regal-dark {
    --color-background: #233136;
    --color-text-primary: #E0E0E0;
    --color-disabled: #2a363b;
    --color-text-secondary: #7A7A7A;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.10);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.18);
    --color-background-main: #1C282D;
    --color-primary-accent: #004D40;
    --color-primary-accent-hover: #00695C;
    --color-secondary-accent:  #BDBDBD;
    --color-highlight: #26A69A;
    --color-text-dark: #E0E0E0;
    --color-text-light: #E0E0E0;
    --color-card-background: #233136;
    --panel-bg-primary: #233136;
    --color-surface-subtle: rgba(38, 166, 154, 0.25);
    --color-warning-error: #FFAB00;
    --color-info-background: linear-gradient(135deg, rgba(35, 49, 54, 0.3), rgba(189, 189, 189, 0.15));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.25);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(0, 77, 64, 0.15);
    --color-overlay-white: rgba(224, 224, 224, 0.1);
    --color-overlay-border: rgba(224, 224, 224, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(189, 189, 189, 0.1);
    --color-positive-bg-strong: rgba(189, 189, 189, 0.2);
    --color-negative-bg-light: rgba(255, 171, 0, 0.1);
    --color-negative-bg-strong: rgba(255, 171, 0, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(0, 77, 64, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 4. Soft Sage & Stone (Muted Natural) */
.theme-sage-stone {
    --color-background: #fff;
    --color-text-primary: #3D3D3D;
    --color-disabled: #e0e0e0;
    --color-text-secondary: #A9B3A9;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.08);
    --color-background-main: #F4F6F4;
    --color-primary-accent: #4A574E;
    --color-primary-accent-hover: #3A463E;
    --color-secondary-accent: #A9B3A9;
    --color-highlight: #9E7B4C;
    --color-text-dark: #3D3D3D;
    --color-text-light: #FFFFFF;
    --color-card-background: #FFFFFF;
    --panel-bg-primary: #FFFFFF;
    --color-surface-subtle: rgba(74, 87, 78, 0.25);
    --color-warning-error: #B70909;
    --color-info-background: linear-gradient(135deg, rgba(158, 123, 76, 0.15), rgba(255, 255, 255, 0.95));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.25);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(74, 87, 78, 0.15);
    --color-overlay-white: rgba(255, 255, 255, 0.1);
    --color-overlay-border: rgba(255, 255, 255, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(158, 123, 76, 0.1);
    --color-positive-bg-strong: rgba(158, 123, 76, 0.2);
    --color-negative-bg-light: rgba(183, 9, 9, 0.1);
    --color-negative-bg-strong: rgba(183, 9, 9, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(74, 87, 78, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 5. French Provincial (Light Blue/Pastel) */
.theme-provincial {
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.08);
    --color-background-main: #F8F8FF;
    --color-primary-accent: #4682B4;
    --color-primary-accent-hover: #3A6B9C;
    --color-secondary-accent: #ADD8E6;
    --color-highlight: #4A90E2;
    --color-text-dark: #333333;
    --color-text-light: #FFFFFF;
    --color-card-background: #FFFFFF;
    --panel-bg-primary: #FFFFFF;
    --color-surface-subtle: rgba(70, 130, 180, 0.25);
    --color-warning-error: #D9534F;
    --color-info-background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(255, 255, 255, 0.95));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.25);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(70, 130, 180, 0.15);
    --color-overlay-white: rgba(255, 255, 255, 0.1);
    --color-overlay-border: rgba(255, 255, 255, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(192, 192, 192, 0.1);
    --color-positive-bg-strong: rgba(192, 192, 192, 0.2);
    --color-negative-bg-light: rgba(217, 83, 79, 0.1);
    --color-negative-bg-strong: rgba(217, 83, 79, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(70, 130, 180, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 6. Dark Modern (VS Code Dark+) */
.theme-dark-modern {
    --color-background: #43435e;
    --color-text-primary: #cccccc;
    --color-disabled: #4e4b4b;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.10);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.18);
    --color-background-main: #4e4b4b;
    --color-primary-accent: #007acc;
    --color-primary-accent-hover: #005999;
    --color-secondary-accent: #3c3c3c;
    --color-highlight: #3794ff;
    --color-text-dark: #cccccc;
    --color-text-light: #ffffff;
    --color-card-background: #43435e;
    --panel-bg-primary: #43435e;
    --color-surface-subtle: rgba(55, 148, 255, 0.25);
    --color-warning-error: #f48771;
    --color-info-background: linear-gradient(135deg,  rgba(37, 37, 38, 0.6), rgba(55, 148, 255, 0.15));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.5);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(0, 122, 204, 0.15);
    --color-overlay-white: rgba(204, 204, 204, 0.1);
    --color-overlay-border: rgba(204, 204, 204, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(55, 148, 255, 0.1);
    --color-positive-bg-strong: rgba(55, 148, 255, 0.2);
    --color-negative-bg-light: rgba(244, 135, 113, 0.1);
    --color-negative-bg-strong: rgba(244, 135, 113, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(0, 122, 204, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 7. Light Modern (VS Code Light+) */
.theme-light-modern {
    --color-background: #fff;
    --color-text-primary: #3c3c3c;
    --color-disabled: #e5e5e5;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.08);
    --color-background-main: #f3f3f3;
    --color-primary-accent: #0066cc;
    --color-primary-accent-hover: #004d99;
    --color-secondary-accent: #e5e5e5;
    --color-highlight: #007acc;
    --color-text-dark: #3c3c3c;
    --color-text-light: #ffffff;
    --color-card-background: #ffffff;
    --panel-bg-primary: #ffffff;
    --color-surface-subtle: rgba(0, 122, 204, 0.25);
    --color-warning-error: #e51400;
    --color-info-background: linear-gradient(135deg, rgba(0, 122, 204, 0.15), rgba(255, 255, 255, 0.95));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.15);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(0, 102, 204, 0.15);
    --color-overlay-white: rgba(255, 255, 255, 0.1);
    --color-overlay-border: rgba(255, 255, 255, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(0, 122, 204, 0.1);
    --color-positive-bg-strong: rgba(0, 122, 204, 0.2);
    --color-negative-bg-light: rgba(229, 20, 0, 0.1);
    --color-negative-bg-strong: rgba(229, 20, 0, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(0, 102, 204, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 8. GitHub Dark */
.theme-github-dark {
    --color-background: #3d444e;
    --color-text-primary: #c9d1d9;
    --color-disabled: #38404c;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.10);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.18);
    --color-background-main: #38404c;
    --color-primary-accent: #58a6ff;
    --color-primary-accent-hover: #388bfd;
    --color-secondary-accent: #21262d;
    --color-highlight: #87a4d9;
    --color-text-dark: #c9d1d9;
    --color-text-light: #ffffff;
    --color-card-background: #3d444e;
    --panel-bg-primary: #3d444e;
    --color-surface-subtle: rgba(88, 166, 255, 0.25);
    --color-warning-error: #da3633;
    --color-info-background: linear-gradient(135deg, rgba(247, 129, 102, 0.15), rgba(22, 27, 34, 0.95));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.6);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(88, 166, 255, 0.15);
    --color-overlay-white: rgba(201, 209, 217, 0.1);
    --color-overlay-border: rgba(201, 209, 217, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(247, 129, 102, 0.1);
    --color-positive-bg-strong: rgba(247, 129, 102, 0.2);
    --color-negative-bg-light: rgba(218, 54, 51, 0.1);
    --color-negative-bg-strong: rgba(218, 54, 51, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(88, 166, 255, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 9. Solarized Dark */
.theme-solarized-dark {
    --color-background: #073642;
    --color-text-primary: #93a1a1;
    --color-disabled: #002b36;
    --color-text-secondary: #839496;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.10);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.18);
    --color-background-main: #002b36;
    --color-primary-accent: #268bd2;
    --color-primary-accent-hover: #1e6ba8;
    --color-secondary-accent: #073642;
    --color-highlight: #b58900;
    --color-text-dark: #93a1a1;
    --color-text-light: #fdf6e3;
    --color-card-background: #073642;
    --panel-bg-primary: #073642;
    --color-surface-subtle: rgba(181, 137, 0, 0.25);
    --color-warning-error: #dc322f;
    --color-info-background: linear-gradient(135deg, rgba(181, 137, 0, 0.15), rgba(7, 54, 66, 0.95));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.7);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(38, 139, 210, 0.15);
    --color-overlay-white: rgba(147, 161, 161, 0.1);
    --color-overlay-border: rgba(147, 161, 161, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(181, 137, 0, 0.1);
    --color-positive-bg-strong: rgba(181, 137, 0, 0.2);
    --color-negative-bg-light: rgba(220, 50, 47, 0.1);
    --color-negative-bg-strong: rgba(220, 50, 47, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(38, 139, 210, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 10. Dracula */
.theme-dracula {
    --color-background: #44475a;
    --color-text-primary: #f8f8f2;
    --color-disabled: #282a36;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.10);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.18);
    --color-background-main: #282a36;
    --color-primary-accent: #bd93f9;
    --color-primary-accent-hover: #a166f6;
    --color-secondary-accent: #44475a;
    --color-highlight: #a66cff57;
    --color-text-dark: #f8f8f2;
    --color-text-light: #ffffff;
    --color-card-background: #44475a;
    --panel-bg-primary: #44475a;
    --color-surface-subtle: rgba(189, 147, 249, 0.25);
    --color-warning-error: #ff5555;
    --color-info-background: linear-gradient(135deg, rgba(255, 184, 108, 0.15), rgba(68, 71, 90, 0.95));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.5);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(189, 147, 249, 0.15);
    --color-overlay-white: rgba(248, 248, 242, 0.1);
    --color-overlay-border: rgba(248, 248, 242, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(255, 184, 108, 0.1);
    --color-positive-bg-strong: rgba(255, 184, 108, 0.2);
    --color-negative-bg-light: rgba(255, 85, 85, 0.1);
    --color-negative-bg-strong: rgba(255, 85, 85, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(189, 147, 249, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 11. One Dark Pro */
.theme-one-dark-pro {
    --color-background: #345b6c;
    --color-text-primary: #abb2bf;
    --color-disabled: #282c34;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.10);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.18);
    --color-background-main: #282c34;
    --color-primary-accent: #417e8f;
    --color-primary-accent-hover: #4fc3e7;
    --color-secondary-accent: #21252b;
    --color-highlight: #4f7699;
    --color-text-dark: #abb2bf;
    --color-text-light: #ffffff;
    --color-card-background: #345b6c;
    --panel-bg-primary: #21252b;
    --color-surface-subtle: rgba(97, 218, 251, 0.25);
    --color-warning-error: #e06c75;
    --color-info-background: linear-gradient(135deg, rgba(152, 195, 121, 0.15), rgba(33, 37, 43, 0.95));
    --box-shadow-panel: 4px -4px 7px 2px rgba(0, 0, 0, 0.6);
    --shadow-card-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-card-main: 0 8px 32px rgba(97, 218, 251, 0.15);
    --color-overlay-white: rgba(171, 178, 191, 0.1);
    --color-overlay-border: rgba(171, 178, 191, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-drawer: rgba(0, 0, 0, 0.5);
    --color-positive-bg-light: rgba(152, 195, 121, 0.1);
    --color-positive-bg-strong: rgba(152, 195, 121, 0.2);
    --color-negative-bg-light: rgba(224, 108, 117, 0.1);
    --color-negative-bg-strong: rgba(224, 108, 117, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-collapse-button-hover: 0 2px 6px rgba(97, 218, 251, 0.4);
    --shadow-button: 0 2px 8px rgba(25, 42, 86, 0.08);
    --shadow-button-hover: 0 4px 16px rgba(25, 42, 86, 0.15);
}

/* 12. Natural Neutral */
.theme-natural-neutral {
    --color-background: #fff;
    --color-text-primary: #333;
    --color-disabled: #f5f5f5;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(0,0,0,0.08);
    /* Main Background & Cards - Soft, warm white */
    --color-background-main: #F8F8F8;
    --color-card-background: #FFFFFF;
    --panel-bg-primary: #FFFFFF;
    --color-surface-subtle: rgba(96, 125, 139, 0.25);

    /* Primary Text & Dark Elements - Very dark gray, almost black */
    --color-text-dark: #333333;
    --color-primary-accent: #555555;
    --color-primary-accent-hover: #777777;

    /* Secondary/Muted Text & Accents - Medium-light gray for subtle distinction */
    --color-secondary-accent: #AAAAAA; 

    /* Highlight/Interactive Color - A very subtle, neutral blue-gray, NOT bright */
    --color-highlight: #607D8B; /* Slate Gray */
    --color-highlight-text: #FFFFFF;

    /* Light Text (for use on dark backgrounds) */
    --color-text-light: #FFFFFF;

    /* Warning/Error - Subtle Red */
    --color-warning-error: #B00020; /* Muted Red */

    /* Info Background - Extremely subtle gray gradient */
    --color-info-background: linear-gradient(135deg, rgba(173, 181, 189, 0.1), rgba(255, 255, 255, 0.9));

    /* Shadows & Borders - Soft and diffused */
    --box-shadow-panel: 2px 2px 4px 1px rgba(0, 0, 0, 0.15);
    --shadow-card-light: 0 1px 4px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-main: 0 4px 16px rgba(51, 51, 51, 0.1);
    --shadow-header: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-overlay: 0 8px 20px rgba(0, 0, 0, 0.15);
    --shadow-collapse-button-hover: 0 1px 3px rgba(51, 51, 51, 0.2);

    /* Overlays & Borders */
    --color-overlay-white: rgba(255, 255, 255, 0.15);
    --color-overlay-border: rgba(200, 200, 200, 0.5); /* Light gray border overlay */
    --color-overlay-dark: rgba(0, 0, 0, 0.7);
    --color-overlay-drawer: rgba(0, 0, 0, 0.4);
    --color-border-light: rgba(0, 0, 0, 0.08); /* Very faint border */

    /* Status Backgrounds */
    --color-positive-bg-light: rgba(96, 125, 139, 0.1); /* Based on highlight color */
    --color-positive-bg-strong: rgba(96, 125, 139, 0.2);
    --color-negative-bg-light: rgba(176, 0, 32, 0.1); /* Based on warning color */
    --color-negative-bg-strong: rgba(176, 0, 32, 0.2);
}

/* 13. Natural Green */
.theme-natural-green {
    --color-background: #fff;
    --color-text-primary: #333;
    --color-disabled: #f5f5f5;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(47, 152, 92, 0.15);

    /* Main Background & Cards */
    --color-background-main: #F7F9F7;
    --color-card-background: #FFFFFF;
    --panel-bg-primary: #FFFFFF;
    --color-surface-subtle: rgba(47, 152, 92, 0.08);

    /* Primary Text & Dark Elements */
    --color-text-dark: #2D342F;
    --color-primary-accent: #3D4F44;
    --color-primary-accent-hover: #2F985C;

    /* Highlight/Interactive Color - Forest Green */
    --color-highlight: #2F985C;
    --color-highlight-text: #FFFFFF;

    /* Status & Borders */
    --color-border-light: rgba(47, 152, 92, 0.15);
    --color-positive-bg-light: rgba(47, 152, 92, 0.1);
    --color-positive-bg-strong: rgba(47, 152, 92, 0.2);
    
    /* Inherited from Neutral */
    --color-secondary-accent: #AAAAAA;
    --color-text-light: #FFFFFF;
    --color-warning-error: #B00020;
    --box-shadow-panel: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
    --shadow-card-main: 0 4px 16px rgba(47, 152, 92, 0.08);
}

/* 14. Natural Blue */
.theme-natural-blue {
    --color-background: #fff;
    --color-text-primary: #333;
    --color-disabled: #f5f5f5;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(47, 85, 151, 0.15);

    /* Main Background & Cards */
    --color-background-main: #F6F8FA;
    --color-card-background: #FFFFFF;
    --panel-bg-primary: #FFFFFF;
    --color-surface-subtle: rgba(47, 85, 151, 0.08);

    /* Primary Text & Dark Elements */
    --color-text-dark: #2F353D;
    --color-primary-accent: #3D4759;
    --color-primary-accent-hover: #2F5597;

    /* Highlight/Interactive Color - Deep Blue */
    --color-highlight: #2F5597;
    --color-highlight-text: #FFFFFF;

    /* Status & Borders */
    --color-border-light: rgba(47, 85, 151, 0.15);
    --color-positive-bg-light: rgba(47, 85, 151, 0.1);
    --color-positive-bg-strong: rgba(47, 85, 151, 0.2);

    /* Inherited from Neutral */
    --color-secondary-accent: #AAAAAA;
    --color-text-light: #FFFFFF;
    --color-warning-error: #B00020;
    --box-shadow-panel: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
    --shadow-card-main: 0 4px 16px rgba(47, 85, 151, 0.08);
}

/* 15. Natural Red */
.theme-natural-red {
    --color-background: #fff;
    --color-text-primary: #333;
    --color-disabled: #f5f5f5;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(176, 47, 47, 0.15);

    /* Main Background & Cards */
    --color-background-main: #FAF7F7;
    --color-card-background: #FFFFFF;
    --panel-bg-primary: #FFFFFF;
    --color-surface-subtle: rgba(176, 47, 47, 0.06);

    /* Primary Text & Dark Elements */
    --color-text-dark: #3D2F2F;
    --color-primary-accent: #be7979;
    --color-primary-accent-hover: #F87171;

    /* Highlight/Interactive Color - Muted Crimson */
    --color-highlight: #c97070;;
    --color-highlight-text: #FFFFFF;

    /* Status & Borders */
    --color-border-light: rgba(176, 47, 47, 0.15);
    --color-positive-bg-light: rgba(176, 47, 47, 0.08);
    --color-positive-bg-strong: rgba(176, 47, 47, 0.15);

    /* Inherited from Neutral */
    --color-secondary-accent: #AAAAAA;
    --color-text-light: #FFFFFF;
    --color-warning-error: #B00020;
    --box-shadow-panel: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
    --shadow-card-main: 0 4px 16px rgba(176, 47, 47, 0.08);
}
/* ============================================================
   NATURAL DARK THEMES (16-19) - "MID-TONE" DARK MODE
   ============================================================ */

/* 16. Natural Dark Green (from 13) */
.theme-natural-dark-green {
    --color-background: #3A3D3A;
    --color-text-primary: #E8EBE8;
    --color-disabled: #464A46;
    --color-text-secondary: #B0B5B0;
    --shadow-input: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-input-focus: 0 0 8px rgba(74, 222, 128, 0.3);
    --color-background-main: #2E312E; /* Lighter Stone Green */
    --color-card-background: #3D413D;
    --panel-bg-primary: #3D413D;
    --color-surface-subtle: rgba(74, 222, 128, 0.12);
    --color-text-dark: #FFFFFF;
    --color-primary-accent: #BCC2BC;
    --color-primary-accent-hover: #4ADE80;
    --color-highlight: #4ADE80; 
    --color-highlight-text: #1C1E1C;
    --color-border-light: rgba(255, 255, 255, 0.1);
    --box-shadow-panel: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* 17. Natural Dark Blue (from 14) */
.theme-natural-dark-blue {
    --color-background: #3A3D42;
    --color-text-primary: #E8EAF0;
    --color-disabled: #464B52;
    --color-text-secondary: #B0B6C0;
    --shadow-input: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-input-focus: 0 0 8px rgba(96, 165, 250, 0.3);
    --color-background-main: #2E3238; /* Lighter Stone Blue */
    --color-card-background: #3D424A;
    --panel-bg-primary: #3D424A;
    --color-surface-subtle: rgba(96, 165, 250, 0.12);
    --color-text-dark: #FFFFFF;
    --color-primary-accent: #BCC1CA;
    --color-primary-accent-hover: #60A5FA;
    --color-highlight: #60A5FA;
    --color-highlight-text: #1C1F23;
    --color-border-light: rgba(255, 255, 255, 0.1);
    --box-shadow-panel: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* 18. Natural Dark Red (from 15) */
.theme-natural-dark-red {
    --color-background: #423A3A;
    --color-text-primary: #F0E8E8;
    --color-disabled: #524646;
    --color-text-secondary: #C0B0B0;
    --shadow-input: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-input-focus: 0 0 8px rgba(248, 113, 113, 0.3);
    --color-background-main: #382E2E; /* Lighter Stone Red */
    --color-card-background: #4A3D3D;
    --panel-bg-primary: #4A3D3D;
    --color-surface-subtle: rgba(248, 113, 113, 0.12);
    --color-text-dark: #FFFFFF;
    --color-primary-accent: #CABCBF;
    --color-primary-accent-hover: #F87171;
    --color-highlight: #c97070;
    --color-highlight-text: #231C1C;
    --color-border-light: rgba(255, 255, 255, 0.1);
    --box-shadow-panel: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* 19. Natural Dark Neutral (from 12) */
.theme-natural-dark-neutral {
    --color-background: #3D3D3D;
    --color-text-primary: #F0F0F0;
    --color-disabled: #4A4A4A;
    --color-text-secondary: #B0B0B0;
    --shadow-input: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-input-focus: 0 0 8px rgba(255, 255, 255, 0.15);
    --color-background-main: #333333; /* Mid-gray Stone */
    --color-card-background: #444444;
    --panel-bg-primary: #444444;
    --color-surface-subtle: rgba(255, 255, 255, 0.08);
    --color-text-dark: #FFFFFF;
    --color-primary-accent: #CCCCCC;
    --color-primary-accent-hover: #FFFFFF;
    --color-highlight: #90A4AE; 
    --color-highlight-text: #1F1F1F;
    --color-border-light: rgba(255, 255, 255, 0.1);
    --box-shadow-panel: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* 20. Natural Teal (Light) */
.theme-natural-teal {
    --color-background: #fff;
    --color-text-primary: #333;
    --color-disabled: #f5f5f5;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(20, 184, 166, 0.15);
    --color-background-main: #F7F9F9;
    --color-card-background: #FFFFFF;
    --panel-bg-primary: #FFFFFF;
    --color-surface-subtle: rgba(20, 184, 166, 0.08);
    --color-text-dark: #1A2E2C;
    --color-primary-accent: #334D4A;
    --color-primary-accent-hover: #14B8A6;
    --color-highlight: #14B8A6;
    --color-highlight-text: #FFFFFF;
    --color-border-light: rgba(20, 184, 166, 0.15);
    --box-shadow-panel: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
    --shadow-card-main: 0 4px 16px rgba(20, 184, 166, 0.08);
}

/* 21. Natural Dark Teal (Dark) */
.theme-natural-dark-teal {
    --color-background: #3A4241;
    --color-text-primary: #E8F0EF;
    --color-disabled: #444D4C;
    --color-text-secondary: #A5B8B6;
    --shadow-input: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-input-focus: 0 0 8px rgba(45, 212, 191, 0.3);
    --color-background-main: #2E3837; 
    --color-card-background: #3D4A48;
    --panel-bg-primary: #3D4A48;
    --color-surface-subtle: rgba(45, 212, 191, 0.12);
    --color-text-dark: #FFFFFF;
    --color-primary-accent: #ABC2C0;
    --color-primary-accent-hover: #2DD4BF;
    --color-highlight: #2DD4BF;
    --color-highlight-text: #162322;
    --color-border-light: rgba(255, 255, 255, 0.1);
    --box-shadow-panel: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* 22. Natural Gold (Light) */
.theme-natural-gold {
    --color-background: #fff;
    --color-text-primary: #333;
    --color-disabled: #f5f5f5;
    --color-text-secondary: #aaa;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 2px 8px rgba(181, 147, 63, 0.15);
    --color-background-main: #FAF9F5;
    --color-card-background: #FFFFFF;
    --panel-bg-primary: #FFFFFF;
    --color-surface-subtle: rgba(181, 147, 63, 0.08);
    --color-text-dark: #3D3522;
    --color-primary-accent: #594F33;
    --color-primary-accent-hover: #B5933F;
    --color-highlight: #B5933F;
    --color-highlight-text: #FFFFFF;
    --color-border-light: rgba(181, 147, 63, 0.15);
    --box-shadow-panel: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
    --shadow-card-main: 0 4px 16px rgba(181, 147, 63, 0.08);
}

/* 23. Natural Dark Gold (Dark) */
.theme-natural-dark-gold {
    --color-background: #42403A;
    --color-text-primary: #F0EEE8;
    --color-disabled: #4D4A44;
    --color-text-secondary: #B8B5A5;
    --shadow-input: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-input-focus: 0 0 8px rgba(250, 204, 21, 0.3);
    --color-background-main: #38362E; 
    --color-card-background: #4A473D;
    --panel-bg-primary: #4A473D;
    --color-surface-subtle: rgba(250, 204, 21, 0.12);
    --color-text-dark: #FFFFFF;
    --color-primary-accent: #C2BFAB;
    --color-primary-accent-hover: #FACC15;
    --color-highlight: #FACC15;
    --color-highlight-text: #232116;
    --color-border-light: rgba(255, 255, 255, 0.1);
    --box-shadow-panel: 0 4px 15px rgba(0, 0, 0, 0.25);
}