html.dark-theme
{
    /* =========================
       BASE THEME TOKENS
       ========================= */
    --cui-color-surface: rgb(52 63 72);
    --cui-color-surface-overlay: rgb(52 63 72);
    --cui-color-neutral: rgb(70 82 94);
    --cui-color-on-surface: rgb(230 230 230);
    /* custom variants to get better contrast ratio when primary color is used for text against dark theme  */
    --cui-knob-color: rgb(255,255,255);
    --cui-color-primary-text: rgb(119, 227, 245);
    --cui-color-accent-text: rgb(240 120 155);
    --footer-logo-color: rgba(255,255,255, 0.5);
    /* =========================
       GLOBAL — borders / outlines / shadows
       ========================= */
    --cui-border-color: rgba(255, 255, 255, 0.15);
    --cui-focus-outline-color: rgba(255, 255, 255, 0.25);
    --cui-box-shadow-color: rgb(0 0 0 / 0.35);
    /* =========================
       GLOBAL — color-mix based states (flip black → white)
       ========================= */
    --cui-base-dark-bg-color: color-mix(in srgb, var(--cui-color-neutral) 92%, white 8%);
    --cui-item-odd-bg-color: color-mix(in srgb, var(--cui-color-surface) 97%, white 3%);
    --cui-item-hover-bg-color: color-mix(in srgb, var(--cui-color-neutral) 96%, white 4%);
    --cui-disabled-bg-color: color-mix(in srgb, var(--cui-color-neutral) 85%, white);
    --cui-disabled-text-color: color-mix(in srgb, var(--cui-color-on-surface) 65%, black);
    --cui-readonly-bg-color: color-mix(in srgb, var(--cui-color-neutral) 90%, white);
    --cui-positive-text-color: var(--cui-color-primary-text);
    --cui-negative-text-color: var(--cui-color-accent-text);
    /* =========================
       BUTTONS
       ========================= */
    --cui-button-border-color: rgb(255 255 255 / 0.2);
    --cui-button-basic-bg-color: var(--cui-color-neutral);
    --cui-button-basic-split-hover-bg-color: color-mix(in srgb, var(--cui-color-neutral) 96%, white 4%);
    --cui-button-basic-hover-bg-color: color-mix(in srgb, var(--cui-color-neutral) 90%, white 10%);
    --cui-button-basic-selected-bg-color: color-mix(in srgb, var(--cui-color-neutral) 85%, white 15%);
    --cui-button-basic-pressed-bg-color: color-mix(in srgb, var(--cui-color-neutral) 90%, white 10%);
    --cui-button-lucent-hover-text-color: var(--cui-color-accent-text);
    --cui-button-lucent-selected-text-color: var(--cui-color-accent-text);
    /* =========================
       SLIDER
       ========================= */
    --cui-slider-handle-box-shadow-color: rgb(0 0 0 / 0.5);
    --cui-slider-handle-focus-box-shadow-color: rgb(0 0 0 / 0.7);
    /* =========================
       APP SKIN (header/menu darkened further, per earlier decision)
       ========================= */
    --cui-app-skin-bg-color: rgb(51 62 70);
    --cui-app-skin-header-bg-color: rgba(31, 42, 44, 0.75);
    --cui-app-skin-menu-bg-color: rgba(31, 42, 44, 0.65);
    --cui-app-skin-page-header-text-color: var(--cui-color-primary-text);
    /* =========================
       CONTENT SECTIONS / COLUMNS (site-specific, from earlier)
       ========================= */
    --cui-section-bg-gradient: linear-gradient(180deg, rgb(44 53 61) 0%, rgb(52 63 72) 100%);
    --cui-section-border-color: rgba(255, 255, 255, 0.1);
    --cui-column-bg-color: rgb(44 53 61);
    --cui-column-color1-bg-color: rgb(52 63 72);
    --cui-column-color1-border-color: #30a8b9;
    /* =========================
       TOOLTIP
       ========================= */
    --cui-tooltip-bg-color: var(--cui-button-basic-bg-color);
    --cui-tooltip-text-color: var(--cui-button-basic-text-color);
    scrollbar-width: thin;
    scrollbar-color: var(--cui-app-skin-menu-text-color) transparent;


    .view-container:not(.home)::before
    {
        --glow: 0.15;
    }
}