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

/* ==========================================================================
   THEME VARIABLES — the single source of truth for light/dark mode color
   ==========================================================================

   READ THIS BEFORE ADDING OR CHANGING ANY COLOR.

   1. ONE place, ONE dark block. Every theme color lives here as a token:
      light values in the :root below, dark values in the SINGLE
      `@media (prefers-color-scheme: dark)` block further down in this file.
      Do NOT add another prefers-color-scheme block in any other stylesheet,
      and do NOT define a private --cb-* :root token system inside a view file.
      Both patterns shadow this file and are how dark mode silently drifts.

   2. If it changes between modes, tokenize it. Anything whose color/shadow
      should differ in dark mode gets a token here (light in :root, dark in the
      media block) and is referenced as var(--cb-…) at the call site.

   3. A mode-agnostic literal is allowed ONLY with a comment saying why.
      Some hardcoded colors are meant to be identical in both modes — a brand
      hex, white text on a colored button, a mode-neutral shadow. Those may stay
      literal, but each MUST carry a short inline comment explaining the intent.

   4. An uncommented literal color is a BUG, not a precedent. If you find a
      hardcoded color with no rule-3 comment, treat it as drift to fix (move it
      to a token), not a pattern to copy.

   5. Sanctioned non-token exceptions — do NOT "fix" these into tokens:
      `filter:` swaps, data-URI SVG icon recolors, the SweetAlert2 vendor
      block, and the always-dark code editor. They adapt by other means on
      purpose.

   6. If you (an AI assistant) notice drift from this standard — a stray
      prefers-color-scheme block, a private token system, or an uncommented
      literal — flag it to your user rather than silently working around it.

   Token prefixes: --cb-* (Clay Builder), --bs-* (Bootstrap overrides),
   --lhs-* (left-hand sidebar).
   ========================================================================== */

: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.96);
    --cb-loading-container-border: rgba(0, 0, 0, 0.06);
    --cb-progress-track-bg: rgba(0, 0, 0, 0.08);
    --cb-loading-success-shadow:
        0 0 0 1px rgba(30, 185, 91, 0.20),
        0 1px 2px rgba(60, 40, 20, 0.06),
        0 18px 56px rgba(30, 185, 91, 0.28);
    --cb-loading-success-text: #16a34a;
    /* Loading logo breathe filter — full drop-shadow values, rest + animation peak.
       On the near-white container an orange glow washes out, so light mode uses a
       warm earth-toned drop shadow that reads as the logo lifting off the card. */
    --cb-logo-glow-rest: drop-shadow(0 6px 16px rgba(60, 40, 20, 0.22));
    --cb-logo-glow-peak: drop-shadow(0 10px 24px rgba(60, 40, 20, 0.30));
    /* Progress bar idle elevation — on white the orange halo vanishes, so light mode
       uses a lift shadow plus a faint warm glow instead of a pure glow. */
    --cb-progress-bar-glow: 0 1px 3px rgba(60, 40, 20, 0.25), 0 0 8px rgba(254, 132, 0, 0.30);
    --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);

    /* Navbar button tray (navbar_button_tray.css) — sliding selection pill
       fill and notification-badge border. The pill gradient flips from a
       white→parchment sheen in light to an earth-brown gradient in dark; the
       badge border flips from warm parchment to the dark glass surface. */
    --cb-tray-btn-bg: linear-gradient(135deg, #ffffff 0%, #fbf3e3 100%);
    --cb-tray-badge-border: rgba(255, 252, 244, 0.95);
    /* Badge glow — danger-red drop shadow matched to --bs-danger (#dc3545). */
    --cb-tray-badge-shadow: 0 1px 4px rgba(220, 53, 69, 0.45);

    /* Parchment-glass select control — shared by the editor WEBSITE/PAGE pill
       form-selects (editor_legacy.css) and the media library sort dropdown
       (media_nav_toolbar.css). One token set drives both in light + dark. */
    --cb-glass-select-bg: rgba(255, 255, 255, 0.70);
    --cb-glass-select-border: rgba(255, 255, 255, 0.55);
    --cb-glass-select-text: #3d2f20;
    --cb-glass-select-hover-bg: rgba(255, 255, 255, 0.85);
    --cb-glass-select-hover-border: rgba(212, 181, 137, 0.50);
    --cb-glass-select-focus-border: rgba(255, 255, 255, 0.9);
    /* Resting inset shadow + focus glow ring. Both flip between modes: light
       uses a faint warm inset + an orange focus glow; dark uses a deeper inset
       for both the resting shadow and the focus ring. */
    --cb-glass-select-shadow: inset 0 1px 2px rgba(60, 40, 20, 0.04);
    --cb-glass-select-focus-shadow: 0 0 0 2px rgba(254, 132, 0, 0.18);

    /* 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;
    --cb-publish-modal-link-hover-text: #8c4400;
    --cb-publish-modal-content-shadow:
        0 1px 2px rgba(60, 40, 20, 0.06),
        0 20px 56px rgba(60, 40, 20, 0.22);
    --cb-publish-modal-row-bg: var(--lhs-surface);
    --cb-publish-modal-row-hover-bg: var(--lhs-surface-hover);
    --cb-publish-modal-row-hover-border: var(--lhs-border-strong);
    --cb-publish-modal-row-hover-shadow: 0 4px 12px rgba(60, 40, 20, 0.08);
    --cb-publish-modal-row-published-bg: rgba(254, 132, 0, 0.04);
    --cb-publish-modal-row-published-shadow:
        0 0 0 1px rgba(254, 132, 0, 0.25),
        0 4px 12px rgba(254, 132, 0, 0.15);
    /* CTA orange gradient + shadows — mode-agnostic by design */
    --cb-publish-modal-cta-bg: linear-gradient(135deg, #ff9930 0%, #fe8400 60%, #e07600 100%);
    --cb-publish-modal-cta-bg-hover: linear-gradient(135deg, #ffa345 0%, #ff8e10 60%, #e07600 100%);
    --cb-publish-modal-cta-border: rgba(180, 90, 0, 0.45);
    --cb-publish-modal-cta-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 6px rgba(254, 132, 0, 0.30);
    --cb-publish-modal-cta-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 3px 10px rgba(254, 132, 0, 0.42);
    --cb-publish-modal-cta-text-shadow: 0 1px 0 rgba(120, 60, 0, 0.22);
    /* Badge variant of the CTA gradient */
    --cb-publish-modal-badge-bg: linear-gradient(135deg, #ff9930 0%, #fe8400 100%);
    --cb-publish-modal-badge-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 6px rgba(254, 132, 0, 0.28);
    --cb-publish-modal-badge-text-shadow: 0 1px 0 rgba(120, 60, 0, 0.20);
    /* Tabs */
    --cb-publish-modal-tab-active-text: #fe8400;
    --cb-publish-modal-tab-count-bg: rgba(254, 132, 0, 0.12);
    --cb-publish-modal-tab-count-text: #c25e00;
    --cb-publish-modal-tab-active-count-text: #ffffff;

    /* 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;
    /* Bootstrap 5.3 "subtle" vars consumed by canvas_modal.css (faint accent/danger tints). */
    --bs-primary-bg-subtle: rgba(13, 110, 253, 0.12);
    --bs-danger-border-subtle: rgba(220, 53, 69, 0.18);
    --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;

    /* Right-click Context Menu + submenus (editor canvas) */
    --cb-context-menu-surface: #ffffff;
    --cb-context-menu-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    --cb-context-menu-item-text: #1c1e21;
    --cb-context-menu-item-hover-bg: #f0f2f5;
    --cb-context-menu-item-hover-text: #007bff;
    --cb-context-menu-header-bg: rgba(0, 0, 0, 0.045);
    --cb-context-menu-header-border: rgba(0, 0, 0, 0.10);
    --cb-context-menu-header-name-text: #1c1e21;
    --cb-context-menu-header-type-text: rgba(28, 30, 33, 0.55);
    --cb-context-menu-separator: rgba(0, 0, 0, 0.15);
    --cb-context-menu-danger-bg: #dc3545;
    --cb-context-menu-danger-hover-bg: #e88a94;
    --cb-context-menu-danger-text: #ffffff;
    --cb-context-menu-danger-hover-text: #1c1e21;

    /* Broken external link accent (editor sidebar). Distinct from --bs-danger
       so the cue stays a fixed crimson regardless of the danger button palette. */
    --cb-broken-link: #dc2626;
    --cb-broken-link-focus-ring: rgba(220, 38, 38, 0.25);

    /* Section "Danger Zone" delete affordance (editor Settings accordion).
       Light reds are the Bootstrap-danger family (#dc3545); caption text is
       red-700 (#b91c1c). Distinct from --cb-broken-link's #dc2626. */
    --cb-section-delete-row-border: rgba(220, 53, 69, 0.28);
    --cb-section-delete-row-bg: rgba(220, 53, 69, 0.06);
    --cb-section-delete-caption-text: #b91c1c;

    /* Media panel delete button (outline destructive). Danger family (#dc3545);
       border/hover alphas preserve the original subtle outline. */
    --cb-media-delete-text: #dc3545;
    --cb-media-delete-border: rgba(220, 53, 69, 0.3);
    --cb-media-delete-hover-bg: rgba(220, 53, 69, 0.08);
    --cb-media-delete-hover-text: #b02a37;

    /* Clayton AI chatbot brand gradient — mode-agnostic (same in both themes). */
    --cb-clayton-brand-pink: #ea66b6;
    --cb-clayton-brand-purple: #7e40c9;
    --cb-clayton-brand-glow: rgba(234, 102, 182, 0.4);

    /* Editor onboarding tour (tooltip cards, spotlight overlay, launcher). */
    --cb-tour-spotlight-dim: rgba(8, 8, 12, 0.66);
    --cb-tour-card-bg: rgba(255, 255, 255, 0.98);
    --cb-tour-card-shadow: 0 24px 48px rgba(0, 0, 0, 0.22), 0 6px 18px rgba(0, 0, 0, 0.12);
    --cb-tour-announce-shadow: 0 32px 80px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(254, 132, 0, 0.12);
    --cb-tour-launcher-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
    --cb-tour-text-secondary: rgba(0, 0, 0, 0.55);
    --cb-tour-text-body: rgba(0, 0, 0, 0.7);
    --cb-tour-progress-track: rgba(0, 0, 0, 0.08);
    --cb-tour-chip-bg: linear-gradient(135deg, rgba(254, 132, 0, 0.14), rgba(254, 132, 0, 0.06));
    --cb-tour-chip-border: rgba(254, 132, 0, 0.32);
    --cb-tour-chip-text: #c75c00;
    --cb-tour-ghost-text: rgba(0, 0, 0, 0.65);
    --cb-tour-ghost-border: rgba(0, 0, 0, 0.08);
    --cb-tour-ghost-bg: rgba(0, 0, 0, 0.02);
    --cb-tour-ghost-hover-bg: rgba(0, 0, 0, 0.06);
    --cb-tour-ghost-hover-text: #1a1a1a;

    /* Create-website onboarding step tracker — sits on the orange hero panel,
       so these stay mode-agnostic (identical in light and dark). */
    --cb-stepper-fill: #ffffff;
    --cb-stepper-dot-bg: rgba(255, 255, 255, 0.16);
    --cb-stepper-dot-border: rgba(255, 255, 255, 0.32);
    --cb-stepper-dot-text: #ffffff;
    --cb-stepper-active-bg: #ffffff;
    --cb-stepper-active-text: #d6660d;
    --cb-stepper-done-bg: #ffffff;
    --cb-stepper-done-text: #b45c00;

    /* Navbar/footer link-card drag + hover affordances (editor sidebar).
       Same values in both modes — the bright blues and green tint read on
       the dark earth sidebar surface, so no dark variant is needed. */
    --cb-link-card-hover-border: #86b7fe;
    --cb-link-card-drag-over-bg: rgba(25, 135, 84, 0.1);
    --cb-link-card-placeholder-border: #007bff;
    --cb-link-card-placeholder-bg: rgba(0, 123, 255, 0.1);

    /* 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: rgb(60, 44, 28);
    --cb-tooltip-text: #f7ecd7;
    --bs-tooltip-bg: rgb(60, 44, 28);
    --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;

    /* Per-modal banner identities (restored color-coding) */
    --cb-modal-canvas-banner: linear-gradient(135deg, #7b2ff7 0%, #b02fbf 100%);
    --cb-modal-gradient-banner: linear-gradient(135deg, #8e2de2 0%, #d6249f 50%, #ff5e8a 100%);
    --cb-modal-mediaupload-banner: linear-gradient(135deg, #0fb5ba 0%, #0789a8 100%);
    --cb-modal-video-banner: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    --cb-modal-audio-banner: linear-gradient(135deg, #f0a500 0%, #e85d75 100%);
    --cb-modal-image-banner: linear-gradient(135deg, #00bcd4 0%, #0097c7 100%);
    --cb-modal-addcomponent-banner: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    --cb-modal-shape-banner: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);

    /* 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;

    /* Component Pill Toolbar (floating rich-text formatting pill) */
    --cb-pill-toolbar-surface: linear-gradient(145deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(240, 245, 255, 0.9) 100%);
    --cb-pill-toolbar-border: rgba(255, 255, 255, 0.4);
    --cb-pill-toolbar-shadow:
        0 12px 40px rgba(0, 0, 0, 0.18),
        0 4px 16px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    /* Default button surface (the neutral gray glass used by most buttons) */
    --cb-pill-btn-surface: linear-gradient(145deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(240, 245, 255, 0.8) 100%);
    --cb-pill-btn-surface-hover: var(--cb-pill-btn-surface);
    --cb-pill-btn-text: #495057;
    --cb-pill-btn-text-hover: #495057;
    --cb-pill-btn-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    --cb-pill-btn-shadow-hover:
        0 6px 20px rgba(0, 0, 0, 0.18),
        0 3px 10px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    --cb-pill-btn-shimmer: rgba(255, 255, 255, 0.6);
    /* Generic active (formatting) button — blue accent */
    --cb-pill-btn-active-surface: linear-gradient(145deg,
        rgba(0, 123, 255, 0.9) 0%,
        rgba(0, 105, 217, 0.8) 100%);
    --cb-pill-btn-active-surface-hover: linear-gradient(145deg,
        rgba(0, 105, 217, 0.9) 0%,
        rgba(0, 86, 179, 0.8) 100%);
    --cb-pill-btn-active-text: #ffffff;
    --cb-pill-btn-active-shadow:
        0 4px 12px rgba(0, 123, 255, 0.3),
        0 2px 6px rgba(0, 123, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    /* Move forward/back/backward buttons */
    --cb-pill-move-back-surface: linear-gradient(145deg,
        rgba(235, 245, 255, 0.9) 0%,
        rgba(226, 240, 255, 0.8) 100%);
    --cb-pill-move-back-surface-hover: linear-gradient(145deg,
        rgba(215, 235, 255, 0.95) 0%,
        rgba(206, 230, 255, 0.85) 100%);
    --cb-pill-move-back-text: #007bff;
    --cb-pill-move-back-text-hover: #0056b3;
    --cb-pill-move-forward-surface: linear-gradient(145deg,
        rgba(240, 255, 240, 0.9) 0%,
        rgba(230, 255, 230, 0.8) 100%);
    --cb-pill-move-forward-surface-hover: linear-gradient(145deg,
        rgba(220, 255, 220, 0.95) 0%,
        rgba(210, 255, 210, 0.85) 100%);
    --cb-pill-move-forward-text: #28a745;
    --cb-pill-move-forward-text-hover: #1e7e34;
    --cb-pill-move-backward-surface: linear-gradient(145deg,
        rgba(255, 245, 235, 0.9) 0%,
        rgba(255, 235, 215, 0.8) 100%);
    --cb-pill-move-backward-surface-hover: linear-gradient(145deg,
        rgba(255, 225, 195, 0.95) 0%,
        rgba(255, 215, 175, 0.85) 100%);
    --cb-pill-move-backward-text: #fd7e14;
    --cb-pill-move-backward-text-hover: #e55a00;
    /* Per-category accent colors (deliberate UX — preserved per group) */
    --cb-pill-accent-format-surface: linear-gradient(145deg,
        rgba(245, 240, 255, 0.9) 0%,
        rgba(235, 225, 255, 0.8) 100%);
    --cb-pill-accent-format-surface-hover: linear-gradient(145deg,
        rgba(235, 220, 255, 0.95) 0%,
        rgba(225, 210, 255, 0.85) 100%);
    --cb-pill-accent-format-text: #6610f2;
    --cb-pill-accent-format-text-hover: #520dc2;
    --cb-pill-accent-format-active: #6610f2;
    --cb-pill-accent-format-active-text: rgba(245, 240, 255, 1);
    --cb-pill-accent-format-active-hover: #520dc2;
    --cb-pill-accent-align-surface: linear-gradient(145deg,
        rgba(230, 250, 250, 0.9) 0%,
        rgba(220, 245, 245, 0.8) 100%);
    --cb-pill-accent-align-surface-hover: linear-gradient(145deg,
        rgba(210, 245, 245, 0.95) 0%,
        rgba(200, 240, 240, 0.85) 100%);
    --cb-pill-accent-align-text: #17a2b8;
    --cb-pill-accent-align-text-hover: #117a8b;
    --cb-pill-accent-align-active: #17a2b8;
    --cb-pill-accent-align-active-text: rgba(230, 250, 250, 1);
    --cb-pill-accent-align-active-hover: #117a8b;
    /* Bottom-row idle text doubles as hover text in light (no color shift) */
    --cb-pill-accent-list-text: #16a34a;
    --cb-pill-accent-list-text-hover: #16a34a;
    --cb-pill-accent-list-active: #16a34a;
    --cb-pill-accent-list-active-hover: #15803d;
    --cb-pill-accent-link-text: #2563eb;
    --cb-pill-accent-link-text-hover: #2563eb;
    --cb-pill-accent-link-active: #2563eb;
    --cb-pill-accent-link-active-hover: #1d4ed8;
    --cb-pill-accent-font-family-text: #ea580c;
    --cb-pill-accent-font-family-text-hover: #ea580c;
    --cb-pill-accent-font-family-active: #ea580c;
    --cb-pill-accent-font-family-active-hover: #c2410c;
    --cb-pill-accent-text-color-text: #db2777;
    --cb-pill-accent-text-color-text-hover: #db2777;
    --cb-pill-accent-text-color-active: #db2777;
    --cb-pill-accent-text-color-active-hover: #be185d;
    --cb-pill-accent-font-weight-text: #4f46e5;
    --cb-pill-accent-font-weight-text-hover: #4f46e5;
    --cb-pill-accent-font-weight-active: #4f46e5;
    --cb-pill-accent-font-weight-active-hover: #4338ca;
    --cb-pill-accent-font-size-text: #0891b2;
    --cb-pill-accent-font-size-text-hover: #0891b2;
    --cb-pill-accent-font-size-active: #0891b2;
    --cb-pill-accent-font-size-active-hover: #0e7490;
    /* Delete button (shared light/dark) */
    --cb-pill-delete-surface: #dc3545;
    --cb-pill-delete-surface-hover: #c82333;
    --cb-pill-delete-text: #ffffff;
    /* Separator + drag handle */
    --cb-pill-separator: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 20%,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(0, 0, 0, 0.1) 80%,
        transparent 100%);
    --cb-pill-drag-handle-bg: rgba(255, 255, 255, 0.95);
    --cb-pill-drag-handle-border: rgba(0, 0, 0, 0.1);
    --cb-pill-drag-handle-grip: #6c757d;

    /* 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;
    /* Sidebar hide/lock UI hover/active accent. Intentionally identical
       in light and dark (no dark override). */
    --lhs-accent-strong: #5a35a0;
    --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);

    /* Snap-layout picker: header gradient, preview canvas, size-tier slots, card borders */
    --cb-snap-header-start: #9fcc00;
    --cb-snap-header-end: #998f00;
    --cb-snap-preview-canvas: #fafafa;
    --cb-snap-slot-small: #e3f2fd;
    --cb-snap-slot-medium: #bbdefb;
    --cb-snap-slot-large: #90caf9;
    --cb-snap-slot-xl: #64b5f6;
    --cb-snap-slot-fallback: #f5f5f5;
    --cb-snap-slot-border: white;
    --cb-snap-slot-label: #555;
    --cb-snap-card-border: #5f5f5f;
    --cb-snap-card-border-hover: #dee2e6;

    /* Wave editor modal: indigo accent identity (the wave's signature color,
       like snap-layout's lime). Header gradient runs indigo→violet; the soft
       tint/hover tint sit behind preset cards. Canvas stays a fixed light
       workspace (see --cb-wave-canvas-* below) regardless of theme. */
    --cb-wave-accent: #4f46e5;
    --cb-wave-accent-hover: #4338ca;
    --cb-wave-accent-violet: #7c3aed;
    --cb-wave-accent-text: #ffffff;
    --cb-wave-accent-soft: #f0f0ff;            /* preset-card hover fill */
    --cb-wave-accent-tint-strong: rgba(79, 70, 229, 0.15);
    --cb-wave-accent-tint-soft: rgba(79, 70, 229, 0.1);
    /* Legend dots mirror the canvas drawing colors (WaveController.js) — kept
       as dedicated tokens so the hues stay matched to the canvas in both modes. */
    --cb-wave-anchor-dot: #ff6b6b;             /* red = anchor points */
    --cb-wave-control-dot: #51cf66;            /* green = control points */
    /* Fixed light drawing surface — mode-agnostic. The canvas grid/points are
       drawn with literal light-surface colors in WaveController.js, so this
       stays light in dark mode by design (dark chrome around a light canvas). */
    --cb-wave-canvas-bg: #ffffff;
    --cb-wave-canvas-border: #dee2e6;
    --cb-wave-canvas-instructions-bg: #e9ecef;
    --cb-wave-canvas-instructions-text: #6c757d;
    /* Inactive mode-toggle button (anchor/control/move/remove) — neutral chip
       distinct from the indigo active state. */
    --cb-wave-mode-inactive-bg: #6c757d;
    --cb-wave-mode-inactive-text: #ffffff;

    /* editor.css — collapsed local dark blocks */
    --cb-swal-thumb-bg: rgba(0, 0, 0, 0.05);
    --cb-swal-placeholder-icon: rgba(0, 0, 0, 0.45);
    --cb-tooltip-border: rgba(212, 181, 137, 0.45);
    --cb-tooltip-shadow:
        inset 0 1px 0 rgba(255, 235, 200, 0.10),
        0 0 0 1px rgba(247, 236, 215, 0.18),
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.25);
    --cb-sidebar-shell-bg: linear-gradient(180deg, rgba(232, 218, 195, 0.55) 0%, rgba(220, 204, 178, 0.58) 100%);
    --cb-sidebar-shell-shadow:
        1px 0 0 rgba(255, 255, 255, 0.5) inset,
        inset 4px 0 16px -8px rgba(0, 0, 0, 0.06);
    --cb-section-add-divider: var(--lhs-border, #ddd0b8);
    --cb-add-section-bg: linear-gradient(135deg, #7ca06a 0%, #6b8e5a 60%, #587a47 100%);
    --cb-add-section-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.12),
        0 6px 16px rgba(74, 106, 61, 0.34);
    --cb-add-section-hover-bg: linear-gradient(135deg, #88ad77 0%, #759c64 60%, #5f834c 100%);
    --cb-add-section-hover-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.16),
        0 10px 24px rgba(74, 106, 61, 0.44);
    --cb-struct-card-bg: #eaf0f0;
    --cb-struct-card-border: #c4d2d2;
    --cb-struct-card-hover-bg: #dfe8e8;
    --cb-struct-card-hover-border: #a8bcbc;
    --cb-struct-card-active-border: #6b8e8b;
    --cb-struct-card-active-shadow:
        0 0 0 1px #6b8e8b,
        0 4px 12px rgba(107, 142, 139, 0.20),
        0 2px 4px rgba(0, 0, 0, 0.06);

    /* public_navbar.css — collapsed local dark blocks */
    --cb-pubnav-bg:
        radial-gradient(ellipse 55% 110% at 96% -10%, rgba(212, 152, 115, 0.22), transparent 65%),
        radial-gradient(ellipse 45% 100% at 4% 110%, rgba(155, 184, 158, 0.18), transparent 70%),
        linear-gradient(180deg, #fbf6ec 0%, #f3e9d4 100%);
    --cb-pubnav-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 1px 2px rgba(60, 40, 20, 0.06),
        0 12px 28px rgba(60, 40, 20, 0.14),
        0 28px 56px rgba(60, 40, 20, 0.08);
    --cb-pubnav-underline: linear-gradient(
        90deg,
        rgba(168, 138, 96, 0) 0%,
        rgba(212, 152, 115, 0.65) 30%,
        rgba(155, 184, 158, 0.65) 70%,
        rgba(168, 138, 96, 0) 100%
    );
    --cb-pubnav-link-text: #3a2f25;
    --cb-pubnav-ghost-text: #6b5840;
    --cb-pubnav-ghost-hover-text: #b07a4d;
    --cb-pubnav-ghost-hover-bg: rgba(212, 152, 115, 0.12);
    --cb-pubnav-outline-border: rgba(142, 124, 104, 0.55);
    --cb-pubnav-outline-hover-text: #2c2a29;
    --cb-pubnav-outline-hover-border: rgba(120, 100, 75, 0.9);
    --cb-pubnav-outline-hover-bg: rgba(255, 248, 235, 0.85);
    --cb-pubnav-outline-hover-shadow: 0 4px 12px rgba(168, 138, 96, 0.18);
    --cb-pubnav-primary-text: #ffffff;
    --cb-pubnav-primary-bg: #b07a4d;
    --cb-pubnav-primary-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 4px 14px rgba(176, 122, 77, 0.32),
        0 1px 2px rgba(60, 40, 20, 0.12);
    --cb-pubnav-primary-hover-bg: #8e7c68;
    --cb-pubnav-primary-hover-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 7px 18px rgba(142, 124, 104, 0.42),
        0 1px 2px rgba(60, 40, 20, 0.12);
    --cb-pubnav-toggler-border: rgba(168, 138, 96, 0.6);
    --cb-pubnav-toggler-hover-bg: rgba(212, 152, 115, 0.12);
    --cb-pubnav-toggler-hover-border: rgba(176, 122, 77, 0.85);
    --cb-pubnav-mobile-bg: rgba(255, 248, 235, 0.96);
    --cb-pubnav-mobile-border: rgba(168, 138, 96, 0.25);
    --cb-pubnav-mobile-header-border: rgba(168, 138, 96, 0.20);

    /* editor_legacy.css — collapsed local dark blocks */
    --cb-insert-line-bg: rgba(0, 0, 0, 0.6);
    --cb-insert-icon-bg: rgb(255, 255, 255);
    --cb-insert-icon-border: black;
    --cb-insert-icon-text: black;

    /* settings.css — collapsed local dark block */
    --cb-settings-search-border: rgba(255, 255, 255, 0.55);
    --cb-settings-search-hover-border: rgba(212, 181, 137, 0.50);
    --cb-settings-search-focus-glow: 0 0 0 0.2rem rgba(212, 181, 137, 0.50);

    /* navbar.css — collapsed local dark blocks */
    --cb-navbar-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 1px 2px rgba(60, 40, 20, 0.06),
        0 10px 24px rgba(60, 40, 20, 0.14),
        0 24px 48px rgba(60, 40, 20, 0.10);
    --cb-navbar-divider-gradient: linear-gradient(
        90deg,
        rgba(168, 138, 96, 0) 0%,
        rgba(212, 152, 115, 0.65) 30%,
        rgba(155, 184, 158, 0.65) 70%,
        rgba(168, 138, 96, 0) 100%
    );

    /* navbar_button_tray.css — collapsed local dark blocks */
    --cb-tray-pill-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(212, 152, 115, 0.25),
        0 6px 18px rgba(60, 40, 20, 0.12);
    --cb-tray-pill-border: rgba(212, 152, 115, 0.40);
    --cb-tray-text-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(212, 152, 115, 0.20),
        0 6px 16px rgba(60, 40, 20, 0.10);
    --cb-tray-text-border: rgba(212, 152, 115, 0.35);
    --cb-tray-text-border-hover: rgba(212, 152, 115, 0.60);
    --cb-tray-text-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 3px 10px rgba(212, 152, 115, 0.30),
        0 10px 24px rgba(60, 40, 20, 0.14);

    /* media_upload_modal.css — collapsed local dark block */
    --cb-media-empty-border: #e5dccb;
    --cb-media-empty-border-strong: #d1c3a8;
    --cb-media-empty-shadow-card: 0 8px 24px rgba(60, 40, 20, 0.10);
    --cb-media-empty-shadow-chip: 0 1px 2px rgba(60, 40, 20, 0.04);

    /* media_nav_toolbar.css — collapsed local dark block */
    --cb-media-sort-border: rgba(255, 255, 255, 0.55);
    --cb-media-sort-hover-border: rgba(212, 181, 137, 0.50);
    --cb-media-sort-focus-shadow: 0 0 0 0.2rem rgba(212, 181, 137, 0.50);

    /* Support marketing site (templates/support/base.html) — hero gradient strip
       and warning alert. The hero is a 4-layer composite (two earth-tone radial
       washes + a top highlight + a parchment base ramp); the dark variant drops
       the highlight layer and runs a dark earth base. */
    --cb-support-hero-bg:
        radial-gradient(ellipse 60% 80% at 15% 20%, rgba(176, 122, 77, 0.22), transparent 55%),
        radial-gradient(ellipse 50% 70% at 85% 80%, rgba(138, 153, 116, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
        linear-gradient(160deg, #f0e0c8 0%, #ecdbc0 40%, #e4d4b8 70%, #e8d8be 100%);
    --cb-support-hero-border: rgba(168, 138, 96, 0.35);
    --cb-support-alert-bg: #fdecea;
    --cb-support-alert-border: #f5b7b1;
    --cb-support-alert-text: #922b21;

    /* User account dropdown (cb-usermenu) — shared by public_navbar.css and the
       templates/support/base.html inline copy. Trigger chrome + caret/icon/email
       reuse the pubnav + text-faint tokens; these cover the dropdown panel,
       header name, divider, item, and danger states that have no existing match. */
    --cb-usermenu-dropdown-bg: #ffffff;
    --cb-usermenu-dropdown-border: rgba(168, 138, 96, 0.35);
    --cb-usermenu-dropdown-shadow:
        0 4px 12px rgba(60, 40, 20, 0.10),
        0 18px 40px rgba(60, 40, 20, 0.14);
    --cb-usermenu-text-strong: #1f1a14;        /* header name + item hover text */
    --cb-usermenu-divider: rgba(168, 138, 96, 0.25);
    --cb-usermenu-item-text: #3a2f25;          /* also the resting danger item color */
    --cb-usermenu-item-hover-bg: rgba(212, 152, 115, 0.12);
    --cb-usermenu-item-hover-icon: #b07a4d;
    --cb-usermenu-danger-hover-bg: rgba(220, 53, 69, 0.08);
    --cb-usermenu-danger-hover-text: #b02a37;

    /* ===== Consolidated from per-page private token systems (index/profile/auth/create_website/billing) ===== */
    --cb-accent: #fe8400;
    --cb-accent-hover: #e07600;
    --cb-accent-soft: #fff2e0;
    --cb-auth-aside-bg: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.18), transparent 45%), linear-gradient(155deg, #ff9d2f 0%, #fe8400 38%, #d6660d 72%, #a8521f 100%);
    --cb-auth-aside-glow: radial-gradient(circle, rgba(168, 60, 0, 0.45), transparent 65%);
    --cb-badge-unverified-bg: rgba(218, 165, 32, 0.14);
    --cb-badge-unverified-border: rgba(218, 165, 32, 0.30);
    --cb-badge-unverified-text: #b8862b;
    --cb-badge-verified-bg: rgba(30, 185, 91, 0.12);
    --cb-badge-verified-border: rgba(30, 185, 91, 0.30);
    --cb-badge-verified-text: #1eb95b;
    --cb-border: #e5dccb;
    --cb-border-strong: #d1c3a8;
    --cb-card-shadow: 0 1px 2px rgba(60, 40, 20, 0.06), 0 10px 30px rgba(60, 40, 20, 0.12), 0 30px 60px rgba(60, 40, 20, 0.08);
    --cb-index-card-shadow: 0 1px 2px rgba(60, 40, 20, 0.05), 0 1px 4px rgba(60, 40, 20, 0.04);
    --cb-card-shadow-hover: 0 1px 2px rgba(60, 40, 20, 0.06), 0 6px 16px rgba(60, 40, 20, 0.08), 0 18px 36px rgba(254, 132, 0, 0.10);
    --cb-cardmenu-shadow: 0 16px 40px rgba(60, 40, 20, 0.18), 0 4px 12px rgba(60, 40, 20, 0.10);
    --cb-create-aside-bg: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.16), transparent 45%), linear-gradient(160deg, #ff9d2f 0%, #fe8400 36%, #d6660d 70%, #a8521f 100%);
    --cb-create-border: #c46900;
    --cb-create-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(196, 105, 0, 0.32);
    --cb-create-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.16), 0 12px 28px rgba(196, 105, 0, 0.46);
    --cb-event-auth-bg: rgba(80, 178, 230, 0.16);
    --cb-event-auth-text: #2a8fc4;
    --cb-event-publish-bg: rgba(155, 89, 182, 0.16);
    --cb-event-publish-text: #8e44ad;
    --cb-invalid: #c4302b;
    --cb-page-shadow: 0 8px 24px rgba(60, 40, 20, 0.10);
    --cb-popover-shadow: 0 16px 42px rgba(60, 40, 20, 0.18), 0 4px 12px rgba(60, 40, 20, 0.10);
    --cb-shadow: 0 1px 3px rgba(60, 40, 20, 0.06), 0 1px 2px rgba(60, 40, 20, 0.04);
    --cb-shadow-hover: 0 4px 12px rgba(60, 40, 20, 0.10), 0 2px 4px rgba(60, 40, 20, 0.06);
    --cb-stage-bg: #f1e8d8;
    --cb-surface: #ffffff;
    --cb-surface-hover: #fcfaf6;
    --cb-text: #1f1a14;
    --cb-text-faint: #8a7860;
    --cb-text-soft: #5a4c3a;
    --cb-toast-shadow: 0 12px 32px rgba(60, 40, 20, 0.18), 0 2px 8px rgba(60, 40, 20, 0.10);
    --cb-valid: #1eb95b;
}

/* ===== DARK MODE (Earth Tones Theme) ===== */

/* Manual dark selection: a head script sets this attribute (it also resolves
   a "match system" choice to "dark" when the OS is dark). Higher specificity
   than the base :root light block, so these values win. */
html[data-theme-base="dark"] {
        /* 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(46, 36, 28, 0.92);
        --cb-loading-container-border: rgba(255, 255, 255, 0.10);
        --cb-progress-track-bg: rgba(255, 255, 255, 0.10);
        --cb-loading-success-shadow:
            0 0 0 1px rgba(30, 185, 91, 0.30),
            0 18px 56px rgba(30, 185, 91, 0.35),
            0 4px 12px rgba(0, 0, 0, 0.50);
        --cb-loading-success-text: #4ade80;
        /* Loading logo breathe filter — orange glow blooms on the dark card. */
        --cb-logo-glow-rest: drop-shadow(0 4px 20px rgba(254, 132, 0, 0.18));
        --cb-logo-glow-peak: drop-shadow(0 6px 28px rgba(254, 132, 0, 0.36));
        /* Progress bar idle glow — orange halo reads well on the dark track. */
        --cb-progress-bar-glow: 0 0 14px rgba(254, 132, 0, 0.55);
        --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);

        /* Navbar button tray (see :root) — earth-brown sliding pill; badge
           border matches the dark glass surface (== --cb-ui-glass-bg). */
        --cb-tray-btn-bg: linear-gradient(135deg, rgba(95, 78, 58, 0.95) 0%, rgba(70, 51, 42, 0.95) 100%);
        --cb-tray-badge-border: rgba(46, 36, 28, 0.55);
        /* Badge glow — matched to dark --bs-danger (#e63946). */
        --cb-tray-badge-shadow: 0 1px 4px rgba(230, 57, 70, 0.45);

        /* Parchment-glass select control (see :root). Hover-border is
           mode-agnostic (warm tan in both modes). */
        --cb-glass-select-bg: rgba(46, 36, 28, 0.55);
        --cb-glass-select-border: rgba(212, 181, 137, 0.20);
        --cb-glass-select-text: #f3ecdb;
        --cb-glass-select-hover-bg: rgba(66, 53, 41, 0.72);
        --cb-glass-select-hover-border: rgba(212, 181, 137, 0.50);
        --cb-glass-select-focus-border: rgba(243, 236, 219, 0.75);
        --cb-glass-select-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30);
        --cb-glass-select-focus-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30);

        /* 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;
        --cb-publish-modal-link-hover-text: #ffd1a0;
        --cb-publish-modal-content-shadow:
            0 1px 2px rgba(0, 0, 0, 0.45),
            0 20px 56px rgba(0, 0, 0, 0.65);
        --cb-publish-modal-row-bg: var(--cb-publish-modal-header-start);
        --cb-publish-modal-row-hover-bg: #3a3023;
        --cb-publish-modal-row-hover-border: #524432;
        --cb-publish-modal-row-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.40);
        --cb-publish-modal-row-published-bg: rgba(254, 132, 0, 0.08);
        --cb-publish-modal-row-published-shadow:
            0 0 0 1px rgba(254, 132, 0, 0.35),
            0 4px 14px rgba(254, 132, 0, 0.22);
        /* Tabs */
        --cb-publish-modal-tab-active-text: #ffb066;
        --cb-publish-modal-tab-count-bg: rgba(254, 132, 0, 0.18);
        --cb-publish-modal-tab-count-text: #ffb066;
        --cb-publish-modal-tab-active-count-text: var(--lhs-text);

        /* 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-primary-bg-subtle: rgba(254, 132, 0, 0.16);
        --bs-danger-border-subtle: rgba(230, 57, 70, 0.25);
        --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);

        /* Right-click Context Menu + submenus (editor canvas) —
           matches the dark dropdown surface so it reads as a native menu */
        --cb-context-menu-surface: rgba(46, 36, 28, 0.95);
        --cb-context-menu-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 181, 137, 0.20);
        --cb-context-menu-item-text: #f3ecdb;
        --cb-context-menu-item-hover-bg: rgba(212, 181, 137, 0.12);
        --cb-context-menu-item-hover-text: #ffb066;
        --cb-context-menu-header-bg: rgba(0, 0, 0, 0.20);
        --cb-context-menu-header-border: rgba(212, 181, 137, 0.20);
        --cb-context-menu-header-name-text: #f3ecdb;
        --cb-context-menu-header-type-text: #c2b496;
        --cb-context-menu-separator: rgba(212, 181, 137, 0.25);
        --cb-context-menu-danger-bg: #e63946;
        --cb-context-menu-danger-hover-bg: rgba(230, 57, 70, 0.30);
        --cb-context-menu-danger-text: #ffffff;
        --cb-context-menu-danger-hover-text: #f3ecdb;

        /* Broken external link accent (editor sidebar). Brighter than light
           mode's #dc2626 so the thin 3px bars, 6px dot and small red title text
           stay legible on the dark earth sidebar surface (rgba(58,46,34,0.85));
           red-400 sits a touch brighter than the theme's --bs-danger #e63946. */
        --cb-broken-link: #f87171;
        --cb-broken-link-focus-ring: rgba(248, 113, 113, 0.35);

        /* Section "Danger Zone" delete affordance (editor Settings accordion).
           Brighter reds than light mode so the row border, tint and caption
           stay legible on the dark earth sidebar. Caption is red-300 (#fca5a5);
           the row border alpha matches --cb-broken-link-focus-ring but is kept
           dedicated for clarity. */
        --cb-section-delete-row-border: rgba(248, 113, 113, 0.35);
        --cb-section-delete-row-bg: rgba(248, 113, 113, 0.08);
        --cb-section-delete-caption-text: #fca5a5;

        /* Media panel delete button — brightened red-400 (#f87171, matches
           --cb-broken-link) so text + outline read on the dark media panel. */
        --cb-media-delete-text: #f87171;
        --cb-media-delete-border: rgba(248, 113, 113, 0.35);
        --cb-media-delete-hover-bg: rgba(248, 113, 113, 0.08);
        --cb-media-delete-hover-text: #fca5a5;

        /* Editor onboarding tour — warm dark cards/text, deeper shadows. */
        --cb-tour-spotlight-dim: rgba(0, 0, 0, 0.72);
        --cb-tour-card-bg: rgba(46, 36, 28, 0.98);
        --cb-tour-card-shadow: 0 28px 56px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.35);
        --cb-tour-announce-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.35);
        --cb-tour-launcher-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
        --cb-tour-text-secondary: rgba(240, 230, 210, 0.6);
        --cb-tour-text-body: rgba(240, 230, 210, 0.78);
        --cb-tour-progress-track: rgba(255, 255, 255, 0.08);
        --cb-tour-chip-bg: linear-gradient(135deg, rgba(254, 132, 0, 0.18), rgba(254, 132, 0, 0.08));
        --cb-tour-chip-border: rgba(254, 132, 0, 0.42);
        --cb-tour-chip-text: #ffb670;
        --cb-tour-ghost-text: rgba(240, 230, 210, 0.7);
        --cb-tour-ghost-border: rgba(255, 255, 255, 0.08);
        --cb-tour-ghost-bg: rgba(255, 255, 255, 0.04);
        --cb-tour-ghost-hover-bg: rgba(255, 255, 255, 0.08);
        --cb-tour-ghost-hover-text: #f0e6d2;

        /* Navbar/footer link-card drag + hover affordances — identical to
           light mode (bright blues and green tint read on the dark sidebar). */
        --cb-link-card-hover-border: #86b7fe;
        --cb-link-card-drag-over-bg: rgba(25, 135, 84, 0.1);
        --cb-link-card-placeholder-border: #007bff;
        --cb-link-card-placeholder-bg: rgba(0, 123, 255, 0.1);

        /* 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: rgb(46, 36, 28);
        --cb-tooltip-text: #f0e6d2;
        --bs-tooltip-bg: rgb(46, 36, 28);
        --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;

        /* Per-modal banner identities (restored color-coding) */
        --cb-modal-canvas-banner: linear-gradient(135deg, #5f23c2 0%, #8c2496 100%);
        --cb-modal-gradient-banner: linear-gradient(135deg, #6c1fb0 0%, #a81e7e 50%, #c94570 100%);
        --cb-modal-mediaupload-banner: linear-gradient(135deg, #0b9398 0%, #056b85 100%);
        --cb-modal-video-banner: linear-gradient(135deg, #228844 0%, #196a30 100%);
        --cb-modal-audio-banner: linear-gradient(135deg, #cc8a00 0%, #c24f63 100%);
        --cb-modal-image-banner: linear-gradient(135deg, #0098ad 0%, #0079a3 100%);
        --cb-modal-addcomponent-banner: linear-gradient(135deg, #228844 0%, #1aa87d 100%);
        --cb-modal-shape-banner: linear-gradient(135deg, #3550c0 0%, #2d0a82 100%);

        /* 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);

        /* Component Pill Toolbar (floating rich-text formatting pill) */
        --cb-pill-toolbar-surface: linear-gradient(145deg,
            rgba(46, 36, 28, 0.92) 0%,
            rgba(38, 30, 22, 0.88) 100%);
        --cb-pill-toolbar-border: rgba(212, 152, 115, 0.2);
        --cb-pill-toolbar-shadow:
            0 12px 40px rgba(0, 0, 0, 0.35),
            0 4px 16px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        /* Default button surface (generic glass used by most buttons) */
        --cb-pill-btn-surface: linear-gradient(145deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 100%);
        --cb-pill-btn-surface-hover: linear-gradient(145deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.1) 100%);
        --cb-pill-btn-text: #f0e6d2;
        --cb-pill-btn-text-hover: #ffffff;
        --cb-pill-btn-shadow:
            0 2px 8px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        --cb-pill-btn-shadow-hover:
            0 2px 8px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        --cb-pill-btn-shimmer: rgba(255, 255, 255, 0.1);
        /* Generic active (formatting) button — earth gradient accent */
        --cb-pill-btn-active-surface: var(--cb-gradient-8);
        --cb-pill-btn-active-surface-hover: var(--cb-gradient-1);
        --cb-pill-btn-active-text: #ffffff;
        --cb-pill-btn-active-shadow: 0 4px 12px rgba(164, 90, 60, 0.3);
        /* Move forward/back/backward buttons — share generic glass in dark */
        --cb-pill-move-back-surface: var(--cb-pill-btn-surface);
        --cb-pill-move-back-surface-hover: var(--cb-pill-btn-surface-hover);
        --cb-pill-move-back-text: #f0e6d2;
        --cb-pill-move-back-text-hover: #ffffff;
        --cb-pill-move-forward-surface: var(--cb-pill-btn-surface);
        --cb-pill-move-forward-surface-hover: var(--cb-pill-btn-surface-hover);
        --cb-pill-move-forward-text: #f0e6d2;
        --cb-pill-move-forward-text-hover: #ffffff;
        --cb-pill-move-backward-surface: var(--cb-pill-btn-surface);
        --cb-pill-move-backward-surface-hover: var(--cb-pill-btn-surface-hover);
        --cb-pill-move-backward-text: #f0e6d2;
        --cb-pill-move-backward-text-hover: #ffffff;
        /* Per-category accents — idle surfaces collapse to generic glass in dark,
           idle/active text use the brighter Galaxy variants */
        --cb-pill-accent-format-surface: var(--cb-pill-btn-surface);
        --cb-pill-accent-format-surface-hover: var(--cb-pill-btn-surface-hover);
        --cb-pill-accent-format-text: #d4b5f7;
        --cb-pill-accent-format-text-hover: #e0ccff;
        --cb-pill-accent-format-active: #7c3aed;
        --cb-pill-accent-format-active-text: #ffffff;
        --cb-pill-accent-format-active-hover: #7c3aed;
        --cb-pill-accent-align-surface: var(--cb-pill-btn-surface);
        --cb-pill-accent-align-surface-hover: var(--cb-pill-btn-surface-hover);
        --cb-pill-accent-align-text: #73b3ac;
        --cb-pill-accent-align-text-hover: #ffffff;
        --cb-pill-accent-align-active: #2d8a80;
        --cb-pill-accent-align-active-text: #ffffff;
        --cb-pill-accent-align-active-hover: #2d8a80;
        /* Bottom-row idle text is bright; hover whitens (matches old dark) */
        --cb-pill-accent-list-text: #4ade80;
        --cb-pill-accent-list-text-hover: #ffffff;
        --cb-pill-accent-list-active: #16a34a;
        --cb-pill-accent-list-active-hover: #15803d;
        --cb-pill-accent-link-text: #60a5fa;
        --cb-pill-accent-link-text-hover: #ffffff;
        --cb-pill-accent-link-active: #2563eb;
        --cb-pill-accent-link-active-hover: #1d4ed8;
        --cb-pill-accent-font-family-text: #fb923c;
        --cb-pill-accent-font-family-text-hover: #ffffff;
        --cb-pill-accent-font-family-active: #ea580c;
        --cb-pill-accent-font-family-active-hover: #c2410c;
        --cb-pill-accent-text-color-text: #f472b6;
        --cb-pill-accent-text-color-text-hover: #ffffff;
        --cb-pill-accent-text-color-active: #db2777;
        --cb-pill-accent-text-color-active-hover: #be185d;
        --cb-pill-accent-font-weight-text: #a5b4fc;
        --cb-pill-accent-font-weight-text-hover: #ffffff;
        --cb-pill-accent-font-weight-active: #4f46e5;
        --cb-pill-accent-font-weight-active-hover: #4338ca;
        --cb-pill-accent-font-size-text: #38bdf8;
        --cb-pill-accent-font-size-text-hover: #ffffff;
        --cb-pill-accent-font-size-active: #0891b2;
        --cb-pill-accent-font-size-active-hover: #0e7490;
        /* Delete button (shared light/dark) */
        --cb-pill-delete-surface: #dc3545;
        --cb-pill-delete-surface-hover: #c82333;
        --cb-pill-delete-text: #ffffff;
        /* Separator + drag handle */
        --cb-pill-separator: linear-gradient(to bottom,
            transparent 0%,
            rgba(212, 152, 115, 0.2) 50%,
            transparent 100%);
        --cb-pill-drag-handle-bg: rgba(46, 36, 28, 0.9);
        --cb-pill-drag-handle-border: rgba(212, 152, 115, 0.2);
        --cb-pill-drag-handle-grip: rgba(212, 152, 115, 0.5);

        /* 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);

        /* Snap-layout picker: deep-olive header keeps the lime's green identity in Galaxy;
           muted-blue slot ramp stays legible on the dark earth canvas */
        --cb-snap-header-start: #4f5d20;
        --cb-snap-header-end: #353f16;
        --cb-snap-preview-canvas: #241e16;
        --cb-snap-slot-small: #2f4860;
        --cb-snap-slot-medium: #3d6285;
        --cb-snap-slot-large: #4a80b0;
        --cb-snap-slot-xl: #5b9bd5;
        --cb-snap-slot-fallback: #3a3023;
        --cb-snap-slot-border: rgba(255, 255, 255, 0.08);
        --cb-snap-slot-label: #e8e0d0;
        --cb-snap-card-border: rgba(212, 181, 137, 0.25);
        --cb-snap-card-border-hover: rgba(212, 181, 137, 0.55);

        /* Wave editor modal: brighter indigo (indigo-400 family) so the accent
           reads against the dark earth chrome; tint alphas lifted to stay
           visible on dark panels. Canvas tokens stay light (mode-agnostic). */
        --cb-wave-accent: #818cf8;
        --cb-wave-accent-hover: #a5b4fc;
        --cb-wave-accent-violet: #a78bfa;
        --cb-wave-accent-text: #1c160e;
        --cb-wave-accent-soft: rgba(129, 140, 248, 0.16);
        --cb-wave-accent-tint-strong: rgba(129, 140, 248, 0.25);
        --cb-wave-accent-tint-soft: rgba(129, 140, 248, 0.16);
        /* Legend dots — already bright; unchanged so they keep matching the
           canvas drawing colors on the light workspace. */
        --cb-wave-anchor-dot: #ff6b6b;
        --cb-wave-control-dot: #51cf66;
        /* Fixed light drawing surface — identical to light mode by design. */
        --cb-wave-canvas-bg: #ffffff;
        --cb-wave-canvas-border: #dee2e6;
        --cb-wave-canvas-instructions-bg: #e9ecef;
        --cb-wave-canvas-instructions-text: #6c757d;
        /* Inactive mode-toggle button — muted earth chip with a light glyph,
           clearly behind the brighter indigo active state on the dark panel. */
        --cb-wave-mode-inactive-bg: rgba(94, 78, 58, 0.92);
        --cb-wave-mode-inactive-text: #f3ecdb;

        /* === Consolidated dark values for collapsed local dark blocks (mirror the matching :root groups) === */
        /* editor.css */
        --cb-swal-thumb-bg: rgba(255, 255, 255, 0.05);
        --cb-swal-placeholder-icon: rgba(255, 255, 255, 0.5);
        --cb-tooltip-border: rgba(212, 181, 137, 0.65);
        --cb-tooltip-shadow: inset 0 1px 0 rgba(255, 235, 200, 0.14), 0 0 0 1px rgba(247, 236, 215, 0.22), 0 4px 18px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.45);
        --cb-sidebar-shell-bg: linear-gradient(180deg, rgba(22, 16, 10, 0.55) 0%, rgba(18, 14, 8, 0.62) 100%);
        --cb-sidebar-shell-shadow: 1px 0 0 rgba(255, 255, 255, 0.05) inset, inset 4px 0 16px -8px rgba(0, 0, 0, 0.35);
        --cb-section-add-divider: var(--cb-ui-glass-border);
        --cb-add-section-bg: linear-gradient(135deg, #8aab78 0%, #759c64 60%, #607a4e 100%);
        --cb-add-section-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.40), 0 8px 18px rgba(74, 106, 61, 0.32);
        --cb-add-section-hover-bg: linear-gradient(135deg, #95b682 0%, #80a76d 60%, #688555 100%);
        --cb-add-section-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.45), 0 10px 22px rgba(74, 106, 61, 0.42);
        --cb-struct-card-bg: #2a3334;
        --cb-struct-card-border: #3d4848;
        --cb-struct-card-hover-bg: #344040;
        --cb-struct-card-hover-border: #506060;
        --cb-struct-card-active-border: #7ca5a2;
        --cb-struct-card-active-shadow: 0 0 0 1px #7ca5a2, 0 4px 14px rgba(124, 165, 162, 0.30), 0 2px 6px rgba(0, 0, 0, 0.35);

        /* public_navbar.css */
        --cb-pubnav-bg: radial-gradient(ellipse 55% 110% at 96% -10%, rgba(212, 152, 115, 0.18), transparent 65%), radial-gradient(ellipse 45% 100% at 4% 110%, rgba(125, 145, 110, 0.16), transparent 70%), var(--cb-navbar-tint);
        --cb-pubnav-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.50), 0 12px 28px rgba(0, 0, 0, 0.55), 0 28px 56px rgba(0, 0, 0, 0.40);
        --cb-pubnav-underline: rgba(212, 181, 137, 0.40);
        --cb-pubnav-link-text: #ede2cc;
        --cb-pubnav-ghost-text: #d4c4a8;
        --cb-pubnav-ghost-hover-text: #e8c89e;
        --cb-pubnav-ghost-hover-bg: rgba(212, 152, 115, 0.16);
        --cb-pubnav-outline-border: rgba(212, 181, 137, 0.42);
        --cb-pubnav-outline-hover-text: #fff8eb;
        --cb-pubnav-outline-hover-border: rgba(220, 175, 130, 0.85);
        --cb-pubnav-outline-hover-bg: rgba(80, 60, 38, 0.55);
        --cb-pubnav-outline-hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
        --cb-pubnav-primary-text: #fff8eb;
        --cb-pubnav-primary-bg: #9a6638;
        --cb-pubnav-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 14px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
        --cb-pubnav-primary-hover-bg: #b07a4d;
        --cb-pubnav-primary-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 7px 20px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.30);
        --cb-pubnav-toggler-border: rgba(220, 175, 130, 0.55);
        --cb-pubnav-toggler-hover-bg: rgba(212, 152, 115, 0.18);
        --cb-pubnav-toggler-hover-border: rgba(232, 200, 158, 0.9);
        --cb-pubnav-mobile-bg: rgba(46, 36, 28, 0.96);
        --cb-pubnav-mobile-border: rgba(220, 175, 130, 0.20);
        --cb-pubnav-mobile-header-border: rgba(220, 175, 130, 0.18);

        /* editor_legacy.css */
        --cb-insert-line-bg: rgba(243, 236, 219, 0.78);
        --cb-insert-icon-bg: var(--lhs-text);
        --cb-insert-icon-border: var(--lhs-text-faint);
        --cb-insert-icon-text: var(--cb-publish-modal-bg);

        /* settings.css */
        --cb-settings-search-border: rgba(243, 236, 219, 0.35);
        --cb-settings-search-hover-border: rgba(243, 236, 219, 0.55);
        --cb-settings-search-focus-glow: 0 0 0 0.2rem rgba(243, 236, 219, 0.22);

        /* navbar.css */
        --cb-navbar-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.50), 0 10px 24px rgba(0, 0, 0, 0.55), 0 24px 48px rgba(0, 0, 0, 0.40);
        --cb-navbar-divider-gradient: linear-gradient(90deg, rgba(212, 181, 137, 0) 0%, rgba(212, 181, 137, 0.45) 30%, rgba(125, 145, 110, 0.45) 70%, rgba(212, 181, 137, 0) 100%);

        /* navbar_button_tray.css */
        --cb-tray-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 6px rgba(0, 0, 0, 0.40), 0 6px 18px rgba(0, 0, 0, 0.50);
        --cb-tray-pill-border: var(--lhs-border-strong);
        --cb-tray-text-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 6px rgba(0, 0, 0, 0.40), 0 6px 16px rgba(0, 0, 0, 0.45);
        --cb-tray-text-border: var(--cb-ui-glass-border);
        --cb-tray-text-border-hover: var(--lhs-border-strong);
        --cb-tray-text-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 10px rgba(212, 181, 137, 0.18), 0 10px 24px rgba(0, 0, 0, 0.55);

        /* media_upload_modal.css */
        --cb-media-empty-border: #3d3326;
        --cb-media-empty-border-strong: #524432;
        --cb-media-empty-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
        --cb-media-empty-shadow-chip: 0 1px 2px rgba(0, 0, 0, 0.25);

        /* media_nav_toolbar.css */
        --cb-media-sort-border: rgba(243, 236, 219, 0.35);
        --cb-media-sort-hover-border: rgba(243, 236, 219, 0.55);
        --cb-media-sort-focus-shadow: 0 0 0 0.2rem rgba(243, 236, 219, 0.22);

        /* Support marketing site (see :root). Dark hero drops the white top
           highlight and uses a dark earth base ramp; alert is a translucent
           crimson wash with a light rose text for legibility on dark. */
        --cb-support-hero-bg:
            radial-gradient(ellipse 60% 80% at 15% 20%, rgba(212, 152, 115, 0.20), transparent 55%),
            radial-gradient(ellipse 50% 70% at 85% 80%, rgba(140, 158, 120, 0.14), transparent 55%),
            linear-gradient(160deg, #443e38 0%, #3e3832 40%, #3a3530 70%, #3f3934 100%);
        --cb-support-hero-border: rgba(212, 181, 137, 0.22);
        --cb-support-alert-bg: rgba(146, 43, 33, 0.18);
        --cb-support-alert-border: rgba(245, 183, 177, 0.25);
        --cb-support-alert-text: #f5b7b1;

        /* User account dropdown (cb-usermenu) — see :root */
        --cb-usermenu-dropdown-bg: rgba(46, 36, 28, 0.97);
        --cb-usermenu-dropdown-border: rgba(212, 181, 137, 0.25);
        --cb-usermenu-dropdown-shadow:
            0 4px 12px rgba(0, 0, 0, 0.45),
            0 18px 40px rgba(0, 0, 0, 0.50);
        --cb-usermenu-text-strong: #f3ecdb;
        --cb-usermenu-divider: rgba(212, 181, 137, 0.20);
        --cb-usermenu-item-text: #ede2cc;
        --cb-usermenu-item-hover-bg: rgba(212, 152, 115, 0.16);
        --cb-usermenu-item-hover-icon: #e8c89e;
        --cb-usermenu-danger-hover-bg: rgba(220, 53, 69, 0.15);
        --cb-usermenu-danger-hover-text: #f28b82;

        /* ===== Consolidated private-token darks ===== */
        --cb-accent: #e07600;
        --cb-accent-hover: #c46500;
        --cb-accent-soft: rgba(254, 132, 0, 0.14);
        --cb-auth-aside-bg: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.10), transparent 45%), linear-gradient(155deg, #b9701f 0%, #9a5512 40%, #6e3d12 75%, #4a2a10 100%);
        --cb-auth-aside-glow: radial-gradient(circle, rgba(0, 0, 0, 0.40), transparent 65%);
        --cb-badge-unverified-bg: rgba(255, 184, 77, 0.18);
        --cb-badge-unverified-border: rgba(255, 184, 77, 0.40);
        --cb-badge-unverified-text: #ffb84d;
        --cb-badge-verified-bg: rgba(74, 222, 128, 0.16);
        --cb-badge-verified-border: rgba(74, 222, 128, 0.35);
        --cb-badge-verified-text: #4ade80;
        --cb-border: #3d3326;
        --cb-border-strong: #524432;
        --cb-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 34px rgba(0, 0, 0, 0.50), 0 30px 60px rgba(0, 0, 0, 0.35);
        --cb-index-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25);
        --cb-card-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 18px rgba(0, 0, 0, 0.45), 0 22px 44px rgba(254, 132, 0, 0.14);
        --cb-cardmenu-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
        --cb-create-aside-bg: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.10), transparent 45%), linear-gradient(160deg, #b9701f 0%, #9a5512 40%, #6e3d12 75%, #4a2a10 100%);
        --cb-create-border: #8a4800;
        --cb-create-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.45);
        --cb-create-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px rgba(0, 0, 0, 0.50), 0 14px 32px rgba(0, 0, 0, 0.55);
        --cb-event-auth-bg: rgba(93, 173, 226, 0.20);
        --cb-event-auth-text: #5dade2;
        --cb-event-publish-bg: rgba(199, 128, 232, 0.20);
        --cb-event-publish-text: #c780e8;
        --cb-invalid: #f17a74;
        --cb-page-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        --cb-popover-shadow: 0 16px 42px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
        --cb-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
        --cb-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
        --cb-stage-bg: #1b1610;
        --cb-surface: #2a2218;
        --cb-surface-hover: #322a1f;
        --cb-text: #f3ecdb;
        --cb-text-faint: #8c7e66;
        --cb-text-soft: #c2b496;
        --cb-toast-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
        --cb-valid: #4ade80;
    }

        /* ===== Surface tokens (shared: auth + onboarding) ===== */
        --cb-surface:        #2a2218;
        --cb-surface-hover:  #322a1f;
        --cb-stage-bg:       #1b1610;
        --cb-border:         #3d3326;
        --cb-border-strong:  #524432;
        --cb-text:           #f3ecdb;
        --cb-text-soft:      #c2b496;
        --cb-text-faint:     #8c7e66;
        --cb-shadow:         0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
        --cb-card-shadow:    0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 34px rgba(0, 0, 0, 0.50), 0 30px 60px rgba(0, 0, 0, 0.35);
        --cb-accent-soft:    rgba(254, 132, 0, 0.14);
        --cb-valid:          #4ade80;
        --cb-invalid:        #f17a74;
}

/* Manual dark: Bootstrap component vars that don't inherit cleanly from the
   host element must be set on the component selector itself. */
html[data-theme-base="dark"] .dropdown-menu {
    --bs-dropdown-bg: rgba(46, 36, 28, 0.95);
}

/* Shared animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}