/* Custom CSS variables for fxgui documentation */
:root {
    --fx-accent: #2196F3;
    --fx-accent-hover: #1976D2;
    --fx-accent-transparent: #2196F310;
    --fx-primary: #212121;
    --fx-header-bg: #151515;
    --fx-dark-bg: #201f1f;
}

/* Animation */
@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.scale-in-center {
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Accent color overrides */
:root > * {
    --md-accent-fg-color: var(--fx-accent);
    --md-accent-fg-color--transparent: var(--fx-accent-transparent);
    --md-accent-bg-color: var(--fx-accent);
    --md-accent-bg-color--light: var(--fx-accent-transparent);
    --md-typeset-a-color: var(--fx-accent);
}

/* Black primary color overrides */
[data-md-color-primary="black"] {
    --md-primary-fg-color: var(--fx-primary);
    --md-primary-fg-color--light: var(--fx-primary);
    --md-primary-fg-color--dark: var(--fx-primary);
    --md-typeset-a-color: var(--fx-accent);
}

/* Shared header/tabs/footer styling for black primary */
[data-md-color-primary="black"] .md-header,
[data-md-color-primary="black"] .md-tabs,
[data-md-color-primary="black"] .md-footer {
    background-color: var(--fx-header-bg);
}

/* Dark mode (slate scheme) specific overrides */
[data-md-color-scheme="slate"][data-md-color-primary="black"] {
    --md-default-bg-color: var(--fx-dark-bg);
    --md-default-bg-color--light: var(--fx-dark-bg);
    --md-default-bg-color--lighter: var(--fx-dark-bg);
    --md-default-bg-color--lightest: var(--fx-dark-bg);
    --md-footer-bg-color: var(--fx-header-bg);
    --md-footer-bg-color--dark: var(--fx-header-bg);
}

[data-md-color-scheme="slate"][data-md-color-primary="black"] .md-main,
[data-md-color-scheme="slate"][data-md-color-primary="black"] .md-sidebar,
[data-md-color-scheme="slate"][data-md-color-primary="black"] .md-content {
    background-color: var(--fx-dark-bg);
}

/* Link hover effects */
.md-typeset a:hover,
.md-typeset a:focus,
.md-nav__link:hover,
.md-nav__link:focus {
    color: var(--fx-accent-hover);
}