:root {
    color-scheme: light dark;
    
    --background: hsla(0, 0%, 100%, 1);
    --secondary-background: hsla(240, 24%, 96%, 1);
    --tertiary-background: hsla(240, 20%, 94%, 1);
    
    --menu-background: var(--background);
    --separator-primary: hsla(240, 3%, 80%, 0.5);
    --separator-secondary: var(--separator-primary);
    
    --border-primary: hsla(240, 10%, 73%, 0.36);
    --border-secondary: hsla(240, 14%, 85%, 0.7);
    --border-tertiary: hsla(240, 2%, 32%, 0.12);
    --border-primary-hover: var(--border-primary);
    
    --button-secondary: var(--secondary-background);
    --button-secondary-hover: var(--tertiary-background);
    
    --segmented-control-background: var(--tertiary-background);
    --segmented-control-button: var(--background);
    --segmented-control-button-hover: var(--background);
    --segmented-control-button-enhanced: var(--text-primary);
    --segmented-control-button-enhanced-text: var(--background);
    
    --text-primary: hsla(0, 0%, 0%, 1);
    --text-primary-soft: hsla(0, 0%, 0%, 0.85);
    --text-secondary: hsla(240, 6%, 25%, 0.6);
    --text-tertiary: hsla(240, 6%, 25%, 0.3);
    --text-content: var(--text-primary);
    --text-page-footer: var(--text-secondary);
    
    --a-logo: var(--text-primary);
    --a-logo-hover: var(--a-link-tint);
    --a-link-tint: var(--a-link-blue);
    --a-link-tint-hover: var(--a-link-blue-hover);
    --a-link-blue: hsla(202, 95%, 46%, 1);
    --a-link-blue-hover: hsla(203, 95%, 77%, 1);
    --a-link-green: hsla(104, 78%, 32%, 1);
    --a-link-green-hover: hsla(158, 100%, 41%, 1);
    --a-link-page-footer: var(--text-tertiary);
    --a-link-page-footer-elevated: var(--text-secondary);
    
    --cover-background: hsla(0, 0%, 0%, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: hsla(0, 0%, 0%, 1);
        --secondary-background: hsla(240, 3%, 11%, 1);
        --tertiary-background: hsla(240, 2%, 18%, 1);
        
        --menu-background: var(--tertiary-background);
        --separator-primary: hsla(240, 2%, 22%, 0.7);
        --separator-secondary: hsla(240, 2%, 22%, 1);
        
        --border-primary: hsla(240, 2%, 34%, 0.65);
        --border-secondary: hsla(240, 7%, 37%, 0.6);
        --border-tertiary: hsla(240, 2%, 32%, 0.3);
        
        --segmented-control-button: var(--background);
        --segmented-control-button-hover: var(--secondary-background);
        
        --text-primary: hsla(0, 0%, 100%, 1);
        --text-primary-soft: hsla(0, 0%, 100%, 0.85);
        --text-secondary: hsla(240, 33%, 94%, 0.6);
        --text-tertiary: hsla(240, 33%, 94%, 0.3);
        --text-content: var(--text-primary-soft);
        
        --a-logo: var(--text-primary-soft);
        --a-link-blue-hover: hsla(203, 95%, 70%, 1);
        
        --cover-background: hsla(240, 3%, 11%, 1);
    }
    
    .post-thumb {
        opacity: 0.9;
    }
    
    .read-aloud-player .read-aloud-button.play .icon { background-image: url('../images/play-circle@dark.svg') !important; }
    .read-aloud-player .read-aloud-button.pause .icon { background-image: url('../images/pause-circle@dark.svg') !important; }
}

body { background: var(--background) !important; color: var(--text-primary) !important; }

.logo a { color: var(--a-logo) !important; }
.logo a:hover { color: var(--a-logo-hover) !important; }

.burger span { background: var(--a-logo) !important; }
.burger:hover span, .burger.open span { background: var(--a-logo-hover) !important; }

.nav, .nav::before, .live .nav::before, .nav ul.menu { background: var(--menu-background) !important; }
.menu-item { border-color: var(--separator-secondary) !important; }

.menu.connect-on-linkedin button svg { fill: var(--a-logo) !important; }
.menu.connect-on-linkedin:hover button svg { fill: var(--a-logo-hover) !important; }

.menu.language-switcher #language-switcher-icon { fill: var(--a-logo) !important; }
.menu.language-switcher:hover #language-switcher-icon, .menu.language-switcher .open #language-switcher-icon { fill: var(--a-logo-hover) !important; }
.menu.language-switcher a { color: var(--text-primary) !important; }
.menu.language-switcher li:not(.active-language) a:hover, .menu.language-switcher li:not(.active-language) a:active { color: var(--text-tertiary) !important; }

.cover { background-color: var(--cover-background) !important; }
.author-header { background-color: var(--cover-background) !important; }

.page-title span { color: var(--text-secondary) !important; }

.read-aloud-player .read-aloud-button:hover { color: var(--a-link-tint) !important; }
.read-aloud-player .read-aloud-button:hover .read-aloud-button-wrapper { background-color: var(--button-secondary) !important; box-shadow: 0 0 0 6px var(--button-secondary) !important; }
.read-aloud-player .read-aloud-duration { color: var(--text-secondary) !important; }

.post-content { color: var(--text-content) !important; }
.post-content.col p a, .post-content.col li a, .menu a { color: var(--a-link-tint) !important; }
/* .post-content.col p a:hover, .post-content.col li a:hover, .menu a:hover, .menu a:active, .menu .current-menu-item a:hover { color: var(--a-link-tint-hover) !important; } */

.post-content h5, .post-content h6 { color: var(--text-secondary) !important; }

.post-date, .entry .post-footer a { color: var(--text-secondary) !important; }

.is-style-details-default[open], .is-style-details-big[open], .is-style-details-fullbleed[open] { background-color: var(--secondary-background) !important; }

hr { background: var(--separator-primary) !important; }

td, th, tr:first-child, caption { border-color: var(--separator-secondary) !important; }
td { color: var(--text-primary) !important; }
th { color: var(--text-secondary) !important; }

button, input[type=button], input[type=reset], input[type=submit] { color: var(--a-link-tint) !important; }
button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover { color: var(--a-link-tint-hover) !important; }

.pagination { border-color: var(--separator-primary) !important; }
.pagination .current { box-shadow: inset 0 0 0 1px var(--border-primary) !important; color: var(--text-primary) !important; }
.pagination .page-numbers:not(.dots):not(.current):hover { color: var(--text-primary-soft) !important; background: var(--tertiary-background) !important; }

.post-navigation .meta-nav { color: var(--text-secondary) !important; }

.error-404 .page-title { color: var(--text-tertiary) !important; }
.not-found p { color: var(--text-secondary) !important; }

.bar .post-edit-link { color: var(--text-secondary) !important; border-color: var(--border-secondary) !important; }
.bar .post-edit-link:hover { color: var(--text-primary) !important; border-color: var(--border-primary) !important; }

.footer { color: var(--text-page-footer) !important; }
.footer span { color: var(--text-secondary) !important; }
.footer a { color: var(--a-link-page-footer) !important; }
.footer a:hover, .footer a:active { color: var(--a-link-page-footer-elevated) !important; }

.search-field, input[type=password] { background: var(--secondary-background) !important; }
.search-field:hover, .search-field:focus, .search-field:active, input[type=password]:hover, input[type=password]:focus, input[type=password]:active { background: var(--tertiary-background) !important; }
.post-password-form input[type=submit] { color: var(--a-link-tint) !important; }
.post-password-form input[type=submit]:hover, .post-password-form input[type=submit]:focus, .post-password-form input[type=submit]:active { color: var(--a-link-tint-hover) !important; }

.wp-element-button, .wp-block-buttons.is-style-segmented-control .wp-element-button.activated { color: var(--text-primary) !important; background-color: var(--segmented-control-button) !important; }
.wp-element-button, .wp-block-buttons.is-style-segmented-control-enhanced .wp-element-button.activated { color: var(--segmented-control-button-enhanced-text) !important; background-color: var(--segmented-control-button-enhanced) !important; }
.wp-element-button:hover, .wp-element-button:active { color: #888; }

.wp-block-buttons.is-style-segmented-control, .wp-block-buttons.is-style-segmented-control-enhanced { background: var(--segmented-control-background) !important; }
.wp-block-buttons.is-style-segmented-control .wp-element-button, .wp-block-buttons.is-style-segmented-control-enhanced .wp-element-button { color: var(--text-primary) !important; background-color: transparent !important; }
.wp-block-buttons.is-style-segmented-control .wp-element-button:not(.activated):hover, .wp-block-buttons.is-style-segmented-control-enhanced .wp-element-button:not(.activated):hover { background-color: var(--segmented-control-button-hover) !important; }

.wp-block-details.is-style-details-filled-primary { background-color: var(--background) !important; }
.wp-block-details.is-style-details-filled-secondary { background-color: var(--secondary-background) !important; }
.wp-block-details.is-style-details-lined { border-top-color: var(--border-primary) !important; border-bottom-color: var(--border-primary) !important; }
.wp-block-details[class*="is-style-details-filled"][open] summary:hover { background-color: var(--tertiary-background) !important; }
.wp-block-details[class*="is-style-details-filled"]:not([open]) summary:hover { background-color: var(--tertiary-background) !important; }
.wp-block-details.is-style-details-lined[open] summary:hover { background-color: var(--secondary-background) !important; }

details summary::after { background-color: var(--text-primary) !important; }

.zoom-overlay { background: var(--background) !important; }

figcaption, .wp-caption-text, .wp-element-caption { color: var(--text-secondary) !important; }

blockquote.is-style-classic { background-color: var(--secondary-background) !important; border-left-color: var(--tertiary-background) !important; }

@media ( max-width: 768px ) {
    .menu-item a:hover { background: var(--secondary-background) !important; }
    .menu.language-switcher li:not(.active-language) a:hover, .menu.language-switcher li:not(.active-language) a:active { color: var(--text-primary) !important; }
    .menu a:hover, .menu a:active, .menu .current-menu-item a:hover { color: var(--a-link-tint) !important; }
}