/* Copyright (c) 2025 Clay Builder LLC. All rights reserved. */
/* No use, distribution, or modification is permitted without prior written permission. */

/* ==========================
   THEME VARIABLES
   Light/Dark mode color system
   ========================== */

:root {
    /* ===== LIGHT MODE (Earth Tones) ===== */

    /* Primary Backgrounds */
    --cb-primary-background: #ffffff;
    --cb-secondary-background: #f8f9fa;
    --cb-tertiary-background: #f1f1f1;
    --cb-body-background: #fe8400;

    /* Animated Background Gradient Colors (Earth Theme) */
    --cb-gradient-bg: #f4ead8;       /* Warm parchment/sand base */
    --cb-gradient-1: #d49873;        /* Soft terracotta */
    --cb-gradient-2: #e4ab99;        /* Warm peach-clay */
    --cb-gradient-3: #9bb89e;        /* Sage / eucalyptus */
    --cb-gradient-4: #d2b48c;        /* Warm sand */
    --cb-gradient-5: #a9b07a;        /* Mossy olive */
    --cb-gradient-6: #6b8e5a;        /* Forest moss */
    --cb-gradient-7: #d8c896;        /* Soft wheat */
    --cb-gradient-8: #a45a3c;        /* Burnt sienna */

    /* Cards and Surfaces */
    --cb-card-background: rgba(255, 255, 255, 0.9);
    --cb-panel-background: #ffffff;
    --cb-form-background: #f7f7f7;

    /* Interactive Elements */
    --cb-button-background: #ffffff;
    --cb-button-hover-background: #eaeaea;
    --cb-button-active-background: #c3c3c3;
    --cb-button-group-background: rgba(255, 255, 255, 0.85);
    --cb-widget-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    --cb-navbar-widget-border: none;
    --cb-pill-popup-background: rgba(255, 255, 255, 0.95);
    --cb-input-focus-border: #007bff;
    --cb-input-focus-shadow: rgba(0, 123, 255, 0.25);
    --cb-input-placeholder: #6c757d;

    /* Accent Colors (Earth Theme) */
    --cb-accent-mint: #73b3ac;
    --cb-accent-sky: #50b2e6;
    --cb-accent-blue: #0d6efd;
    --cb-accent-blue-hover: #0a58ca;

    /* Special Elements */
    --cb-section-pill-background: #ffffff;
    --cb-section-pill-hover: #eaeaea;
    --cb-navbar-footer-pill: #ff88554f;
    --cb-pill-text: #212529;
    --cb-pill-hover-text: #007bff;

    /* Text Colors */
    --cb-primary-text: #212529;
    --cb-secondary-text: #6c757d;
    --cb-muted-text: #adb5bd;
    --cb-icon-color: #000000;

    /* Borders and Separators */
    --cb-separator: #e9ecef;
    --cb-border-light: #dee2e6;
    --cb-border-medium: #ced4da;
    --cb-navbar-border: rgba(168, 138, 96, 0.28);
    --cb-form-border: #00000064;
    --cb-resize-handle: rgba(177, 101, 255, 0.56);
    --cb-resize-handle-hover: rgba(177, 101, 255, 0.75);

    /* Loading Screen */
    --cb-loading-box-background: rgba(255, 255, 255, 0.83);
    --cb-loading-screen-bg: rgba(244, 234, 216, 0.78);
    --cb-loading-container-bg: rgba(255, 255, 255, 0.86);
    --cb-loading-container-border: rgba(0, 0, 0, 0.06);
    --cb-logo-glow: #ffffff;
    --cb-progress-border: #343a40;
    --cb-progress-bar-background: #343a40;

    /* Warm label / status text (used in loading screen, detail pills) */
    --cb-warm-label-text: #6a5a44;
    --cb-warm-substatus-text: #a08c6b;

    /* Glass UI panels (navbar button groups, detail panels) */
    --cb-ui-glass-bg: rgba(249, 238, 218, 0.72);
    --cb-ui-glass-border: rgba(168, 138, 96, 0.22);

    /* Publish/preview modal */
    --cb-publish-modal-bg: #ffffff;
    --cb-publish-modal-border: var(--lhs-border);
    --cb-publish-modal-header-start: #fff8ec;
    --cb-publish-modal-header-end: #f5e9cf;
    --cb-publish-modal-dark-bg: rgba(60, 40, 20, 0.06);
    --cb-publish-modal-accent-bg: rgba(254, 132, 0, 0.07);
    --cb-publish-modal-accent-border: rgba(254, 132, 0, 0.30);
    --cb-publish-modal-accent-text: #b45c00;
    --cb-publish-modal-link-bg: rgba(255, 255, 255, 0.60);
    --cb-publish-modal-link-border: rgba(254, 132, 0, 0.45);
    --cb-publish-modal-link-text: #b45c00;
    --cb-publish-modal-link-hover-bg: rgba(254, 132, 0, 0.12);
    --cb-publish-modal-link-hover-border: #fe8400;

    /* Preview / publish sidebar buttons */
    --cb-preview-btn-color: #a45a3c;
    --cb-preview-btn-border-color: #d49873;
    --cb-preview-btn-hover-bg: rgba(212, 152, 115, 0.14);
    --cb-preview-btn-hover-color: #8a4a30;
    --cb-preview-btn-hover-border: #a45a3c;
    --cb-preview-btn-active-bg: rgba(212, 152, 115, 0.22);

    /* Sidebar bottom strip */
    --cb-sidebar-bottom-bg: var(--lhs-surface-strong);

    /* Overlays */
    --cb-overlay-light: rgba(255, 255, 255, 0.4);
    --cb-overlay-medium: rgba(255, 255, 255, 0.9);

    /* Bootstrap Color Overrides (for manual dark mode since we can't use data-bs-theme) */

    /* Body & Background */
    --bs-body-color: #212529;
    --bs-body-bg: #ffffff;
    --bs-border-color: #dee2e6;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);

    /* Theme Colors */
    --bs-primary: #0d6efd;
    --bs-primary-gradient-start: #0d6efd;
    --bs-primary-gradient-end: #0a58ca;
    --bs-primary-hover: #0a58ca;
    --bs-primary-hover-gradient-start: #0b5ed7;
    --bs-primary-hover-gradient-end: #084298;
    --bs-primary-border: rgba(13, 110, 253, 0.5);
    --bs-primary-border-hover: rgba(13, 110, 253, 0.7);
    --bs-outline-primary-border: #0d6efd;
    --bs-outline-primary-text: #0d6efd;
    --bs-outline-primary-hover-bg: #0d6efd;
    --bs-outline-primary-border-hover: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-secondary-bg: #f8f9fa;
    --bs-secondary-hover-bg: #e2e6ea;
    --bs-secondary-border: #6c757d;
    --bs-secondary-text: #212529;
    --bs-success: #198754;
    --bs-success-bg: #d4edda;
    --bs-danger: #dc3545;
    --bs-danger-bg: #f8d7da;
    --bs-warning: #ffc107;
    --bs-warning-bg: #fff3cd;
    --bs-warning-border: #ffc107;
    --bs-danger-gradient-start: #dc3545;
    --bs-danger-gradient-end: #b02a37;
    --bs-danger-hover-gradient-start: #c82333;
    --bs-danger-hover-gradient-end: #dc3545;
    --bs-danger-border: rgba(220, 53, 69, 0.5);

    /* Cards & Modals */
    --bs-card-bg: #ffffff;
    --bs-card-border-color: rgba(0, 0, 0, 0.125);
    --bs-card-cap-bg: #f8f9fa;
    --bs-modal-bg: #ffffff;
    --bs-modal-border-color: rgba(0, 0, 0, 0.2);

    /* Dropdowns */
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-border-color: rgba(0, 0, 0, 0.15);
    --bs-dropdown-link-hover-bg: #f8f9fa;

    /* Tables */
    --bs-table-bg: transparent;
    --bs-table-color: #212529;
    --bs-table-border-color: #dee2e6;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);

    /* Tinted Windows (light tint over animated background) */
    --cb-panel-tint: #ffffff78;
    --cb-navbar-tint: rgba(255, 251, 244, 0.94);

    /* Sidebar bottom background */
    --cb-sidebar-bottom-background: rgba(255, 255, 255, 0.941);

    /* Tab Elements */
    --cb-tab-button-border: #0d6dfd4f;
    --cb-tab-highlight-border: #b165ff4f;
    --cb-tab-highlight-bg: rgba(255, 255, 255, 0.9);
    --cb-tab-button-hover-bg: rgba(0, 0, 0, 0.04);

    /* Media Library */
    --cb-media-grid-bg: #faf6f1;
    --cb-media-tile-bg: #fffaf5;
    --cb-media-tile-border: rgba(164, 90, 60, 0.15);
    --cb-media-tile-shadow: rgba(164, 90, 60, 0.06);
    --cb-media-tile-hover-shadow: rgba(164, 90, 60, 0.14);
    --cb-media-icon-bg: rgba(212, 152, 115, 0.08);
    --cb-media-table-header-bg: #f5ebe0;
    --cb-media-table-border: rgba(164, 90, 60, 0.15);
    --cb-media-table-hover-bg: rgba(212, 152, 115, 0.1);
    --cb-popup-bg: #f8f9fa;
    --cb-media-panel-bg: rgba(252, 245, 235, 0.95);
    --cb-media-panel-border: rgba(164, 90, 60, 0.25);
    --cb-media-panel-input-bg: #ffffff;

    /* Tooltips */
    --cb-tooltip-background: rgba(60, 44, 28, 0.94);
    --cb-tooltip-text: #f7ecd7;
    --bs-tooltip-bg: rgba(60, 44, 28, 0.94);
    --bs-tooltip-color: #f7ecd7;

    /* Modal Header Gradients */
    --cb-modal-blue-start: #007bff;
    --cb-modal-blue-end: #0056b3;
    --cb-modal-caramel-start: #7a4a2a;    /* Deep coffee brown */
    --cb-modal-caramel-mid: #a86e32;      /* Warm caramel */
    --cb-modal-caramel-end: #c89050;      /* Golden caramel */
    --cb-modal-green-start: #28a745;
    --cb-modal-green-end: #1e7e34;
    --cb-modal-green-teal-start: #28a745;
    --cb-modal-green-teal-end: #20c997;
    --cb-modal-orange-start: #ff9800;
    --cb-modal-orange-end: #f57c00;
    --cb-modal-red-start: #FF0000;
    --cb-modal-red-end: #CC0000;

    /* Rich Text Pill Sub-panels (font family / weight / size) */
    --cb-pill-panel-bg: rgba(255, 255, 255, 0.97);
    --cb-pill-panel-border: rgba(0, 0, 0, 0.1);
    --cb-pill-panel-text: #222222;
    --cb-pill-panel-text-muted: #888888;
    --cb-pill-panel-item-hover: #f0f0f0;
    --cb-pill-panel-input-bg: #f5f5f5;
    --cb-pill-panel-input-border: #dddddd;

    /* Code Editor (CustomCodeEditorSimple) */
    --cb-code-bg: #ffffff;
    --cb-code-text: #333333;
    --cb-code-line-num-bg: #f8f9fa;
    --cb-code-line-num-border: #dee2e6;
    --cb-code-line-num-text: #6c757d;
    --cb-code-caret: #000000;
    --cb-code-comment: #6a737d;
    --cb-code-html-tag: #22863a;
    --cb-code-html-attr: #6f42c1;
    --cb-code-html-string: #032f62;
    --cb-code-css-prop: #005cc5;
    --cb-code-css-selector: #6f42c1;
    --cb-code-css-hex: #e36209;
    --cb-code-css-number: #032f62;
    --cb-code-js-keyword: #d73a49;
    --cb-code-js-string: #032f62;
    --cb-code-js-number: #005cc5;

    /* Links and Text Hover */
    --bs-link-hover-color: #0d6efd;

    /* Browser Tab Preview (mimics real browser tab colors) */
    --cb-browser-tab-bg: #e9ecef;
    --cb-browser-tab-border: #dee2e6;
    --cb-browser-tab-text: #212529;
    --cb-browser-tab-icon: #6c757d;
    --cb-browser-tab-close: #6c757d;
    --cb-browser-tab-close-hover: #495057;

    /* LHS sidebar colors */
    --lhs-surface: #ffffff;
    --lhs-surface-hover: #fbf5e8;
    --lhs-surface-strong: #ffffff;
    --lhs-border: #ddd0b8;
    --lhs-border-strong: #c5b599;
    --lhs-text: #1f1a14;
    --lhs-text-soft: #5a4c3a;
    --lhs-text-faint: #8a7860;
    --lhs-accent: #fe8400;
    --lhs-accent-hover: #e07600;
    --lhs-accent-soft: #fff2e0;
    --lhs-shadow-card:
        0 1px 2px rgba(60, 40, 20, 0.06),
        0 2px 6px rgba(60, 40, 20, 0.06),
        0 8px 20px rgba(60, 40, 20, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --lhs-shadow-hover:
        0 1px 2px rgba(60, 40, 20, 0.08),
        0 4px 10px rgba(60, 40, 20, 0.10),
        0 14px 28px rgba(60, 40, 20, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    --lhs-shadow-active:
        0 0 0 1px var(--lhs-accent),
        0 6px 22px rgba(254, 132, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ===== DARK MODE (Earth Tones Theme) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Primary Backgrounds */
        --cb-primary-background: rgba(46, 36, 28, 0.85);
        --cb-secondary-background: #241e16;
        --cb-tertiary-background: #3e3028;
        --cb-body-background: #241e16;

        /* Animated Background Gradient Colors (Calm Earth — quiet evening) */
        --cb-gradient-bg: #1c1812;       /* Warm dark base */
        --cb-gradient-1: #6e4530;        /* Dim rust */
        --cb-gradient-2: #46332a;        /* Rich coffee brown */
        --cb-gradient-3: #7d4f33;        /* Muted terracotta */
        --cb-gradient-4: #3f5638;        /* Calm pine */
        --cb-gradient-5: #55502b;        /* Calm olive */
        --cb-gradient-6: #4d3e30;        /* Warm taupe */
        --cb-gradient-7: #5d7150;        /* Calm sage */
        --cb-gradient-8: #8a5c30;        /* Muted honey */

        /* Cards and Surfaces */
        --cb-card-background: rgba(46, 36, 28, 0.90);
        --cb-panel-background: rgba(46, 36, 28, 0.65);
        --cb-form-background: rgba(68, 54, 40, 0.85);

        /* Interactive Elements */
        --cb-button-background: rgba(68, 54, 40, 0.90);
        --cb-button-hover-background: rgba(85, 68, 50, 0.85);
        --cb-button-active-background: rgba(100, 80, 58, 0.90);
        --cb-button-group-background: rgba(68, 54, 40, 0.85);
        --cb-widget-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        --cb-navbar-widget-border: none;
        --cb-pill-popup-background: rgba(68, 54, 40, 0.95);
        --cb-input-focus-border: rgba(254, 132, 0, 0.70);
        --cb-input-focus-shadow: rgba(254, 132, 0, 0.25);
        --cb-input-placeholder: rgba(194, 180, 150, 0.60);

        /* Accent Colors (Earth Theme) */
        --cb-accent-mint: #5a9e96;
        --cb-accent-sky: #4a9ec8;
        --cb-accent-blue: #5dade2;
        --cb-accent-blue-hover: #7dc0e8;

        /* Special Elements */
        --cb-section-pill-background: rgba(68, 54, 40, 0.90);
        --cb-section-pill-hover: rgba(85, 68, 50, 0.90);
        --cb-navbar-footer-pill: rgba(100, 70, 40, 0.85);
        --cb-pill-text: #f3ecdb;
        --cb-pill-hover-text: #ffb066;

        /* Text Colors */
        --cb-primary-text: #f3ecdb;
        --cb-secondary-text: #c2b496;
        --cb-muted-text: rgba(194, 180, 150, 0.65);
        --cb-icon-color: #f3ecdb;

        /* Borders and Separators */
        --cb-separator: rgba(212, 181, 137, 0.25);
        --cb-border-light: rgba(212, 181, 137, 0.25);
        --cb-border-medium: rgba(212, 181, 137, 0.35);
        --cb-navbar-border: rgba(212, 181, 137, 0.32);
        --cb-form-border: rgba(212, 181, 137, 0.40);
        --cb-resize-handle: rgba(212, 181, 137, 0.35);
        --cb-resize-handle-hover: rgba(212, 181, 137, 0.65);

        /* Loading Screen */
        --cb-loading-box-background: rgba(46, 36, 28, 0.90);
        --cb-loading-screen-bg: rgba(28, 22, 18, 0.85);
        --cb-loading-container-bg: rgba(30, 24, 18, 0.78);
        --cb-loading-container-border: rgba(255, 255, 255, 0.10);
        --cb-logo-glow: rgba(254, 132, 0, 0.60);
        --cb-progress-border: rgba(212, 181, 137, 0.50);
        --cb-progress-bar-background: #fe8400;

        /* Warm label / status text */
        --cb-warm-label-text: #c2b496;
        --cb-warm-substatus-text: #a08c6b;

        /* Glass UI panels */
        --cb-ui-glass-bg: rgba(46, 36, 28, 0.55);
        --cb-ui-glass-border: rgba(212, 181, 137, 0.20);

        /* Publish/preview modal */
        --cb-publish-modal-bg: #2a2218;
        --cb-publish-modal-border: #3d3326;
        --cb-publish-modal-header-start: #322a1f;
        --cb-publish-modal-header-end: #3d3326;
        --cb-publish-modal-dark-bg: rgba(0, 0, 0, 0.0);
        --cb-publish-modal-accent-bg: rgba(254, 132, 0, 0.10);
        --cb-publish-modal-accent-border: rgba(254, 132, 0, 0.40);
        --cb-publish-modal-accent-text: #c2b496;
        --cb-publish-modal-link-bg: rgba(40, 32, 22, 0.55);
        --cb-publish-modal-link-border: rgba(254, 132, 0, 0.55);
        --cb-publish-modal-link-text: #ffb066;
        --cb-publish-modal-link-hover-bg: rgba(254, 132, 0, 0.18);
        --cb-publish-modal-link-hover-border: #ffb066;

        /* Preview / publish sidebar buttons */
        --cb-preview-btn-color: #e4ab99;
        --cb-preview-btn-border-color: #a45a3c;
        --cb-preview-btn-hover-bg: rgba(212, 152, 115, 0.18);
        --cb-preview-btn-hover-color: #f0c8b8;
        --cb-preview-btn-hover-border: #d49873;
        --cb-preview-btn-active-bg: rgba(212, 152, 115, 0.22);

        /* Sidebar bottom strip */
        --cb-sidebar-bottom-bg: rgba(36, 28, 20, 0.92);

        /* Overlays */
        --cb-overlay-light: rgba(46, 36, 28, 0.40);
        --cb-overlay-medium: rgba(46, 36, 28, 0.90);

        /* Bootstrap Color Overrides (for manual dark mode since we can't use data-bs-theme) */

        /* Body & Background */
        --bs-body-color: #f3ecdb;
        --bs-body-bg: #241e16;
        --bs-border-color: rgba(212, 181, 137, 0.25);
        --bs-focus-ring-color: rgba(254, 132, 0, 0.30);

        /* Theme Colors */
        --bs-primary: #fe8400;
        --bs-primary-gradient-start: #fe8400;
        --bs-primary-gradient-end: #e07600;
        --bs-primary-hover: #ff9a30;
        --bs-primary-hover-gradient-start: #ff9a30;
        --bs-primary-hover-gradient-end: #fe8400;
        --bs-primary-border: rgba(254, 132, 0, 0.50);
        --bs-primary-border-hover: rgba(254, 132, 0, 0.70);
        --bs-outline-primary-border: rgba(254, 132, 0, 0.70);
        --bs-outline-primary-text: #ffb066;
        --bs-outline-primary-hover-bg: linear-gradient(135deg, #fe8400 0%, #e07600 100%);
        --bs-outline-primary-border-hover: rgba(254, 132, 0, 0.90);
        --bs-secondary: rgba(212, 181, 137, 0.50);
        --bs-secondary-bg: rgba(68, 54, 40, 0.85);
        --bs-secondary-hover-bg: rgba(85, 68, 50, 0.90);
        --bs-secondary-border: rgba(212, 181, 137, 0.40);
        --bs-secondary-text: #f3ecdb;
        --bs-success: #52b788;
        --bs-success-bg: rgba(82, 183, 136, 0.20);
        --bs-danger: #e63946;
        --bs-danger-bg: rgba(230, 57, 70, 0.20);
        --bs-warning: #ffb84d;
        --bs-warning-bg: rgba(255, 184, 77, 0.20);
        --bs-warning-border: #ffb84d;
        --bs-danger-gradient-start: #e63946;
        --bs-danger-gradient-end: #d32f2f;
        --bs-danger-hover-gradient-start: #f44336;
        --bs-danger-hover-gradient-end: #e63946;
        --bs-danger-border: rgba(230, 57, 70, 0.50);

        /* Cards & Modals */
        --bs-card-bg: rgba(46, 36, 28, 0.90);
        --bs-card-border-color: rgba(212, 181, 137, 0.20);
        --bs-card-cap-bg: rgba(62, 48, 38, 0.90);
        --bs-modal-bg: rgba(46, 36, 28, 0.95);
        --bs-modal-border-color: rgba(212, 181, 137, 0.25);

        /* Dropdowns */
        --bs-dropdown-bg: rgba(46, 36, 28, 0.95);
        --bs-dropdown-border-color: rgba(212, 181, 137, 0.25);
        --bs-dropdown-link-hover-bg: rgba(212, 181, 137, 0.12);

        /* Tables */
        --bs-table-bg: transparent;
        --bs-table-color: #f3ecdb;
        --bs-table-border-color: rgba(212, 181, 137, 0.20);
        --bs-table-hover-bg: rgba(212, 152, 115, 0.10);

        /* Tinted Windows (light tint over animated background) */
        --cb-panel-tint: rgba(46, 36, 28, 0.47);
        --cb-navbar-tint: rgba(62, 50, 38, 0.92);

        /* Sidebar bottom background */
        --cb-sidebar-bottom-background: rgba(46, 36, 28, 0.94);

        /* Tab Elements */
        --cb-tab-button-border: rgba(212, 181, 137, 0.28);
        --cb-tab-highlight-border: rgba(254, 132, 0, 0.35);
        --cb-tab-highlight-bg: rgba(254, 132, 0, 0.12);
        --cb-tab-button-hover-bg: rgba(212, 181, 137, 0.10);

        /* Media Library */
        --cb-media-grid-bg: rgba(46, 36, 28, 0.85);
        --cb-media-tile-bg: rgba(62, 48, 38, 0.8);
        --cb-media-tile-border: rgba(212, 152, 115, 0.2);
        --cb-media-tile-shadow: rgba(164, 90, 60, 0.1);
        --cb-media-tile-hover-shadow: rgba(212, 152, 115, 0.2);
        --cb-media-icon-bg: rgba(212, 152, 115, 0.08);
        --cb-media-table-header-bg: rgba(74, 56, 42, 0.9);
        --cb-media-table-border: rgba(212, 152, 115, 0.15);
        --cb-media-table-hover-bg: rgba(212, 152, 115, 0.12);
        --cb-popup-bg: #2e241c;
        --cb-media-panel-bg: rgba(38, 30, 22, 0.94);
        --cb-media-panel-border: rgba(212, 152, 115, 0.25);
        --cb-media-panel-input-bg: rgba(255, 255, 255, 0.1);

        /* Tooltips */
        --cb-tooltip-background: rgba(46, 36, 28, 0.96);
        --cb-tooltip-text: #f0e6d2;
        --bs-tooltip-bg: rgba(46, 36, 28, 0.96);
        --bs-tooltip-color: #f0e6d2;

        /* Modal Header Gradients (Earth Theme — slightly deeper for dark contrast) */
        --cb-modal-blue-start: #0066cc;
        --cb-modal-blue-end: #004d99;
        --cb-modal-caramel-start: #6e4530;
        --cb-modal-caramel-mid: #8a5c30;
        --cb-modal-caramel-end: #d49873;
        --cb-modal-green-start: #228844;
        --cb-modal-green-end: #196a30;
        --cb-modal-green-teal-start: #228844;
        --cb-modal-green-teal-end: #1aa87d;
        --cb-modal-orange-start: #dd8400;
        --cb-modal-orange-end: #cc6600;
        --cb-modal-red-start: #cc0000;
        --cb-modal-red-end: #aa0000;

        /* Rich Text Pill Sub-panels (font family / weight / size) */
        --cb-pill-panel-bg: rgba(46, 36, 28, 0.97);
        --cb-pill-panel-border: rgba(212, 152, 115, 0.2);
        --cb-pill-panel-text: #f0e6d2;
        --cb-pill-panel-text-muted: #a08060;
        --cb-pill-panel-item-hover: rgba(255, 255, 255, 0.08);
        --cb-pill-panel-input-bg: rgba(255, 255, 255, 0.1);
        --cb-pill-panel-input-border: rgba(212, 152, 115, 0.3);

        /* Code Editor (CustomCodeEditorSimple) */
        --cb-code-bg: #0d1117;
        --cb-code-text: #c9d1d9;
        --cb-code-line-num-bg: #161b22;
        --cb-code-line-num-border: #30363d;
        --cb-code-line-num-text: #8b949e;
        --cb-code-caret: #c9d1d9;
        --cb-code-comment: #8b949e;
        --cb-code-html-tag: #7ee787;
        --cb-code-html-attr: #d2a8ff;
        --cb-code-html-string: #a5d6ff;
        --cb-code-css-prop: #79c0ff;
        --cb-code-css-selector: #d2a8ff;
        --cb-code-css-hex: #ffa657;
        --cb-code-css-number: #a5d6ff;
        --cb-code-js-keyword: #ff7b72;
        --cb-code-js-string: #a5d6ff;
        --cb-code-js-number: #79c0ff;

        /* Links and Text Hover */
        --bs-link-hover-color: #ffb066;

        /* Browser Tab Preview (mimics real browser dark mode tab colors - Chrome/Edge style) */
        --cb-browser-tab-bg: #292a2d;
        --cb-browser-tab-border: #3c3c3c;
        --cb-browser-tab-text: #e8eaed;
        --cb-browser-tab-icon: #9aa0a6;
        --cb-browser-tab-close: #9aa0a6;
        --cb-browser-tab-close-hover: #e8eaed;


        --lhs-surface: rgba(58, 46, 34, 0.85);
        --lhs-surface-hover: rgba(70, 56, 42, 0.92);
        --lhs-surface-strong: rgba(68, 54, 40, 0.95);
        --lhs-border: rgba(255, 255, 255, 0.12);
        --lhs-border-strong: rgba(255, 255, 255, 0.22);
        --lhs-text: #f3ecdb;
        --lhs-text-soft: #c2b496;
        --lhs-text-faint: #8c7e66;
        --lhs-accent-soft: rgba(254, 132, 0, 0.16);
        --lhs-shadow-card:
            0 1px 2px rgba(0, 0, 0, 0.40),
            0 3px 10px rgba(0, 0, 0, 0.35),
            0 10px 24px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        --lhs-shadow-hover:
            0 1px 2px rgba(0, 0, 0, 0.50),
            0 6px 18px rgba(0, 0, 0, 0.50),
            0 16px 36px rgba(0, 0, 0, 0.40),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
        --lhs-shadow-active:
            0 0 0 1px var(--lhs-accent),
            0 6px 22px rgba(254, 132, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .dropdown-menu {
        --bs-dropdown-bg: rgba(46, 36, 28, 0.95);
    }
}