/* Light Mode */
[data-md-color-scheme="default"] {
    --md-default-bg-color: #F1F5F9;
    --md-default-bg-color--light: #FFFFFF;
    --md-default-bg-color--lighter: #E2E8F0;

    --md-primary-fg-color: #0F172A;
    --md-primary-bg-color: #FFFFFF;

    --md-accent-fg-color: #E11D48;

    --md-typeset-a-color: #0284C7;

    --md-text-color: #334155;
    --md-typeset-color: #0F172A;
}

/* Dark Mode */
[data-md-color-scheme="slate"] {
    --md-default-bg-color: #0F172A;
    --md-default-bg-color--light: #1E293B;
    --md-default-bg-color--lighter: #334155;

    --md-primary-fg-color: #020617;
    --md-primary-bg-color: #FFFFFF;

    --md-accent-fg-color: #FB7185;
    --md-code-bg-color: #090E1A;

    --md-text-color: #E2E8F0;
    --md-typeset-color: #F8FAFC;

    --md-typeset-a-color: var(--md-accent-fg-color);
}

/* Dynamic Header */
.md-header {
    background-color: var(--md-primary-fg-color) !important;
    box-shadow: none !important;
    border-bottom: 0px !important;
}

/* Gradient Border */
.md-tabs {
    background-color: var(--md-primary-fg-color) !important;
    border-bottom: 2px solid transparent !important;
    border-image: linear-gradient(to right, #3B82F6, #E30022) 1 !important;
}

/* Search Bar */
.md-search__input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
}
.md-search__input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Code Blocks */
.md-typeset .md-code {
    border-radius: 0.25rem !important;
    border: 1px solid var(--md-default-bg-color--lighter);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Let the inner pre tag breathe so tooltips can pop out! */
.md-typeset pre {
    overflow: visible !important; /* CRITICAL FIX: Removes the clipping wall */
    border: none !important;
    box-shadow: none !important;
}

/* Scale down the copy buttons */
.md-typeset .md-code__action {
    transform: scale(0.7);
    transform-origin: top right;
}

/* Smooth Admonitions */
.md-typeset .admonition, .md-typeset details {
    border-radius: 0.5rem;
    border-width: 1px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    background-color: var(--md-default-bg-color--light);
}

/* Enforce Accent Colors on API References & Links */
.md-typeset a,
.md-typeset .el,
.md-typeset a.el,
.md-typeset strong .el,
.md-typeset code a {
    color: var(--md-typeset-a-color) !important;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
}

.md-typeset a:hover,
.md-typeset .el:hover {
    opacity: 0.75;
}

/* Custom Callouts */
:root {
    --md-admonition-icon--important: var(--md-admonition-icon--info);
    --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A7 7 0 0 0 5 9c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1z"/></svg>');
    --md-admonition-icon--caution: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4m-1 6h2v4h-2V7m0 6h2v2h-2v-2z"/></svg>');
}

/* IMPORTANT (Purple) */
.md-typeset .admonition.important,
.md-typeset details.important {
    border-color: #8B5CF6 !important;
}
.md-typeset .important > .admonition-title,
.md-typeset .important > summary {
    background-color: rgba(139, 92, 246, 0.1) !important;
}
.md-typeset .important > .admonition-title::before,
.md-typeset .important > summary::before {
    background-color: #8B5CF6 !important;
    mask-image: var(--md-admonition-icon--important) !important;
    -webkit-mask-image: var(--md-admonition-icon--important) !important;
}

/* CAUTION (Red) */
.md-typeset .admonition.caution,
.md-typeset details.caution {
    border-color: #EF4444 !important;
}
.md-typeset .caution > .admonition-title,
.md-typeset .caution > summary {
    background-color: rgba(239, 68, 68, 0.1) !important;
}
.md-typeset .caution > .admonition-title::before,
.md-typeset .caution > summary::before {
    background-color: #EF4444 !important;
    mask-image: var(--md-admonition-icon--caution) !important;
    -webkit-mask-image: var(--md-admonition-icon--caution) !important;
}