/* ===== Base and Themes ===== */
:root {
    --bg-0: #111;
    --bg-1: #181818;
    --bg-2: #1b1b1b;
    --panel-bg: #151515;
    --panel-alt: #1d1d1d;
    --surface: #101010;
    --surface-2: #080808;
    --surface-dark: #0a0a0a;
    --text: #ddd;
    --muted: #aaa;
    --link-text: var(--accent-blue);
    --accent: #00ff66;
    --accent-blue: #00bbff;
    --accent-red: #ff5555;
    --accent-warning: #ffbf55;
    --accent-amber: #ff9900;
    --danger: #ff5555;
    --button-text: #ffffff;
    --button-bg: #3f3f3f;
    --button-hover-bg: #4e4e4e;
    --button-shadow: 0 4px 0 #222;
    --button-inner-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
    --button-active-shadow: 0 1px 0 #222;
    --button-active-inner-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    --border: #2a2a2a;
    --border-strong: #333;
    --border-soft: #242424;
    --panel-border: #2c2c2c;
    --panel-shadow-faint: rgba(255, 255, 255, 0.02);
    --panel-shadow-small: rgba(255, 255, 255, 0.03);
    --flag-active-shadow-color: rgba(255, 184, 107, 0.18);
    --section-header-text: #777;
    --display-bg-start: #050505;
    --grid-bg: #050505;
    --display-shadow-color: rgba(0, 255, 120, 0.08);
    --pixel-bg: #111;
    --pixel-active-bg: #eee;
    --input-bg: #1a1a1a;
    --control-bg-start: var(--panel-alt);
    --control-bg-end: #141414;
    --control-shadow: rgba(255, 255, 255, 0.03);
    --control-button-bg: #ff4141;
    --control-button-hover-bg: #ff7f7f;
    --slider-track-bg: #ffdd00;
    --slider-thumb-bg: #ffffff;
    --slider-thumb-border: #222;
    --status-bar-bg: var(--surface);
    --status-running: #00ff88;
    --flag-inactive-text: #666;
    --flags-bg-start: var(--surface);
    --flags-bg-end: var(--surface-2);
    --memory-panel-bg: #181818;
    --cell-bg-end: #0a0a0a;
    --editor-bg: #0f0f0f;
    --editor-shadow-color: rgba(0, 0, 0, 0.8);
    --editor-gutter-bg: #0b0b0b;
    --editor-gutter-text: #6d6d6d;
    --editor-gutter-line-number: #7f7f7f;
    --editor-gutter-instruction-number: #d1d1d1;
    --code-text: #ff88ff;
    --syntax-opcode: var(--accent-blue);
    --syntax-register: var(--accent);
    --syntax-number: var(--accent-warning);
    --syntax-comment: var(--muted);
    --doc-code-text: #7dff93;
    --bottom-border: #2d2d2d;
    --bottom-button-bg: #232323;
    --bottom-button-hover-bg: #2e2e2e;
    --bottom-button-border: #3a3a3a;
    --bottom-button-text: #e6e6e6;
    --problems-panel-bg: var(--bg-0);
    --problems-text: #e8e8e8;
    --problems-border: rgba(255, 255, 255, 0.06);
    --problems-toggle-text: #ffb4b4;
    --problem-error-border: #ff6b6b;
    --problem-error-text: #ffd2d2;
    --problem-warning-border: #f1b95d;
    --problem-warning-text: #ffe8c0;
    --modal-overlay-bg: rgba(0, 0, 0, 0.55);
    --modal-window-bg: #171717;
    --modal-window-border: #3b3b3b;
    --modal-window-shadow: rgba(0, 0, 0, 0.5);
    --modal-header-bg: #202020;
    --modal-title-text: #ffffff;
    --modal-title-highlight: #6fc3ff;
    --modal-card-bg-start: #1e1e1e;
    --modal-card-border: #383838;
    --modal-card-tag-bg: #2d2d2d;
    --modal-card-tag-border: #444;
    --modal-card-badge-bg: #2b2b2b;
    --modal-card-badge-text: #bbb;
    --table-head-bg: #232323;
    --table-head-color: #6fc3ff;
    --table-row-alt-bg: rgba(255, 255, 255, 0.03);
    --io-access-text: #ffffff;
    --io-access-read-bg: #2f80ed;
    --io-access-write-bg: #f2994a;
    --io-access-read-write-bg: #27ae60;
    --swal-bg: var(--bg-1);
    --swal-confirm-bg: #007aaa;
    --swal-secondary-bg: #444;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
}

:root[data-theme="light"],
:root[data-theme="high-contrast-light"] {
    --bg-0: #f5f5f5;
    --bg-1: #eaeaea;
    --bg-2: #e0e0e0;
    --panel-bg: #dcdcdc;
    --panel-alt: #d4d4d4;
    --surface: #ffffff;
    --surface-2: #f0f0f0;
    --surface-dark: #f7f7f7;
    --border: #ccc;
    --border-strong: #bbb;
    --border-soft: #ddd;
    --text: #222;
    --muted: #555;
    --link-text: var(--accent-blue);
    --accent: #00aa44;
    --accent-blue: #0077cc;
    --accent-red: #cc3333;
    --accent-warning: #cc8800;
    --accent-amber: #cc7700;
    --danger: #cc3333;
    --button-text: #ffffff;
    --button-bg: #c0c0c0;
    --button-hover-bg: #d4d4d4;
    --button-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
    --button-inner-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
    --button-active-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    --button-active-inner-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    --control-button-bg: var(--accent-warning);
    --control-button-hover-bg: #ff7f7f;
    --bottom-button-hover-bg: #e3e3e3;
    --flag-active-shadow-color: rgba(0, 0, 0, 0.12);
    --panel-border: #bbb;
    --panel-shadow-faint: rgba(255, 255, 255, 0.08);
    --panel-shadow-small: rgba(255, 255, 255, 0.06);
    --section-header-text: #666;
    --display-bg-start: #f0f0f0;
    --grid-bg: #f0f0f0;
    --pixel-bg: #ffffff;
    --pixel-active-bg: #333;
    --input-bg: #e8e8e8;
    --control-bg-start: var(--panel-alt);
    --control-bg-end: #d2d2d2;
    --control-shadow: rgba(255, 255, 255, 0.06);
    --slider-track-bg: #ffbf55;
    --slider-thumb-bg: #ffffff;
    --slider-thumb-border: #888;
    --status-bar-bg: var(--surface);
    --status-running: #008844;
    --flag-inactive-text: #666;
    --flags-bg-start: var(--surface);
    --flags-bg-end: var(--surface-2);
    --memory-panel-bg: #f2f2f2;
    --cell-bg-end: #f7f7f7;
    --editor-bg: #f9f9f9;
    --editor-gutter-bg: #e6e6e6;
    --editor-gutter-text: #555;
    --editor-gutter-line-number: #777;
    --editor-gutter-instruction-number: #444;
    --code-text: #9900aa;
    --syntax-opcode: var(--accent-blue);
    --syntax-register: var(--accent);
    --syntax-number: var(--accent-warning);
    --syntax-comment: var(--muted);
    --bottom-border: #ddd;
    --bottom-button-bg: #d7d7d7;
    --bottom-button-border: #bbb;
    --bottom-button-text: #222;
    --problems-panel-bg: var(--bg-0);
    --problems-text: #222;
    --problems-border: rgba(0, 0, 0, 0.06);
    --problem-error-border: #cc3333;
    --problem-error-text: #cc0000;
    --problem-warning-border: #cc8800;
    --problem-warning-text: #664400;
    --modal-overlay-bg: rgba(0, 0, 0, 0.35);
    --modal-window-bg: #ffffff;
    --modal-window-border: #cccccc;
    --modal-window-shadow: rgba(0, 0, 0, 0.15);
    --modal-header-bg: #f5f5f5;
    --modal-title-text: #111;
    --modal-title-highlight: #0077cc;
    --modal-card-bg-start: #f5f5f5;
    --modal-card-border: #cccccc;
    --modal-card-tag-bg: #f0f0f0;
    --modal-card-tag-border: #bbb;
    --modal-card-badge-bg: #e2e2e2;
    --modal-card-badge-text: #444;
    --table-head-bg: #f0f0f0;
    --table-head-color: #0077cc;
    --table-row-alt-bg: rgba(0, 0, 0, 0.03);
    --io-access-text: #111;
    --io-access-read-bg: #2f80ed;
    --io-access-write-bg: #f2994a;
    --io-access-read-write-bg: #27ae60;
    --swal-bg: var(--bg-1);
    --swal-confirm-bg: #007aaa;
    --swal-secondary-bg: #666;
}

:root[data-theme="high-contrast"] {
    --bg-0: #000;
    --bg-1: #050505;
    --bg-2: #0a0a0a;
    --panel-bg: #050505;
    --panel-alt: #111;
    --surface: #000;
    --surface-2: #080808;
    --surface-dark: #000;
    --text: #fff;
    --muted: #e0e0e0;
    --link-text: #80dfff;
    --accent: #00ff66;
    --accent-blue: #80dfff;
    --accent-red: #ff7777;
    --accent-warning: #ffd166;
    --accent-amber: #ffd166;
    --danger: #ff7777;
    --button-text: #fff;
    --button-bg: #202020;
    --button-hover-bg: #3a3a3a;
    --border: #777;
    --border-strong: #fff;
    --border-soft: #555;
    --panel-border: #aaa;
    --section-header-text: #ddd;
    --input-bg: #050505;
    --memory-panel-bg: #050505;
    --editor-bg: #000;
    --editor-gutter-bg: #050505;
    --editor-gutter-text: #ddd;
    --editor-gutter-line-number: #fff;
    --editor-gutter-instruction-number: #fff;
    --code-text: #ffb3ff;
    --syntax-opcode: var(--accent-blue);
    --syntax-register: var(--accent);
    --syntax-number: var(--accent-warning);
    --syntax-comment: var(--muted);
    --bottom-button-bg: #151515;
    --bottom-button-hover-bg: #303030;
    --bottom-button-border: #aaa;
    --bottom-button-text: #fff;
    --modal-window-bg: #050505;
    --modal-window-border: #fff;
    --modal-header-bg: #111;
    --modal-title-text: #fff;
    --modal-title-highlight: #80dfff;
    --modal-card-bg-start: #111;
    --modal-card-border: #aaa;
    --modal-card-tag-bg: #151515;
    --modal-card-tag-border: #aaa;
    --modal-card-badge-bg: #202020;
    --modal-card-badge-text: #fff;
    --table-head-bg: #202020;
    --table-head-color: #80dfff;
    --table-row-alt-bg: rgba(255, 255, 255, 0.1);
}

:root[data-theme="high-contrast-light"] {
    --bg-0: #fff;
    --bg-1: #f5f5f5;
    --bg-2: #eee;
    --panel-bg: #f5f5f5;
    --panel-alt: #fff;
    --surface: #fff;
    --surface-2: #eee;
    --surface-dark: #fff;
    --text: #000;
    --muted: #222;
    --link-text: #004c99;
    --accent: #005a24;
    --accent-blue: #004c99;
    --accent-red: #990000;
    --accent-warning: #704800;
    --accent-amber: #704800;
    --danger: #990000;
    --button-text: #000;
    --button-bg: #fff;
    --button-hover-bg: #ddd;
    --border: #444;
    --border-strong: #000;
    --border-soft: #777;
    --panel-border: #000;
    --section-header-text: #333;
    --input-bg: #fff;
    --memory-panel-bg: #fff;
    --editor-bg: #fff;
    --editor-gutter-bg: #eee;
    --editor-gutter-text: #333;
    --editor-gutter-line-number: #000;
    --editor-gutter-instruction-number: #000;
    --code-text: #660066;
    --syntax-opcode: var(--accent-blue);
    --syntax-register: var(--accent);
    --syntax-number: var(--accent-warning);
    --syntax-comment: var(--muted);
    --bottom-button-bg: #fff;
    --bottom-button-hover-bg: #ddd;
    --bottom-button-border: #444;
    --bottom-button-text: #000;
    --modal-window-bg: #fff;
    --modal-window-border: #000;
    --modal-header-bg: #eee;
    --modal-title-text: #000;
    --modal-title-highlight: #004c99;
    --modal-card-bg-start: #fff;
    --modal-card-border: #444;
    --modal-card-tag-bg: #eee;
    --modal-card-tag-border: #444;
    --modal-card-badge-bg: #ddd;
    --modal-card-badge-text: #000;
    --table-head-bg: #ddd;
    --table-head-color: #004c99;
    --table-row-alt-bg: rgba(0, 0, 0, 0.08);
}

:root[data-theme="machine"] {
    --bg-0: #1d2229;
    --bg-1: var(--bg-0);
    --bg-2: var(--bg-0);
    --panel-bg: var(--bg-0);
    --panel-alt: #181818;
    --surface: #1b1d1f;
    --surface-2: #080808;
    --surface-dark: #0a0a0a;
    --text: #e0e0e2;
    --muted: #686e79;
    --link-text: #00bbff;
    --accent: var(--text);
    --accent-blue: var(--text);
    --accent-red: var(--text);
    --accent-warning: var(--text);
    --accent-amber: var(--text);
    --danger: #ff5555;
    --button-text: var(--text);
    --button-bg: #1b1e22;
    --button-hover-bg: #555658;
    --button-shadow: 0 4px 0 #222;
    --button-inner-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
    --button-active-shadow: 0 1px 0 #222;
    --button-active-inner-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    --border: var(--surface-dark);
    --border-strong: var(--surface-2);
    --border-soft: var(--surface-dark);
    --panel-border: #2c2c2c;
    --panel-shadow-faint: rgba(255, 255, 255, 0.02);
    --panel-shadow-small: rgba(255, 255, 255, 0.03);
    --flag-active-shadow-color: rgba(255, 184, 107, 0.18);
    --section-header-text: #777;
    --display-bg-start: #050505;
    --grid-bg: #050505;
    --display-shadow-color: rgba(0, 255, 120, 0.08);
    --pixel-bg: #ae663e;
    --pixel-active-bg: #ffc689;
    --input-bg: var(--surface);
    --control-bg-start: var(--panel-alt);
    --control-bg-end: #141414;
    --control-shadow: rgba(255, 255, 255, 0.03);
    --control-button-bg: var(--button-bg);
    --control-button-hover-bg: var(--button-hover-bg);
    --slider-track-bg: var(--muted);
    --slider-thumb-bg: var(--text);
    --slider-thumb-border: #222;
    --status-bar-bg: var(--surface);
    --status-running: #00ff88;
    --flag-inactive-text: #666;
    --flags-bg-start: var(--surface);
    --flags-bg-end: var(--surface-2);
    --memory-panel-bg: #181818;
    --cell-bg-end: #0a0a0a;
    --editor-bg: #0f0f0f;
    --editor-shadow-color: rgba(0, 0, 0, 0.8);
    --editor-gutter-bg: var(--surface-dark);
    --editor-gutter-text: #6d6d6d;
    --editor-gutter-line-number: #7f7f7f;
    --editor-gutter-instruction-number: #d1d1d1;
    --code-text: var(--text);
    --syntax-opcode: var(--accent-blue);
    --syntax-register: var(--accent);
    --syntax-number: var(--accent-warning);
    --syntax-comment: var(--muted);
    --doc-code-text: #7dff93;
    --bottom-border: #2d2d2d;
    --bottom-button-bg: var(--panel-alt);
    --bottom-button-hover-bg: var(--surface-dark);
    --bottom-button-border: #3a3a3a;
    --bottom-button-text: #e6e6e6;
    --problems-panel-bg: var(--bg-0);
    --problems-text: #e8e8e8;
    --problems-border: rgba(255, 255, 255, 0.06);
    --problems-toggle-text: #ffb4b4;
    --problem-error-border: #ff6b6b;
    --problem-error-text: #ffd2d2;
    --problem-warning-border: #f1b95d;
    --problem-warning-text: #ffe8c0;
    --modal-overlay-bg: rgba(0, 0, 0, 0.55);
    --modal-window-bg: #171717;
    --modal-window-border: #3b3b3b;
    --modal-window-shadow: rgba(0, 0, 0, 0.5);
    --modal-header-bg: var(--surface-dark);
    --modal-title-text: var(--muted);
    --modal-title-highlight: var(--text);
    --modal-card-bg-start: var(--surface);
    --modal-card-border: var(--border-strong);
    --modal-card-tag-bg: var(--surface-dark);
    --modal-card-tag-border: var(--border);
    --modal-card-badge-bg: var(--surface-dark);
    --modal-card-badge-text: var(--text);
    --table-head-bg: var(--surface);
    --table-head-color: var(--text);
    --table-row-alt-bg: rgba(255, 255, 255, 0.03);
    --io-access-text: var(--text);
    --io-access-read-bg: var(--pixel-active-bg);
    --io-access-write-bg: var(--pixel-bg);
    --io-access-read-write-bg: var(--accent);
    --swal-bg: var(--surface-dark);
    --swal-confirm-bg: #1b1e22;
    --swal-secondary-bg: #1b1e22;
}

:root[data-theme="nord"] {
    --bg-0: #2e3440;
    --bg-1: var(--bg-0);
    --bg-2: var(--bg-0);
    --panel-bg: var(--bg-0);
    --panel-alt: #3b4252;
    --surface: #3b4252;
    --surface-2: #242933;
    --surface-dark: #1e222a;
    --text: #eceff4;
    --muted: #4c566a;
    --link-text: #88c0d0;
    --accent: var(--text);
    --accent-blue: var(--text);
    --accent-red: var(--text);
    --accent-warning: var(--text);
    --accent-amber: var(--text);
    --danger: #bf616a;
    --button-text: var(--text);
    --button-bg: #434c5e;
    --button-hover-bg: #4c566a;
    --button-shadow: 0 4px 0 #242933;
    --button-inner-shadow: inset 0 1px 1px rgba(236, 239, 244, 0.15);
    --button-active-shadow: 0 1px 0 #242933;
    --button-active-inner-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    --border: var(--surface-dark);
    --border-strong: var(--surface-2);
    --border-soft: var(--surface-dark);
    --panel-border: #434c5e;
    --panel-shadow-faint: rgba(236, 239, 244, 0.02);
    --panel-shadow-small: rgba(236, 239, 244, 0.03);
    --flag-active-shadow-color: rgba(235, 203, 139, 0.18);
    --section-header-text: #7b88a1;
    --display-bg-start: #1e222a;
    --grid-bg: #1e222a;
    --display-shadow-color: rgba(163, 190, 140, 0.08);
    --pixel-bg: #d08770;
    --pixel-active-bg: #ebcb8b;
    --input-bg: var(--surface);
    --control-bg-start: var(--panel-alt);
    --control-bg-end: #242933;
    --control-shadow: rgba(236, 239, 244, 0.03);
    --control-button-bg: var(--button-bg);
    --control-button-hover-bg: var(--button-hover-bg);
    --slider-track-bg: var(--muted);
    --slider-thumb-bg: var(--text);
    --slider-thumb-border: #242933;
    --status-bar-bg: var(--surface);
    --status-running: #a3be8c;
    --flag-inactive-text: #4c566a;
    --flags-bg-start: var(--surface);
    --flags-bg-end: var(--surface-2);
    --memory-panel-bg: #3b4252;
    --cell-bg-end: #1e222a;
    --editor-bg: #242933;
    --editor-shadow-color: rgba(0, 0, 0, 0.8);
    --editor-gutter-bg: var(--surface-dark);
    --editor-gutter-text: #616e88;
    --editor-gutter-line-number: #7b88a1;
    --editor-gutter-instruction-number: #d8dee9;
    --code-text: var(--text);
    --syntax-opcode: var(--accent-blue);
    --syntax-register: var(--accent);
    --syntax-number: var(--accent-warning);
    --syntax-comment: var(--muted);
    --doc-code-text: #a3be8c;
    --bottom-border: #434c5e;
    --bottom-button-bg: var(--panel-alt);
    --bottom-button-hover-bg: var(--surface-dark);
    --bottom-button-border: #4c566a;
    --bottom-button-text: #e5e9f0;
    --problems-panel-bg: var(--bg-0);
    --problems-text: #e5e9f0;
    --problems-border: rgba(236, 239, 244, 0.06);
    --problems-toggle-text: #bf616a;
    --problem-error-border: #bf616a;
    --problem-error-text: #e5989f;
    --problem-warning-border: #d08770;
    --problem-warning-text: #ebcb8b;
    --modal-overlay-bg: rgba(0, 0, 0, 0.55);
    --modal-window-bg: #3b4252;
    --modal-window-border: #4c566a;
    --modal-window-shadow: rgba(0, 0, 0, 0.5);
    --modal-header-bg: var(--surface-dark);
    --modal-title-text: var(--muted);
    --modal-title-highlight: var(--text);
    --modal-card-bg-start: var(--surface);
    --modal-card-border: var(--border-strong);
    --modal-card-tag-bg: var(--surface-dark);
    --modal-card-tag-border: var(--border);
    --modal-card-badge-bg: var(--surface-dark);
    --modal-card-badge-text: var(--text);
    --table-head-bg: var(--surface);
    --table-head-color: var(--text);
    --table-row-alt-bg: rgba(236, 239, 244, 0.03);
    --io-access-text: var(--text);
    --io-access-read-bg: var(--pixel-active-bg);
    --io-access-write-bg: var(--pixel-bg);
    --io-access-read-write-bg: var(--accent);
    --swal-bg: var(--surface-dark);
    --swal-confirm-bg: #434c5e;
    --swal-secondary-bg: #434c5e;
}