/**
 * Zenith Documentation Custom Theme (custom.css)
 *
 * Customizes Zensical (Material for MkDocs) using tokens from palette.css.
 * - Primary & accent brand colors drawn from the Zenith Star Emblem (#38bdf8 & #0284c7).
 * - Light scheme calibrated with clean starlight slate (#f8fafc) and accessible azure.
 * - Dark scheme calibrated with cosmic obsidian void (#080c14) and glowing starlight cyan.
 * - Calibrated hue angles (212deg) to match the celestial space atmosphere.
 */

/* =============================================================================
   1. Light Color Scheme (Starlight Slate + Guiding Azure)
   ============================================================================= */
[data-md-color-scheme="default"] {
    /* Primary brand colors (Starlight azure tuned for crisp high-contrast readability) */
    --md-primary-fg-color: var(--color-cyan-700);
    --md-primary-fg-color--light: var(--color-cyan-600);
    --md-primary-fg-color--dark: var(--color-cyan-800);
    --md-primary-bg-color: var(--color-star-white);
    --md-primary-bg-color--light: var(--color-slate-50-translucent);

    /* Accent brand colors (Luminous Zenith cyan) */
    --md-accent-fg-color: var(--color-cyan-600);
    --md-accent-fg-color--transparent: var(--color-cyan-soft);
    --md-accent-bg-color: var(--color-slate-50);

    /* Refined light backgrounds (crisp stellar slate canvas) */
    --md-default-bg-color: var(--color-slate-50);
    --md-default-bg-color--light: var(--color-slate-50-translucent);
    --md-default-bg-color--lighter: var(--color-slate-100);
    --md-default-bg-color--lightest: var(--color-slate-200);

    /* Refined light foregrounds (deep obsidian slate text) */
    --md-default-fg-color: var(--color-slate-900);
    --md-default-fg-color--light: var(--color-slate-700);
    --md-default-fg-color--lighter: var(--color-slate-500);
    --md-default-fg-color--lightest: var(--color-slate-300);

    /* Code blocks */
    --md-code-bg-color: var(--color-slate-100);
    --md-code-fg-color: var(--color-slate-900);
    --md-code-hl-color: var(--color-cyan-100);

    /* Links and navigation */
    --md-typeset-a-color: var(--color-cyan-700);

    /* Footer */
    --md-footer-bg-color: var(--color-slate-100);
    --md-footer-bg-color--dark: var(--color-slate-200);
}

/* =============================================================================
   2. Dark Color Scheme (Cosmic Obsidian Void + Radiant Starlight Cyan)
   ============================================================================= */
[data-md-color-scheme="slate"] {
    /* Adjusted hue for dark mode: 212deg (Deep celestial cosmic azure/slate) */
    --md-hue: 212deg;

    /* Primary brand colors (Starlight cyan core matching zenith-star.svg) */
    --md-primary-fg-color: var(--color-cyan-400);
    --md-primary-fg-color--light: var(--color-cyan-300);
    --md-primary-fg-color--dark: var(--color-cyan-600);
    --md-primary-bg-color: var(--color-star-ice);
    --md-primary-bg-color--light: var(--color-star-ice-translucent);

    /* Accent brand colors (Luminous starlight bloom) */
    --md-accent-fg-color: var(--color-cyan-400);
    --md-accent-fg-color--transparent: var(--color-cyan-soft);
    --md-accent-bg-color: var(--color-obsidian-850);

    /* Refined dark backgrounds (Cosmic obsidian void from the Zenith medallion) */
    --md-default-bg-color: var(--color-obsidian-850);
    --md-default-bg-color--light: var(--color-obsidian-850-translucent);
    --md-default-bg-color--lighter: var(--color-obsidian-900);
    --md-default-bg-color--lightest: var(--color-obsidian-950);

    /* Refined dark foregrounds (Crystalline star white & silver facet slate) */
    --md-default-fg-color: var(--color-star-ice);
    --md-default-fg-color--light: var(--color-slate-300);
    --md-default-fg-color--lighter: var(--color-slate-400);
    --md-default-fg-color--lightest: var(--color-obsidian-700);

    /* Code blocks (Deep obsidian void with subtle astrolabe border) */
    --md-code-bg-color: var(--color-obsidian-900);
    --md-code-fg-color: var(--color-star-ice);
    --md-code-hl-color: var(--color-obsidian-750);

    /* Links and navigation */
    --md-typeset-a-color: var(--color-cyan-400);

    /* Footer */
    --md-footer-bg-color: var(--color-obsidian-900);
    --md-footer-bg-color--dark: var(--color-obsidian-950);
}

/* =============================================================================
   3. Refined Typography, Admonitions & Visual Polish
   ============================================================================= */
.md-typeset a {
    transition: color 0.15s ease-in-out;
}

.md-typeset a:hover {
    color: var(--color-cyan-500);
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
    color: var(--color-cyan-300);
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

/* Header subtle starlight border */
.md-header {
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Cosmic glow for cards on hover */
.grid.cards > ul > li {
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.grid.cards > ul > li:hover {
    border-color: var(--color-cyan-400);
    box-shadow: 0 4px 20px var(--color-cyan-soft);
}

/* Polished code block borders */
[data-md-color-scheme="slate"] .md-typeset pre > code {
    border: 1px solid var(--color-obsidian-700);
}

/* Scrollable showcase for tool configurations */
.config-block pre,
.config-scroll pre,
.scrollable-code pre,
.md-typeset h2#configuration-in-zenith + p + .highlight pre,
.md-typeset h2#configuration-in-zenith + p + .tabbed-set .highlight pre,
.md-typeset h2#configuration-in-zenith + .highlight pre {
    max-height: 24rem;
    overflow-y: auto;
    scrollbar-width: thin;
}