/* ═══════════════════════════════════════════════════════════
   ClipFactory docs — palette aligned with the app UI
   Base app colors:
     --bg: #0a0a0a           (page)
     --bg-raised: #111       (cards, code)
     --bg-subtle: #161616    (inputs)
     --bg-hover: #1a1a1a
     --border: #1e1e1e
     --text: #e8e8e8
     --text-secondary: #777
   ═══════════════════════════════════════════════════════════ */

:root,
[data-md-color-scheme="default"] {
    --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --md-code-font: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace;
}

/* ─── dark scheme (primary look) ─────────────────────────── */
[data-md-color-scheme="slate"] {
    --md-hue: 0;

    --md-default-bg-color:            #0a0a0a;
    --md-default-bg-color--light:     #111111;
    --md-default-bg-color--lighter:   #161616;
    --md-default-bg-color--lightest:  #1a1a1a;

    --md-default-fg-color:            #e8e8e8;
    --md-default-fg-color--light:     #bbbbbb;
    --md-default-fg-color--lighter:   #777777;
    --md-default-fg-color--lightest:  #444444;

    --md-primary-fg-color:            #0a0a0a;
    --md-primary-fg-color--light:     #111111;
    --md-primary-fg-color--dark:      #000000;
    --md-primary-bg-color:            #ffffff;
    --md-primary-bg-color--light:     rgba(255,255,255,0.7);

    --md-accent-fg-color:             #ffffff;
    --md-accent-fg-color--transparent: rgba(255,255,255,0.08);
    --md-accent-bg-color:             #0a0a0a;
    --md-accent-bg-color--light:      #111111;

    --md-typeset-a-color:             #ffffff;
    --md-typeset-color:               #e8e8e8;
    --md-typeset-mark-color:          rgba(255,255,255,0.14);

    --md-code-bg-color:               #111111;
    --md-code-fg-color:               #e8e8e8;
    --md-code-hl-color:               rgba(255,255,255,0.08);

    --md-admonition-bg-color:         #111111;
    --md-admonition-fg-color:         #e8e8e8;

    --md-footer-bg-color:             #0a0a0a;
    --md-footer-bg-color--dark:       #000000;
    --md-footer-fg-color:             #e8e8e8;
    --md-footer-fg-color--light:      #bbbbbb;
    --md-footer-fg-color--lighter:    #777777;
}

/* ─── header: glassy dark with subtle border, like the app ─ */
[data-md-color-scheme="slate"] .md-header {
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid #1e1e1e;
    box-shadow: none;
}
[data-md-color-scheme="slate"] .md-header--shadow {
    box-shadow: none;
}

/* tabs strip directly under header */
[data-md-color-scheme="slate"] .md-tabs {
    background: #0a0a0a;
    border-bottom: 1px solid #1e1e1e;
}

/* ─── sidebar navigation ─────────────────────────────────── */
[data-md-color-scheme="slate"] .md-nav__link {
    color: #bbb;
    transition: color .2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link:focus {
    color: #fff;
}
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
    color: #fff;
    font-weight: 600;
}
[data-md-color-scheme="slate"] .md-nav__title {
    color: #777;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* page icons rendered by Material's nav-item partial */
.md-nav__link > svg,
.md-nav__link .twemoji {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: currentColor;
}

/* ─── typography & content ──────────────────────────────── */
[data-md-color-scheme="slate"] .md-typeset h1 {
    color: #fff;
    font-weight: 700;
    letter-spacing: -.5px;
}
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
    color: #fff;
    letter-spacing: -.3px;
}
[data-md-color-scheme="slate"] .md-typeset a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,.25);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease;
}
[data-md-color-scheme="slate"] .md-typeset a:hover {
    text-decoration-color: #fff;
}

[data-md-color-scheme="slate"] .md-typeset code {
    background: #1a1a1a;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .85em;
}
[data-md-color-scheme="slate"] .md-typeset pre > code {
    background: transparent;
    border: 0;
    padding: 0;
}
[data-md-color-scheme="slate"] .md-typeset .highlight pre {
    background: #111;
    border: 1px solid #1e1e1e;
    border-radius: 8px;
}

/* ─── search ─────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-search__form {
    background: rgba(255,255,255,.05);
    border-radius: 8px;
    transition: background .2s ease;
}
[data-md-color-scheme="slate"] .md-search__form:hover {
    background: rgba(255,255,255,.08);
}
[data-md-color-scheme="slate"] .md-search__input::placeholder {
    color: #666;
}
[data-md-color-scheme="slate"] .md-search__output {
    background: #0a0a0a;
    border: 1px solid #1e1e1e;
    border-radius: 8px;
}

/* ─── admonitions (callouts) ─────────────────────────────── */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
    background: #111;
    border: 1px solid #1e1e1e;
    border-left-width: 3px;
    border-radius: 8px;
}

/* ─── tables ─────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
    background: #0a0a0a;
    border: 1px solid #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
    background: #111;
    color: #fff;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr {
    border-bottom: 1px solid #1e1e1e;
}

/* ─── light scheme touch-ups (kept toggle available) ─────── */
[data-md-color-scheme="default"] {
    --md-primary-fg-color:   #0a0a0a;
    --md-primary-bg-color:   #ffffff;
    --md-accent-fg-color:    #0a0a0a;
    --md-typeset-a-color:    #0a0a0a;
}