/* Brand colors */
:root>* {
    --md-primary-fg-color: #009CA6;
    --md-accent-fg-color: #fc4c02;
}

/* Body background with subtle animated gradient - Dark mode */
body[data-md-color-scheme="slate"] {
    background-image: linear-gradient(135deg,
            hsl(184, 60%, 18%) 0%,
            hsl(220, 25%, 15%) 40%,
            hsl(15, 50%, 12%) 100%);
    background-size: 300% 300%;
    background-attachment: fixed;
    animation: balancedGradientShift 18s ease infinite;
}

/* Body background with subtle animated gradient - Light mode */
body[data-md-color-scheme="default"] {
    background-image: linear-gradient(135deg,
            hsl(184, 65%, 85%) 0%,
            hsl(220, 30%, 90%) 40%,
            hsl(15, 50%, 82%) 100%);
    background-size: 300% 300%;
    background-attachment: fixed;
    animation: balancedGradientShift 18s ease infinite;
}

@keyframes balancedGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Glass-like header */
[data-md-color-scheme="slate"] .md-header {
    background-color: hsla(0, 0%, 0%, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-md-color-scheme="default"] .md-header {
    background-color: hsla(0, 0%, 100%, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Glass-like footer */
.md-footer-meta {
    background-color: transparent;
}

[data-md-color-scheme="slate"] .md-footer {
    background-color: hsla(0, 0%, 0%, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-md-color-scheme="default"] .md-footer {
    background-color: hsla(0, 0%, 100%, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Transparent tables */
.md-typeset table:not([class]) {
    background-color: transparent;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
    background-color: transparent;
}

.md-typeset table:not([class]) tr:hover {
    background-color: hsla(0, 0%, 50%, 0.1);
}