/* ==========================================================================
   AKILIBOT brand layer — docs.akilibot.dev
   --------------------------------------------------------------------------
   Loaded via extra_css AFTER the Material stylesheets, so overrides with
   equal specificity below win. Brand hexes are taken from the akilibot.dev
   landing (packages/ui/public/index.html):
     accent #0d9488 · hover #0f766e · background #0b0b0b · surface #171717
   ========================================================================== */

:root {
    --akb-teal: #0d9488; /* landing accent */
    --akb-teal-light: #14b8a6;
    --akb-teal-bright: #2dd4bf; /* body links on slate */
    --akb-teal-dark: #0f766e; /* landing accent-hover */
}

/* ---- Brand palette: map Material's teal slots onto the landing hexes ---- */

[data-md-color-primary='teal'] {
    --md-primary-fg-color: var(--akb-teal);
    --md-primary-fg-color--light: var(--akb-teal-light);
    --md-primary-fg-color--dark: var(--akb-teal-dark);
}

[data-md-color-accent='teal'] {
    --md-accent-fg-color: var(--akb-teal-light);
    --md-accent-fg-color--transparent: #14b8a61a;
}

/* ---- Slate (dark) tuning: teal-tinted darks + legible links/code ---- */

/* Teal-tinted hue: bg / code surfaces drift toward the landing's dark
   identity instead of Material's blue-gray default (hue 225). */
[data-md-color-scheme='slate'] {
    --md-hue: 195;
    /* Brighter teal for body links on dark (Material's slate+teal default is
     #00ccb8 — dimmer against the teal-tinted background). */
    --md-typeset-a-color: var(--akb-teal-bright);
}

/* Material defines this at higher specificity for slate+teal; match it. */
[data-md-color-scheme='slate'][data-md-color-primary='teal'] {
    --md-typeset-a-color: var(--akb-teal-bright);
}

/* Inline code: teal-tinted text on the theme's dark code chip. */
.md-typeset :not(pre):not(del) > code {
    color: var(--akb-teal-light);
}

/* ---- Header wordmark: match akilibot.dev PublicLayout ----
   Main site (PublicLayout.jsx): Inter 700, 1.15rem, -0.3px, lowercase
   "akilibot", paired with the brain icon at 28x28. */

.md-header {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    width: 28px;
    height: 28px;
}

.md-header__title,
.md-header__topic {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.md-header__title .md-ellipsis,
.md-header__topic .md-ellipsis {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-transform: lowercase;
    color: #fafaf9;
}

/* ---- Home landing (hero injected by custom_theme/main.html) ---- */

.akb-hero {
    padding: 2.2rem 0 1.4rem;
    text-align: center;
}

.akb-hero__logo {
    width: 88px;
    height: 88px;
    margin-bottom: 0.6rem;
}

.akb-hero__title {
    margin: 0 0 0.4rem;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(90deg, var(--akb-teal-bright), var(--akb-teal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.akb-hero__tagline {
    max-width: 34rem;
    margin: 0 auto 1.2rem;
    color: var(--md-default-fg-color--light);
    font-size: 0.72rem;
    line-height: 1.6;
}

.akb-hero__actions {
    margin-bottom: 1.6rem;
}

.akb-btn {
    display: inline-block;
    margin: 0 0.25rem;
    padding: 0.45rem 1.1rem;
    border: 1px solid #14b8a655;
    border-radius: 0.4rem;
    color: var(--akb-teal-bright);
    font-weight: 500;
    transition: background-color 125ms, border-color 125ms;
}

.akb-btn:hover {
    border-color: var(--akb-teal-light);
    background-color: var(--md-accent-fg-color--transparent);
    color: var(--akb-teal-bright);
}

.akb-btn--primary {
    background: var(--akb-teal);
    border-color: transparent;
    color: #fff;
}

.akb-btn--primary:hover {
    background: var(--akb-teal-dark);
    color: #fff;
}

/* Landing layout: hide nav/TOC sidebars and center the content column when
   the hero is present (:has is supported in all evergreen browsers; if not,
   the page gracefully falls back to the standard three-column layout). */
.md-main__inner:has(.akb-hero) .md-sidebar {
    display: none;
}

.md-main__inner:has(.akb-hero) .md-content__inner {
    max-width: 52rem;
    margin: 0 auto;
}