body.high-contrast {
    --secondary-color:white;
    --text-color: #fff;
    --custom-subtitle:#fff;
    --uk-card-title:#fff;
    --background-color: #000;
    --section-default-bg: #000;
    --section-muted-bg:#000;
    --card-bg-color:#000;
    --link-color: #ffff00;
    --border-color: #fff;
    --card-bg-color: #000;
    --custom-card-bg:#000;
    --card-primary-bg-color: #000;
    --card-primary-text-color: #ffff00;
    --button-bg-color: #333; /* Darker button for high contrast */
    --button-text-color: #fff;
    --stick-navbar-bg:#333; /* Darker button for high contrast */
}

/* ... (the rest of your high-contrast rules like body.high-contrast img) ... */
body.high-contrast img,
body.high-contrast video,
body.high-contrast svg {
    filter: invert(0) !important;
}



/* Style the buttons inside the panel using variables */
.accessibility-panel .uk-button {
    height: 38px;
    background-color: var(--button-bg-color) ;
    color: var(--button-text-color) !important;
    border: 1px solid var(--border-color);
}

/* Optional: Hover state for buttons */
.accessibility-panel .uk-button:hover {
    filter: brightness(0.9);
}