/* DynamicGUI Design Tokens — DynamicGUI Custom Theme System */

:root,
html.theme-default {
    --ui-font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    /* Shared type for widget chrome (labels, inputs, buttons, section titles) */
    --ui-widget-font-size: 13.6px;
    --ui-widget-font-weight: 400;
    --ui-bg: #f8fafc;
    --ui-panel-bg: #ffffff;
    --ui-dialog-bg: #ffffff;
    --ui-dialog-header-bg: #f1f5f9;
    --ui-dialog-header-text: #0f172a;
    --ui-border: #cbd5e1;
    --ui-text-main: #0f172a;
    --ui-text-muted: #475569;
    --ui-text-heading: #0f172a;
    --ui-input-bg: #ffffff;
    --ui-input-border: #d1d5db;
    --ui-input-text: #0f172a;
    --ui-input-focus-border: #3b82f6;
    --ui-btn-bg: #ffffff;
    --ui-btn-border: #d1d5db;
    --ui-btn-text: #374151;
    --ui-btn-hover: #f9fafb;
    --ui-tool-hover: #f1f5f9;
    --ui-tab-active-bg: #ffffff;
    --ui-tab-active-border: #3b82f6;
    --ui-tab-active-text: #0f172a;
    --ui-tab-inactive-bg: #f8fafc;
    --ui-tab-inactive-text: #64748b;
    --ui-canvas-bg: #f8fafc;
    --ui-grid-dot: #94a3b8;
    --ui-grid-line: #cbd5e1;
    --ui-accent: #2563eb;
    --ui-accent-hover: #1d4ed8;
    --ui-accent-text: #ffffff;
    --ui-accent-danger: #dc2626;
    --ui-accent-danger-hover: #b91c1c;
    --ui-econ-income: #059669;
    --ui-econ-cost: #dc2626;
    --ui-header-bg: var(--ui-panel-bg);
    --ui-header-text: var(--ui-text-main);
    --ui-sidebar-bg: var(--ui-panel-bg);
    --ui-sidebar-text: var(--ui-text-main);
    --ui-sidebar-hover: var(--ui-tool-hover);
    --ui-sidebar-active-bg: var(--ui-btn-bg);
    --ui-sidebar-active-text: var(--ui-text-main);
    --ui-status-bg: rgba(255, 255, 255, 0.92);

    /* Custom widget & Component specific tokens */
    --ui-stroke: #374151;
    --ui-stroke-light: #6b7280;
    --ui-fill-light: #f3f4f6;
    --ui-fill-medium: #e5e7eb;
    --ui-active: #10b981;
    --ui-active-light: #d1fae5;
    --ui-inactive: #ef4444;
    --ui-water: #3b82f6;
    --ui-text-on-water: #ffffff;
    --ui-text-primary: var(--ui-text-main);
    --ui-bg-panel: var(--ui-panel-bg);
    --ui-pump-fill: #ecfeff;
    --ui-pump-stroke: #0891b2;
    --ui-turbine-fill: #f5f3ff;
    --ui-turbine-stroke: #7c3aed;
    --ui-accent-blue: #3b82f6;
    --ui-accent-red: #ef4444;
    --ui-accent-yellow: #f59e0b;
    --ui-accent-yellow-light: #fef3c7;
    --ui-pipe: #475569;
    --ui-pipe-selected: #2563eb;
    --ui-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    /* Unified Modal Design Tokens */
    --ui-modal-border-width: 1px;
    --ui-modal-border-style: solid;
    --ui-modal-border-color: var(--ui-border);
    --ui-modal-border: var(--ui-modal-border-width) var(--ui-modal-border-style) var(--ui-modal-border-color);
    --ui-modal-border-radius: 12px;
    --ui-modal-shadow: var(--ui-shadow);
}


html.dark {
    --ui-bg: #0f172a;
    --ui-panel-bg: #1e293b;
    --ui-dialog-bg: #1e293b;
    --ui-dialog-header-bg: #0f172a;
    --ui-dialog-header-text: #f8fafc;
    --ui-border: #334155;
    --ui-text-main: #f8fafc;
    --ui-text-muted: #94a3b8;
    --ui-text-heading: #f8fafc;
    --ui-input-bg: #0f172a;
    --ui-input-border: #475569;
    --ui-input-text: #f8fafc;
    --ui-input-focus-border: #3b82f6;
    --ui-btn-bg: #334155;
    --ui-btn-border: #475569;
    --ui-btn-text: #f8fafc;
    --ui-btn-hover: #475569;
    --ui-tool-hover: #334155;
    --ui-tab-active-bg: #1e293b;
    --ui-tab-active-border: #38bdf8;
    --ui-tab-active-text: #f8fafc;
    --ui-tab-inactive-bg: #0f172a;
    --ui-tab-inactive-text: #94a3b8;
    --ui-canvas-bg: #0f172a;
    --ui-grid-dot: #334155;
    --ui-grid-line: #334155;
    --ui-accent: #3b82f6;
    --ui-accent-hover: #2563eb;
    --ui-accent-danger: #ef4444;
    --ui-accent-danger-hover: #fca5a5;
    --ui-econ-income: #34d399;
    --ui-econ-cost: #f87171;
    --ui-header-bg: var(--ui-panel-bg);
    --ui-header-text: var(--ui-text-main);
    --ui-sidebar-bg: var(--ui-panel-bg);
    --ui-sidebar-text: var(--ui-text-main);
    --ui-status-bg: rgba(30, 41, 59, 0.92);

    /* Custom widget & Component specific tokens */
    --ui-stroke: #94a3b8;
    --ui-stroke-light: #475569;
    --ui-fill-light: #1e293b;
    --ui-fill-medium: #334155;
    --ui-active: #10b981;
    --ui-active-light: rgba(16, 185, 129, 0.2);
    --ui-inactive: #ef4444;
    --ui-water: #60a5fa;
    --ui-text-on-water: #0f172a;
    --ui-text-primary: var(--ui-text-main);
    --ui-bg-panel: var(--ui-panel-bg);
    --ui-pump-fill: rgba(34, 211, 238, 0.1);
    --ui-pump-stroke: #22d3ee;
    --ui-turbine-fill: rgba(167, 139, 250, 0.1);
    --ui-turbine-stroke: #a78bfa;
    --ui-accent-blue: #60a5fa;
    --ui-accent-red: #f87171;
    --ui-accent-yellow: #fbbf24;
    --ui-accent-yellow-light: rgba(251, 191, 36, 0.2);
    --ui-pipe: #64748b;
    --ui-pipe-selected: #38bdf8;
    --ui-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
}

html.theme-stream1d {
    --ui-bg: #f0f4f8;
    --ui-panel-bg: rgba(255, 255, 255, 0.85);
    --ui-dialog-header-bg: rgba(231, 236, 239, 0.95);
    --ui-dialog-header-text: #274c77;
    --ui-border: #a3cef1;
    --ui-text-main: #274c77;
    --ui-text-muted: #334155;
    --ui-text-heading: #274c77;
    --ui-input-bg: #ffffff;
    --ui-input-border: #a3cef1;
    --ui-input-text: #274c77;
    --ui-input-focus-border: #0369a1;
    --ui-btn-bg: #e7ecef;
    --ui-btn-border: #a3cef1;
    --ui-btn-text: #274c77;
    --ui-btn-hover: rgba(163, 206, 241, 0.2);
    --ui-tool-hover: rgba(163, 206, 241, 0.2);
    --ui-tab-active-border: #0369a1;
    --ui-canvas-bg: #f0f4f8;
    --ui-accent: #274c77;
    --ui-accent-hover: #1e3a5f;
    --ui-header-bg: #274c77;
    --ui-header-text: #e0f2fe;
    --ui-sidebar-bg: #e7ecef;
    --ui-sidebar-text: #274c77;
    --ui-sidebar-active-bg: #274c77;
    --ui-sidebar-active-text: #e0f2fe;

    /* Custom widget & Component specific tokens */
    --ui-stroke: #274c77;
    --ui-stroke-light: #6096ba;
    --ui-fill-light: #f0f4f8;
    --ui-fill-medium: #e7ecef;
    --ui-active: #0096c7;
    --ui-active-light: #cbd5e1;
    --ui-inactive: #d90429;
    --ui-water: #0077b6;
    --ui-text-on-water: #ffffff;
    --ui-text-primary: var(--ui-text-main);
    --ui-bg-panel: var(--ui-panel-bg);
    --ui-pump-fill: #e8f1f5;
    --ui-pump-stroke: #0077b6;
    --ui-turbine-fill: #f0f4f8;
    --ui-turbine-stroke: #274c77;
    --ui-accent-blue: #0077b6;
    --ui-accent-red: #d90429;
    --ui-accent-yellow: #f39c12;
    --ui-accent-yellow-light: #fcf3cf;
    --ui-pipe: #6096ba;
    --ui-pipe-selected: #0077b6;
    --ui-shadow: 0 4px 6px -1px rgba(39, 76, 119, 0.1);
}

html.theme-stream1d.dark {
    --ui-bg: #0b132b;
    --ui-panel-bg: #1c2541;
    --ui-dialog-header-bg: #0b132b;
    --ui-dialog-header-text: #e0f2fe;
    --ui-border: #3a506b;
    --ui-text-main: #e0f2fe;
    --ui-text-muted: #94a3b8;
    --ui-text-heading: #38bdf8;
    --ui-input-bg: #0b132b;
    --ui-input-border: #3a506b;
    --ui-input-text: #e0f2fe;
    --ui-input-focus-border: #00b4d8;
    --ui-btn-bg: #1c2541;
    --ui-btn-border: #3a506b;
    --ui-btn-text: #e0f2fe;
    --ui-btn-hover: #0b132b;
    --ui-tool-hover: #1c2541;
    --ui-tab-active-border: #00b4d8;
    --ui-canvas-bg: #0b132b;
    --ui-grid-dot: #1c2541;
    --ui-accent: #38bdf8;
    --ui-accent-hover: #0284c7;
    --ui-header-bg: #0b132b;
    --ui-header-text: #e0f2fe;
    --ui-sidebar-bg: #1c2541;
    --ui-sidebar-text: #e0f2fe;
    --ui-sidebar-active-bg: #38bdf8;
    --ui-sidebar-active-text: #0b132b;
    --ui-status-bg: rgba(28, 37, 65, 0.92);

    /* Custom widget & Component specific tokens */
    --ui-stroke: #3a506b;
    --ui-stroke-light: #5c7aff;
    --ui-fill-light: #0b132b;
    --ui-fill-medium: #1c2541;
    --ui-active: #00b4d8;
    --ui-active-light: rgba(0, 180, 216, 0.2);
    --ui-inactive: #ef4444;
    --ui-water: #90e0ef;
    --ui-text-on-water: #0b132b;
    --ui-text-primary: var(--ui-text-main);
    --ui-bg-panel: var(--ui-panel-bg);
    --ui-pump-fill: rgba(144, 224, 239, 0.1);
    --ui-pump-stroke: #90e0ef;
    --ui-turbine-fill: rgba(114, 9, 183, 0.1);
    --ui-turbine-stroke: #a78bfa;
    --ui-accent-blue: #90e0ef;
    --ui-accent-red: #ef4444;
    --ui-accent-yellow: #f39c12;
    --ui-accent-yellow-light: rgba(243, 156, 18, 0.2);
    --ui-pipe: #3a506b;
    --ui-pipe-selected: #00b4d8;
    --ui-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
}

html.theme-nationalpark {
    --ui-bg: #fefae0;
    --ui-panel-bg: #fefae0;
    --ui-border: #dda15e;
    --ui-text-main: #283618;
    --ui-text-muted: #606c38;
    --ui-text-heading: #283618;
    --ui-input-bg: #fffef2;
    --ui-input-border: #dda15e;
    --ui-input-text: #283618;
    --ui-input-focus-border: #606c38;
    --ui-btn-bg: #fefae0;
    --ui-btn-border: #dda15e;
    --ui-btn-text: #283618;
    --ui-btn-hover: rgba(221, 161, 94, 0.2);
    --ui-tool-hover: rgba(96, 108, 56, 0.15);
    --ui-canvas-bg: #fefae0;
    --ui-grid-dot: #bc6c25;
    --ui-accent: #bc6c25;
    --ui-accent-hover: #a0561d;
    --ui-header-bg: #283618;
    --ui-header-text: #fefae0;
    --ui-sidebar-bg: #ccd5ae;
    --ui-sidebar-text: #283618;
    --ui-sidebar-active-bg: #283618;
    --ui-sidebar-active-text: #fefae0;

    /* Custom widget & Component specific tokens */
    --ui-stroke: #283618;
    --ui-stroke-light: #606c38;
    --ui-fill-light: #fefae0;
    --ui-fill-medium: #dda15e;
    --ui-active: #606c38;
    --ui-active-light: #fefae0;
    --ui-inactive: #bc6c25;
    --ui-water: #3b82f6;
    --ui-text-on-water: #ffffff;
    --ui-text-primary: var(--ui-text-main);
    --ui-bg-panel: var(--ui-panel-bg);
    --ui-pump-fill: #fefae0;
    --ui-pump-stroke: #283618;
    --ui-turbine-fill: #fefae0;
    --ui-turbine-stroke: #bc6c25;
    --ui-accent-blue: #3b82f6;
    --ui-accent-red: #bc6c25;
    --ui-accent-yellow: #f39c12;
    --ui-accent-yellow-light: #fcf3cf;
    --ui-pipe: #606c38;
    --ui-pipe-selected: #bc6c25;
    --ui-shadow: 0 4px 6px -1px rgba(40, 54, 24, 0.1);
}

html.theme-nationalpark.dark {
    --ui-bg: #141d0f;
    --ui-panel-bg: #1c2815;
    --ui-border: #606c38;
    --ui-text-main: #fefae0;
    --ui-text-muted: #dda15e;
    --ui-text-heading: #dda15e;
    --ui-input-bg: #141d0f;
    --ui-input-border: #606c38;
    --ui-input-text: #fefae0;
    --ui-canvas-bg: #141d0f;
    --ui-accent: #dda15e;
    --ui-header-bg: #283618;
    --ui-header-text: #fefae0;
    --ui-sidebar-bg: #1c2815;
    --ui-sidebar-text: #fefae0;

    /* Custom widget & Component specific tokens */
    --ui-stroke: #dda15e;
    --ui-stroke-light: #606c38;
    --ui-fill-light: #141d0f;
    --ui-fill-medium: #1c2815;
    --ui-active: #606c38;
    --ui-active-light: rgba(96, 108, 56, 0.2);
    --ui-inactive: #bc6c25;
    --ui-water: #60a5fa;
    --ui-text-on-water: #141d0f;
    --ui-text-primary: var(--ui-text-main);
    --ui-bg-panel: var(--ui-panel-bg);
    --ui-pump-fill: rgba(221, 161, 94, 0.1);
    --ui-pump-stroke: #dda15e;
    --ui-turbine-fill: rgba(188, 108, 37, 0.1);
    --ui-turbine-stroke: #bc6c25;
    --ui-accent-blue: #60a5fa;
    --ui-accent-red: #bc6c25;
    --ui-accent-yellow: #f39c12;
    --ui-accent-yellow-light: rgba(243, 156, 18, 0.2);
    --ui-pipe: #606c38;
    --ui-pipe-selected: #dda15e;
    --ui-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
}

/* Additional theme presets (moved from custom.css so tokens.css is complete) */

html.theme-forestbath {
    --ui-bg: #f2e8cf;
    --ui-panel-bg: #f2e8cf;
    --ui-dialog-bg: #f2e8cf;
    --ui-dialog-header-bg: #6a994e;
    --ui-dialog-header-text: #ffffff;
    --ui-border: #a7c957;
    --ui-text-main: #386641;
    --ui-text-muted: #3f5e30;
    --ui-text-heading: #386641;
    --ui-input-bg: #faf6eb;
    --ui-input-border: #a7c957;
    --ui-input-text: #386641;
    --ui-input-focus-border: #6a994e;
    --ui-btn-bg: #f2e8cf;
    --ui-btn-border: #a7c957;
    --ui-btn-text: #386641;
    --ui-btn-hover: rgba(106, 153, 78, 0.2);
    --ui-tool-hover: rgba(56, 102, 65, 0.15);
    --ui-ctx-bg: #faf6eb;
    --ui-ctx-border: #a7c957;
    --ui-ctx-text: #386641;
    --ui-ctx-hover: rgba(106, 153, 78, 0.15);
    --ui-tab-active-bg: #faf6eb;
    --ui-tab-active-border: #bc4749;
    --ui-tab-active-text: #386641;
    --ui-tab-inactive-bg: rgba(106, 153, 78, 0.1);
    --ui-tab-inactive-text: #6a994e;
    --ui-tab-inactive-opacity: 1.0;
    --ui-canvas-bg: #f2e8cf;
    --ui-grid-dot: #bc4749;
    --ui-grid-line: #a7c957;
    --ui-weather-hud-bg: rgba(242, 232, 207, 0.9);
    --ui-weather-hud-hover: rgba(106, 153, 78, 0.2);
    --ui-accent: #bc4749;
    --ui-accent-hover: #9a3536;
    --ui-accent-danger: #bc4749;
    --ui-accent-danger-hover: #9a3536;
    --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.12);
    --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.25);
    --ui-accent-danger-text-subtle: #bc4749;

    /* Layout Framing variables */
    --ui-header-bg: #386641;
    --ui-header-text: #f2e8cf;
    --ui-sidebar-bg: #a7c957;
    --ui-sidebar-text: #386641;
    --ui-sidebar-hover: rgba(56, 102, 65, 0.08);
    --ui-sidebar-active-bg: #386641;
    --ui-sidebar-active-text: #f2e8cf;
}

html.theme-forestbath.dark {
    --ui-bg: #142016;
    --ui-panel-bg: #1a2c1f;
    --ui-dialog-bg: #1a2c1f;
    --ui-dialog-header-bg: #6a994e;
    --ui-dialog-header-text: #ffffff;
    --ui-border: #386641;
    --ui-text-main: #f2e8cf;
    --ui-text-muted: #a7c957;
    --ui-text-heading: #a7c957;
    --ui-input-bg: #142016;
    --ui-input-border: #386641;
    --ui-input-text: #f2e8cf;
    --ui-input-focus-border: #a7c957;
    --ui-btn-bg: #1a2c1f;
    --ui-btn-border: #386641;
    --ui-btn-text: #f2e8cf;
    --ui-btn-hover: #386641;
    --ui-tool-hover: #386641;
    --ui-ctx-bg: #1a2c1f;
    --ui-ctx-border: #386641;
    --ui-ctx-text: #f2e8cf;
    --ui-ctx-hover: #386641;
    --ui-tab-active-bg: #1a2c1f;
    --ui-tab-active-border: #bc4749;
    --ui-tab-active-text: #f2e8cf;
    --ui-tab-inactive-bg: #142016;
    --ui-tab-inactive-text: #a7c957;
    --ui-tab-inactive-opacity: 0.6;
    --ui-canvas-bg: #142016;
    --ui-grid-dot: #bc4749;
    --ui-grid-line: #386641;
    --ui-weather-hud-bg: rgba(26, 44, 31, 0.9);
    --ui-weather-hud-hover: rgba(56, 102, 65, 0.9);
    --ui-accent: #bc4749;
    --ui-accent-hover: #9a3536;
    --ui-accent-danger: #bc4749;
    --ui-accent-danger-hover: #9a3536;
    --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.15);
    --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.3);
    --ui-accent-danger-text-subtle: #f2e8cf;

    /* Layout Framing variables */
    --ui-header-bg: #142016;
    --ui-header-text: #f2e8cf;
    --ui-sidebar-bg: #386641;
    --ui-sidebar-text: #f2e8cf;
    --ui-sidebar-hover: rgba(167, 201, 87, 0.3);
    --ui-sidebar-active-bg: #a7c957;
    --ui-sidebar-active-text: #142016;

    /* SVG contrasting fills for Forest Bath dark */
    --svg-icon-fill-374151: #f2e8cf;
    --svg-icon-fill-64748b: #a7c957;
    --svg-icon-fill-F3F4F6: #1a2c1f;
    --svg-icon-fill-E5E7EB: #142016;
    --svg-icon-fill-3B82F6: #a7c957;
    --svg-icon-fill-DBEAFE: #386641;
    --svg-icon-stroke-2563EB: #a7c957;
    --svg-icon-fill-D1FAE5: #386641;
    --svg-icon-stroke-059669: #6a994e;
    --svg-icon-fill-FEE2E2: #bc4749;
    --svg-icon-stroke-DC2626: #a7c957;
    --svg-icon-fill-f8fafc: #142016;
}

html.theme-blackgold {
    --ui-bg: #e5e5e5;
    --ui-panel-bg: #ffffff;
    --ui-dialog-bg: #ffffff;
    --ui-dialog-header-bg: #14213d;
    --ui-dialog-header-text: #fca311;
    --ui-border: #cbd5e1;
    --ui-text-main: #14213d;
    --ui-text-muted: #64748b;
    --ui-text-heading: #14213d;
    --ui-input-bg: #f5f5f5;
    --ui-input-border: #cbd5e1;
    --ui-input-text: #14213d;
    --ui-input-focus-border: #fca311;
    --ui-btn-bg: #ffffff;
    --ui-btn-border: #cbd5e1;
    --ui-btn-text: #14213d;
    --ui-btn-hover: rgba(252, 163, 17, 0.15);
    --ui-tool-hover: rgba(20, 33, 61, 0.1);
    --ui-ctx-bg: #ffffff;
    --ui-ctx-border: #cbd5e1;
    --ui-ctx-text: #14213d;
    --ui-ctx-hover: rgba(252, 163, 17, 0.15);
    --ui-tab-active-bg: #ffffff;
    --ui-tab-active-border: #fca311;
    --ui-tab-active-text: #14213d;
    --ui-tab-inactive-bg: #e5e5e5;
    --ui-tab-inactive-text: #64748b;
    --ui-tab-inactive-opacity: 1.0;
    --ui-canvas-bg: #ffffff;
    --ui-grid-dot: #fca311;
    --ui-grid-line: #e5e5e5;
    --ui-weather-hud-bg: rgba(255, 255, 255, 0.9);
    --ui-weather-hud-hover: rgba(252, 163, 17, 0.2);
    --ui-accent: #fca311;
    --ui-accent-hover: #e59200;
    --ui-accent-text: #14213d;
    --ui-accent-text-hover: #ffffff;
    --ui-accent-danger: #bc4749;
    --ui-accent-danger-hover: #9a3536;
    --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.12);
    --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.25);
    --ui-accent-danger-text-subtle: #bc4749;

    /* Layout Framing variables */
    --ui-header-bg: #14213d;
    --ui-header-text: #fca311;
    --ui-sidebar-bg: #e5e5e5;
    --ui-sidebar-text: #14213d;
    --ui-sidebar-hover: rgba(20, 33, 61, 0.08);
    --ui-sidebar-active-bg: #14213d;
    --ui-sidebar-active-text: #fca311;
}

html.theme-blackgold.dark {
    --ui-bg: #000000;
    --ui-panel-bg: #14213d;
    --ui-dialog-bg: #14213d;
    --ui-dialog-header-bg: #000000;
    --ui-dialog-header-text: #fca311;
    --ui-border: #334155;
    --ui-text-main: #e5e5e5;
    --ui-text-muted: #94a3b8;
    --ui-text-heading: #fca311;
    --ui-input-bg: #000000;
    --ui-input-border: #334155;
    --ui-input-text: #e5e5e5;
    --ui-input-focus-border: #fca311;
    --ui-btn-bg: #14213d;
    --ui-btn-border: #334155;
    --ui-btn-text: #e5e5e5;
    --ui-btn-hover: #000000;
    --ui-tool-hover: #000000;
    --ui-ctx-bg: #14213d;
    --ui-ctx-border: #334155;
    --ui-ctx-text: #e5e5e5;
    --ui-ctx-hover: #000000;
    --ui-tab-active-bg: #14213d;
    --ui-tab-active-border: #fca311;
    --ui-tab-active-text: #e5e5e5;
    --ui-tab-inactive-bg: #000000;
    --ui-tab-inactive-text: #94a3b8;
    --ui-tab-inactive-opacity: 0.6;
    --ui-canvas-bg: #000000;
    --ui-grid-dot: #fca311;
    --ui-grid-line: #14213d;
    --ui-weather-hud-bg: rgba(20, 33, 61, 0.9);
    --ui-weather-hud-hover: rgba(0, 0, 0, 0.9);
    --ui-accent: #fca311;
    --ui-accent-hover: #e59200;
    --ui-accent-text: #000000;
    --ui-accent-text-hover: #000000;
    --ui-accent-danger: #bc4749;
    --ui-accent-danger-hover: #9a3536;
    --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.15);
    --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.3);
    --ui-accent-danger-text-subtle: #f2e8cf;

    /* Layout Framing variables */
    --ui-header-bg: #000000;
    --ui-header-text: #fca311;
    --ui-sidebar-bg: #14213d;
    --ui-sidebar-text: #e5e5e5;
    --ui-sidebar-hover: rgba(252, 163, 17, 0.15);
    --ui-sidebar-active-bg: #000000;
    --ui-sidebar-active-text: #fca311;

    /* SVG contrasting fills for Black Gold dark */
    --svg-icon-fill-374151: #e5e5e5;
    --svg-icon-fill-64748b: #fca311;
    --svg-icon-fill-F3F4F6: #14213d;
    --svg-icon-fill-E5E7EB: #000000;
    --svg-icon-fill-3B82F6: #fca311;
    --svg-icon-fill-DBEAFE: #14213d;
    --svg-icon-stroke-2563EB: #fca311;
    --svg-icon-fill-D1FAE5: #14213d;
    --svg-icon-stroke-059669: #fca311;
    --svg-icon-fill-FEE2E2: #bc4749;
    --svg-icon-stroke-DC2626: #fca311;
    --svg-icon-fill-f8fafc: #000000;
}

html.theme-mochalatte {
    --ui-bg: #f2f4f3;
    --ui-panel-bg: #ffffff;
    --ui-dialog-bg: #ffffff;
    --ui-dialog-header-bg: #5e503f;
    --ui-dialog-header-text: #f2f4f3;
    --ui-border: #a9927d;
    --ui-text-main: #5e503f;
    --ui-text-muted: #7a6655;
    --ui-text-heading: #5e503f;
    --ui-input-bg: #ffffff;
    --ui-input-border: #a9927d;
    --ui-input-text: #0a0908;
    --ui-input-focus-border: #22333b;
    --ui-btn-bg: #ffffff;
    --ui-btn-border: #a9927d;
    --ui-btn-text: #5e503f;
    --ui-btn-hover: rgba(169, 146, 125, 0.15);
    --ui-tool-hover: rgba(94, 80, 63, 0.1);
    --ui-ctx-bg: #ffffff;
    --ui-ctx-border: #a9927d;
    --ui-ctx-text: #0a0908;
    --ui-ctx-hover: rgba(169, 146, 125, 0.15);
    --ui-tab-active-bg: #ffffff;
    --ui-tab-active-border: #5e503f;
    --ui-tab-active-text: #0a0908;
    --ui-tab-inactive-bg: #f2f4f3;
    --ui-tab-inactive-text: #a9927d;
    --ui-tab-inactive-opacity: 1.0;
    --ui-canvas-bg: #f2f4f3;
    --ui-grid-dot: #a9927d;
    --ui-grid-line: rgba(169, 146, 125, 0.2);
    --ui-weather-hud-bg: rgba(242, 244, 243, 0.9);
    --ui-weather-hud-hover: rgba(169, 146, 125, 0.2);
    --ui-accent: #22333b;
    --ui-accent-hover: #0a0908;
    --ui-accent-danger: #bc4749;
    --ui-accent-danger-hover: #9a3536;
    --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.12);
    --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.25);
    --ui-accent-danger-text-subtle: #bc4749;

    /* Layout Framing variables */
    --ui-header-bg: #5e503f;
    --ui-header-text: #f2f4f3;
    --ui-sidebar-bg: #f2f4f3;
    --ui-sidebar-text: #5e503f;
    --ui-sidebar-hover: rgba(94, 80, 63, 0.08);
    --ui-sidebar-active-bg: #5e503f;
    --ui-sidebar-active-text: #f2f4f3;
}

html.theme-mochalatte.dark {
    --ui-bg: #0a0908;
    --ui-panel-bg: #22333b;
    --ui-dialog-bg: #22333b;
    --ui-dialog-header-bg: #0a0908;
    --ui-dialog-header-text: #a9927d;
    --ui-border: #5e503f;
    --ui-text-main: #f2f4f3;
    --ui-text-muted: #a9927d;
    --ui-text-heading: #a9927d;
    --ui-input-bg: #0a0908;
    --ui-input-border: #5e503f;
    --ui-input-text: #f2f4f3;
    --ui-input-focus-border: #a9927d;
    --ui-btn-bg: #22333b;
    --ui-btn-border: #5e503f;
    --ui-btn-text: #f2f4f3;
    --ui-btn-hover: #0a0908;
    --ui-tool-hover: #0a0908;
    --ui-ctx-bg: #22333b;
    --ui-ctx-border: #5e503f;
    --ui-ctx-text: #f2f4f3;
    --ui-ctx-hover: #0a0908;
    --ui-tab-active-bg: #22333b;
    --ui-tab-active-border: #a9927d;
    --ui-tab-active-text: #f2f4f3;
    --ui-tab-inactive-bg: #0a0908;
    --ui-tab-inactive-text: #a9927d;
    --ui-tab-inactive-opacity: 0.6;
    --ui-canvas-bg: #0a0908;
    --ui-grid-dot: #a9927d;
    --ui-grid-line: #22333b;
    --ui-weather-hud-bg: rgba(34, 51, 59, 0.9);
    --ui-weather-hud-hover: rgba(10, 9, 8, 0.9);
    --ui-accent: #a9927d;
    --ui-accent-hover: #f2f4f3;
    --ui-accent-text: #0a0908;
    --ui-accent-text-hover: #0a0908;
    --ui-accent-danger: #bc4749;
    --ui-accent-danger-hover: #9a3536;
    --ui-accent-danger-bg-subtle: rgba(188, 71, 73, 0.15);
    --ui-accent-danger-border-subtle: rgba(188, 71, 73, 0.3);
    --ui-accent-danger-text-subtle: #f2f4f3;

    /* Layout Framing variables */
    --ui-header-bg: #0a0908;
    --ui-header-text: #a9927d;
    --ui-sidebar-bg: #22333b;
    --ui-sidebar-text: #f2f4f3;
    --ui-sidebar-hover: rgba(169, 146, 125, 0.15);
    --ui-sidebar-active-bg: #0a0908;
    --ui-sidebar-active-text: #a9927d;

    /* SVG contrasting fills for Mocha Latte dark */
    --svg-icon-fill-374151: #f2f4f3;
    --svg-icon-fill-64748b: #a9927d;
    --svg-icon-fill-F3F4F6: #22333b;
    --svg-icon-fill-E5E7EB: #0a0908;
    --svg-icon-fill-3B82F6: #a9927d;
    --svg-icon-fill-DBEAFE: #22333b;
    --svg-icon-stroke-2563EB: #a9927d;
    --svg-icon-fill-D1FAE5: #22333b;
    --svg-icon-stroke-059669: #a9927d;
    --svg-icon-fill-FEE2E2: #5e503f;
    --svg-icon-stroke-DC2626: #a9927d;
    --svg-icon-fill-f8fafc: #0a0908;
}

html.theme-coastalvibes {
    --ui-bg: #e0fbfc;
    --ui-panel-bg: #ffffff;
    --ui-dialog-bg: #ffffff;
    --ui-dialog-header-bg: #3d5a80;
    --ui-dialog-header-text: #e0fbfc;
    --ui-border: #98c1d9;
    --ui-text-main: #293241;
    --ui-text-muted: #3d5a80;
    --ui-text-heading: #293241;
    --ui-input-bg: #ffffff;
    --ui-input-border: #98c1d9;
    --ui-input-text: #293241;
    --ui-input-focus-border: #ee6c4d;
    --ui-btn-bg: #ffffff;
    --ui-btn-border: #98c1d9;
    --ui-btn-text: #3d5a80;
    --ui-btn-hover: rgba(152, 193, 217, 0.15);
    --ui-tool-hover: rgba(61, 90, 128, 0.1);
    --ui-ctx-bg: #ffffff;
    --ui-ctx-border: #98c1d9;
    --ui-ctx-text: #293241;
    --ui-ctx-hover: rgba(152, 193, 217, 0.15);
    --ui-tab-active-bg: #ffffff;
    --ui-tab-active-border: #3d5a80;
    --ui-tab-active-text: #293241;
    --ui-tab-inactive-bg: #e0fbfc;
    --ui-tab-inactive-text: #98c1d9;
    --ui-tab-inactive-opacity: 1.0;
    --ui-canvas-bg: #e0fbfc;
    --ui-grid-dot: #98c1d9;
    --ui-grid-line: rgba(152, 193, 217, 0.2);
    --ui-weather-hud-bg: rgba(224, 251, 252, 0.9);
    --ui-weather-hud-hover: rgba(152, 193, 217, 0.2);
    --ui-accent: #3d5a80;
    --ui-accent-hover: #293241;
    --ui-accent-danger: #ee6c4d;
    --ui-accent-danger-hover: #d9583b;
    --ui-accent-danger-bg-subtle: rgba(238, 108, 77, 0.12);
    --ui-accent-danger-border-subtle: rgba(238, 108, 77, 0.25);
    --ui-accent-danger-text-subtle: #ee6c4d;

    /* Layout Framing variables */
    --ui-header-bg: #3d5a80;
    --ui-header-text: #e0fbfc;
    --ui-sidebar-bg: #e0fbfc;
    --ui-sidebar-text: #3d5a80;
    --ui-sidebar-hover: rgba(61, 90, 128, 0.08);
    --ui-sidebar-active-bg: #3d5a80;
    --ui-sidebar-active-text: #e0fbfc;
}

html.theme-coastalvibes.dark {
    --ui-bg: #293241;
    --ui-panel-bg: #3d5a80;
    --ui-dialog-bg: #3d5a80;
    --ui-dialog-header-bg: #293241;
    --ui-dialog-header-text: #98c1d9;
    --ui-border: #3d5a80;
    --ui-text-main: #e0fbfc;
    --ui-text-muted: #98c1d9;
    --ui-text-heading: #98c1d9;
    --ui-input-bg: #293241;
    --ui-input-border: #3d5a80;
    --ui-input-text: #e0fbfc;
    --ui-input-focus-border: #98c1d9;
    --ui-btn-bg: #3d5a80;
    --ui-btn-border: #293241;
    --ui-btn-text: #e0fbfc;
    --ui-btn-hover: #293241;
    --ui-tool-hover: #293241;
    --ui-ctx-bg: #3d5a80;
    --ui-ctx-border: #293241;
    --ui-ctx-text: #e0fbfc;
    --ui-ctx-hover: #293241;
    --ui-tab-active-bg: #3d5a80;
    --ui-tab-active-border: #98c1d9;
    --ui-tab-active-text: #e0fbfc;
    --ui-tab-inactive-bg: #293241;
    --ui-tab-inactive-text: #98c1d9;
    --ui-tab-inactive-opacity: 0.6;
    --ui-canvas-bg: #293241;
    --ui-grid-dot: #98c1d9;
    --ui-grid-line: #3d5a80;
    --ui-weather-hud-bg: rgba(61, 90, 128, 0.9);
    --ui-weather-hud-hover: rgba(41, 50, 65, 0.9);
    --ui-accent: #98c1d9;
    --ui-accent-hover: #e0fbfc;
    --ui-accent-text: #293241;
    --ui-accent-text-hover: #293241;
    --ui-accent-danger: #ee6c4d;
    --ui-accent-danger-hover: #f58d76;
    --ui-accent-danger-bg-subtle: rgba(238, 108, 77, 0.15);
    --ui-accent-danger-border-subtle: rgba(238, 108, 77, 0.3);
    --ui-accent-danger-text-subtle: #f58d76;

    /* Layout Framing variables */
    --ui-header-bg: #293241;
    --ui-header-text: #98c1d9;
    --ui-sidebar-bg: #3d5a80;
    --ui-sidebar-text: #e0fbfc;
    --ui-sidebar-hover: rgba(152, 193, 217, 0.15);
    --ui-sidebar-active-bg: #293241;
    --ui-sidebar-active-text: #98c1d9;

    /* SVG contrasting fills for Coastal Vibes dark */
    --svg-icon-fill-374151: #e0fbfc;
    --svg-icon-fill-64748b: #98c1d9;
    --svg-icon-fill-F3F4F6: #3d5a80;
    --svg-icon-fill-E5E7EB: #293241;
    --svg-icon-fill-3B82F6: #98c1d9;
    --svg-icon-fill-DBEAFE: #3d5a80;
    --svg-icon-stroke-2563EB: #98c1d9;
    --svg-icon-fill-D1FAE5: #3d5a80;
    --svg-icon-stroke-059669: #98c1d9;
    --svg-icon-fill-FEE2E2: #ee6c4d;
    --svg-icon-stroke-DC2626: #98c1d9;
    --svg-icon-fill-f8fafc: #293241;
}

html.theme-rusticcharm {
    --ui-bg: #fffcf2;
    --ui-panel-bg: #ffffff;
    --ui-dialog-bg: #ffffff;
    --ui-dialog-header-bg: #403d39;
    --ui-dialog-header-text: #fffcf2;
    --ui-border: #ccc5b9;
    --ui-text-main: #252422;
    --ui-text-muted: #7a7368;
    --ui-text-heading: #252422;
    --ui-input-bg: #ffffff;
    --ui-input-border: #ccc5b9;
    --ui-input-text: #252422;
    --ui-input-focus-border: #eb5e28;
    --ui-btn-bg: #ffffff;
    --ui-btn-border: #ccc5b9;
    --ui-btn-text: #403d39;
    --ui-btn-hover: rgba(204, 197, 185, 0.2);
    --ui-tool-hover: rgba(64, 61, 57, 0.08);
    --ui-ctx-bg: #ffffff;
    --ui-ctx-border: #ccc5b9;
    --ui-ctx-text: #252422;
    --ui-ctx-hover: rgba(204, 197, 185, 0.2);
    --ui-tab-active-bg: #ffffff;
    --ui-tab-active-border: #eb5e28;
    --ui-tab-active-text: #252422;
    --ui-tab-inactive-bg: #fffcf2;
    --ui-tab-inactive-text: #403d39;
    --ui-tab-inactive-opacity: 1.0;
    --ui-canvas-bg: #fffcf2;
    --ui-grid-dot: #ccc5b9;
    --ui-grid-line: rgba(204, 197, 185, 0.2);
    --ui-weather-hud-bg: rgba(255, 252, 242, 0.9);
    --ui-weather-hud-hover: rgba(204, 197, 185, 0.2);
    --ui-accent: #eb5e28;
    --ui-accent-hover: #d84a15;
    --ui-accent-danger: #eb5e28;
    --ui-accent-danger-hover: #d84a15;
    --ui-accent-danger-bg-subtle: rgba(235, 94, 40, 0.12);
    --ui-accent-danger-border-subtle: rgba(235, 94, 40, 0.25);
    --ui-accent-danger-text-subtle: #eb5e28;

    /* Layout Framing variables */
    --ui-header-bg: #403d39;
    --ui-header-text: #fffcf2;
    --ui-sidebar-bg: #fffcf2;
    --ui-sidebar-text: #403d39;
    --ui-sidebar-hover: rgba(64, 61, 57, 0.08);
    --ui-sidebar-active-bg: #403d39;
    --ui-sidebar-active-text: #fffcf2;
}

html.theme-rusticcharm.dark {
    --ui-bg: #252422;
    --ui-panel-bg: #403d39;
    --ui-dialog-bg: #403d39;
    --ui-dialog-header-bg: #252422;
    --ui-dialog-header-text: #ccc5b9;
    --ui-border: #403d39;
    --ui-text-main: #fffcf2;
    --ui-text-muted: #ccc5b9;
    --ui-text-heading: #ccc5b9;
    --ui-input-bg: #252422;
    --ui-input-border: #403d39;
    --ui-input-text: #fffcf2;
    --ui-input-focus-border: #eb5e28;
    --ui-btn-bg: #403d39;
    --ui-btn-border: #252422;
    --ui-btn-text: #fffcf2;
    --ui-btn-hover: #252422;
    --ui-tool-hover: #252422;
    --ui-ctx-bg: #403d39;
    --ui-ctx-border: #252422;
    --ui-ctx-text: #fffcf2;
    --ui-ctx-hover: #252422;
    --ui-tab-active-bg: #403d39;
    --ui-tab-active-border: #eb5e28;
    --ui-tab-active-text: #fffcf2;
    --ui-tab-inactive-bg: #252422;
    --ui-tab-inactive-text: #ccc5b9;
    --ui-tab-inactive-opacity: 0.6;
    --ui-canvas-bg: #252422;
    --ui-grid-dot: #ccc5b9;
    --ui-grid-line: #403d39;
    --ui-weather-hud-bg: rgba(64, 61, 57, 0.9);
    --ui-weather-hud-hover: rgba(37, 36, 34, 0.9);
    --ui-accent: #eb5e28;
    --ui-accent-hover: #fffcf2;
    --ui-accent-text: #252422;
    --ui-accent-text-hover: #252422;
    --ui-accent-danger: #eb5e28;
    --ui-accent-danger-hover: #fffcf2;
    --ui-accent-danger-bg-subtle: rgba(235, 94, 40, 0.15);
    --ui-accent-danger-border-subtle: rgba(235, 94, 40, 0.3);
    --ui-accent-danger-text-subtle: #fffcf2;

    /* Layout Framing variables */
    --ui-header-bg: #252422;
    --ui-header-text: #ccc5b9;
    --ui-sidebar-bg: #403d39;
    --ui-sidebar-text: #fffcf2;
    --ui-sidebar-hover: rgba(204, 197, 185, 0.15);
    --ui-sidebar-active-bg: #252422;
    --ui-sidebar-active-text: #ccc5b9;

    /* SVG contrasting fills for Rustic Charm dark */
    --svg-icon-fill-374151: #fffcf2;
    --svg-icon-fill-64748b: #ccc5b9;
    --svg-icon-fill-F3F4F6: #403d39;
    --svg-icon-fill-E5E7EB: #252422;
    --svg-icon-fill-3B82F6: #eb5e28;
    --svg-icon-fill-DBEAFE: #403d39;
    --svg-icon-stroke-2563EB: #eb5e28;
    --svg-icon-fill-D1FAE5: #403d39;
    --svg-icon-stroke-059669: #eb5e28;
    --svg-icon-fill-FEE2E2: #403d39;
    --svg-icon-stroke-DC2626: #eb5e28;
    --svg-icon-fill-f8fafc: #252422;
}