/*
 * Astrolinkers docs theme — aligned with the marketing landing palette.
 *
 * Source palette (astrolinkers-landing/src/app/globals.css):
 *   --bg: #0b0f1a;
 *   --bg-2: #0e1322;
 *   --panel: #131826;
 *   --panel-2: #1a2033;
 *   --border: #232a3d;
 *   --fg: #e6e9f2;
 *   --fg-bright: #ffffff;
 *   --muted: #8a93a6;
 *   --accent: #7aa2f7;       (blue)
 *   --accent-2: #bb9af7;     (lavender)
 *   --gradient: 135deg, #7aa2f7 0%, #bb9af7 50%, #f7768e 100%;
 *
 * We override Material's `--md-*` tokens to point at the landing palette
 * so the docs look like a continuation of the marketing site instead of
 * a stock Material dark theme.
 */

[data-md-color-scheme="slate"] {
    --md-default-bg-color: #0b0f1a;
    --md-default-bg-color--light: #0e1322;
    --md-default-bg-color--lighter: #131826;
    --md-default-bg-color--lightest: #1a2033;
    --md-default-fg-color: #e6e9f2;
    --md-default-fg-color--light: #c2c8d8;
    --md-default-fg-color--lighter: #8a93a6;
    --md-default-fg-color--lightest: #6a7384;

    /* Primary (top bar, links, sidebar headings). */
    --md-primary-fg-color: #7aa2f7;
    --md-primary-fg-color--light: #94b3f9;
    --md-primary-fg-color--dark: #5a86db;
    --md-primary-bg-color: #0b0f1a;
    --md-primary-bg-color--light: #131826;

    /* Accent (links, code highlights). */
    --md-accent-fg-color: #bb9af7;
    --md-accent-fg-color--transparent: rgba(187, 154, 247, 0.12);
    --md-accent-bg-color: #0b0f1a;

    /* Code blocks. */
    --md-code-bg-color: #0e1322;
    --md-code-fg-color: #e6e9f2;
    --md-code-hl-color: rgba(122, 162, 247, 0.18);

    /* Admonition + tables. */
    --md-typeset-table-color: #232a3d;
    --md-typeset-a-color: #7aa2f7;
}

/* Header bar matches landing's translucent panel feel. */
.md-header {
    background: rgba(11, 15, 26, 0.78);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid #232a3d;
    box-shadow: none;
}

/* Brand mark (logo + name) — use the gradient signature from the landing. */
.md-header__title {
    color: #ffffff;
}

.md-tabs {
    background: rgba(11, 15, 26, 0.55);
    border-bottom: 1px solid #232a3d;
}

/* Sidebar — quieter than the body. */
.md-nav__title {
    color: #ffffff;
    font-weight: 700;
}

.md-nav__item .md-nav__link--active {
    color: #bb9af7;
}

/* Gradient text utility — applied to h1 on the index page via attr_list. */
.gradient-text,
.md-typeset h1.gradient-text {
    background: linear-gradient(135deg, #7aa2f7 0%, #bb9af7 50%, #f7768e 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Body links use the accent blue with hover going lavender — same as landing. */
.md-typeset a {
    color: #7aa2f7;
    transition: color 120ms ease;
}

.md-typeset a:hover {
    color: #bb9af7;
}

/* Code spans (inline `code`) — subtle panel tint. */
.md-typeset code {
    background: rgba(122, 162, 247, 0.08);
    color: #bb9af7;
    border: 1px solid #232a3d;
    border-radius: 6px;
    padding: 0.1em 0.4em;
}

/* Fenced code blocks — sit on the panel surface. */
.md-typeset pre > code {
    background: #0e1322;
    border: 1px solid #232a3d;
    border-radius: 10px;
}

/* Admonitions — match the landing's soft panel style. */
.md-typeset .admonition,
.md-typeset details {
    background: #131826;
    border: 1px solid #232a3d;
    border-radius: 12px;
    box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
    background: rgba(122, 162, 247, 0.06);
    color: #e6e9f2;
    border-bottom: 1px solid #232a3d;
    font-weight: 600;
}

/* Buttons (used by the "back to top" floating button etc.). */
.md-typeset .md-button {
    background: linear-gradient(135deg, #7aa2f7 0%, #bb9af7 100%);
    color: #0b0f1a;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    transition: filter 140ms ease, transform 140ms ease;
}

.md-typeset .md-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Search box — match the input style on the landing. */
.md-search__form {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    border: 1px solid #232a3d;
}

.md-search__input {
    color: #e6e9f2;
}

.md-search__input::placeholder {
    color: #8a93a6;
}

/* Footer — same dim border + muted text as landing. */
.md-footer {
    background: #0b0f1a;
    border-top: 1px solid #232a3d;
}

.md-footer-meta {
    background: #0b0f1a;
    color: #8a93a6;
}

/* Tables — quieter borders, panel rows. */
.md-typeset table:not([class]) {
    background: #131826;
    border: 1px solid #232a3d;
    border-radius: 10px;
    overflow: hidden;
}

.md-typeset table:not([class]) th {
    background: rgba(122, 162, 247, 0.08);
    color: #ffffff;
    font-weight: 700;
}

.md-typeset table:not([class]) td {
    border-top: 1px solid #232a3d;
}

/* Headings use the bright fg + tighter letter-spacing, matching landing. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    color: #ffffff;
    letter-spacing: -0.01em;
    font-weight: 700;
}

/* Permalink anchors get a subtle accent so they don't shout. */
.md-typeset .headerlink {
    color: rgba(122, 162, 247, 0.4);
}

.md-typeset .headerlink:hover {
    color: #bb9af7;
}

/* Scrollbars (webkit) — dim panel-tinted. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0b0f1a;
}

::-webkit-scrollbar-thumb {
    background: #232a3d;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2c3247;
}