/*
 * Custom theme for Achew docs.
 * Mirrors the palette defined in frontend/src/styles/global.css so the docs
 * site visually matches the actual application in both light and dark modes.
 */

:root {
    --md-primary-fg-color: #6366F1;
    --md-primary-fg-color--light: #8B5CF6;
    --md-primary-fg-color--dark: #4F46E5;
    --md-accent-fg-color: #8B5CF6;
    --md-accent-fg-color--transparent: rgba(139, 92, 246, 0.1);
    --md-default-bg-color: #f8f9fa;
    --md-default-fg-color: #212529;
    --md-typeset-a-color: #6366F1;
    --header-color-1: #6366F1;
    --header-color-2: #8B5CF6;
    --inverted-primary: #21cac2;
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #0aa8ab;
    --md-primary-fg-color--light: #21cac2;
    --md-primary-fg-color--dark: #178882;
    --md-accent-fg-color: #0dcaf0;
    --md-accent-fg-color--transparent: rgba(13, 202, 240, 0.1);
    --md-default-bg-color: #121414;
    --md-default-fg-color: #ffffff;
    --md-typeset-a-color: #21cac2;
    --md-code-bg-color: #1e1e1e;
    --md-code-fg-color: #e6e6e6;
    --header-color-1: #16958f;
    --header-color-2: #0084a8;
    --inverted-primary: #8B5CF6;
}

.center {
    display: block;
    margin: 0 auto;
}

[data-md-color-scheme="default"] video[src$="#only-dark"],
[data-md-color-scheme="slate"] video[src$="#only-light"] {
    display: none;
}

.md-header,
.md-tabs {
    color: white;
    background-image: linear-gradient(
        135deg,
        var(--header-color-1) 0%,
        var(--header-color-2) 100%
    );
}

.md-search__button{
    color: white;
    background-color: hsla(var(--md-hue), 15%, 90%, 0.12)
}

.md-search__button::before{
    background-color: white;
}

.md-search__button:after {
    background: hsla(var(--md-hue),15%,5%,0.54);
}

.md-footer-meta {
    display: none;
}

.md-typeset .icon-token {
    font-size: 1.4em;
    padding: 0.15em;
    background: rgba(128, 128, 128, 0.12);
    border-radius: 0.25em;
    vertical-align: -0.15em;
}

.md-typeset .icon-token svg {
    width: 100%;
    height: 100%;
}

.md-typeset .icon-token.warning {
    color: #deae04;
}

.md-typeset .icon-token.primary {
    color: var(--md-primary-fg-color--light);
}

.md-typeset .icon-token.inverted-primary {
    color: var(--inverted-primary);
}

.md-typeset .icon-token.danger {
    color: #dc3545;
}