/* SPOT documentation — chocolatier palette
   Mirrors the warm cream/orange palette used by the SPOT web dashboard
   (qaptoR-nvim/chocolatier.nvim). Both light and dark variants are
   defined so MkDocs Material's slate scheme picks them up automatically.
*/

[data-md-color-scheme="default"] {
    --md-primary-fg-color:        #a95e09;
    --md-primary-fg-color--light: #e48212;
    --md-primary-fg-color--dark:  #6b3a04;
    --md-primary-bg-color:        #fbf2e6;
    --md-primary-bg-color--light: #fbf2e6;

    --md-accent-fg-color:         #e48212;
    --md-accent-fg-color--transparent: rgba(228, 130, 18, 0.14);

    --md-default-fg-color:        #281f11;
    --md-default-fg-color--light: #644c2c;
    --md-default-fg-color--lighter: #8a693c;
    --md-default-fg-color--lightest: #d3af86;
    --md-default-bg-color:        #fbf2e6;
    --md-default-bg-color--light: #f4e3c9;
    --md-default-bg-color--lighter: #f9ecd5;
    --md-default-bg-color--lightest: #fffaf2;

    --md-typeset-color:           #281f11;
    --md-typeset-a-color:         #a95e09;

    --md-code-bg-color:           #f9ecd5;
    --md-code-fg-color:           #281f11;

    --md-footer-bg-color:         #281f11;
    --md-footer-bg-color--dark:   #1f1610;
    --md-footer-fg-color:         #fbf2e6;
    --md-footer-fg-color--light:  #ead2ac;
    --md-footer-fg-color--lighter: #c5a37d;
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color:        #e48212;
    --md-primary-fg-color--light: #f4aa2b;
    --md-primary-fg-color--dark:  #a95e09;
    --md-primary-bg-color:        #281f11;
    --md-primary-bg-color--light: #281f11;

    --md-accent-fg-color:         #f4aa2b;
    --md-accent-fg-color--transparent: rgba(244, 170, 43, 0.18);

    --md-default-fg-color:        #ebc295;
    --md-default-fg-color--light: #c5a37d;
    --md-default-fg-color--lighter: #aa8c6b;
    --md-default-fg-color--lightest: #7c5f35;
    --md-default-bg-color:        #251b11;
    --md-default-bg-color--light: #2e2115;
    --md-default-bg-color--lighter: #3b2f24;
    --md-default-bg-color--lightest: #4a3a2d;

    --md-typeset-color:           #ebc295;
    --md-typeset-a-color:         #f4aa2b;

    --md-code-bg-color:           #2e2115;
    --md-code-fg-color:           #ebc295;

    --md-footer-bg-color:         #1e160c;
    --md-footer-bg-color--dark:   #1e160c;
    --md-footer-fg-color:         #ebc295;
    --md-footer-fg-color--light:  #c5a37d;
    --md-footer-fg-color--lighter: #aa8c6b;
}

/* Soften table headers to use the warm primary tone instead of black. */
.md-typeset table:not([class]) th {
    background-color: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
}

/* Admonition titles inherit the palette so warnings/tips don't clash. */
.md-typeset .admonition,
.md-typeset details {
    border-color: var(--md-default-fg-color--lightest);
}

/* Plain warm-cream header (chocolatier primary). */
.md-header,
.md-tabs {
    background: var(--md-primary-fg-color);
}

/* Active nav item uses the accent so it pops against the warm cream. */
.md-nav__item--active > .md-nav__link {
    color: var(--md-primary-fg-color);
    font-weight: 600;
}

/* Code block radius matches the dashboard cards. */
.md-typeset .codehilite,
.md-typeset pre > code {
    border-radius: 8px;
}

/* Screenshots: every <img> rendered from prose markdown gets a
   rounded corner, a soft warm shadow, and a sensible max width so
   wide screenshots don't dominate the column. The selector
   excludes inline header/icon imagery (Material renders those via
   <span> with an SVG, not a bare <img> in .md-typeset content). */
.md-typeset img,
.md-typeset figure > img {
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(40, 31, 17, 0.18),
                0 1px 3px rgba(40, 31, 17, 0.10);
    max-width: 720px;
    width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border: 1px solid var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="slate"] .md-typeset img,
[data-md-color-scheme="slate"] .md-typeset figure > img {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55),
                0 1px 3px rgba(0, 0, 0, 0.30);
}
.md-typeset figure {
    text-align: center;
}
.md-typeset figure figcaption {
    font-size: 0.875rem;
    color: var(--md-default-fg-color--light);
    margin-top: 0.5rem;
    font-style: italic;
}

/* Image placeholders: any <figure class="placeholder"> renders as a
   subtle dashed cream rectangle so contributors can see at a glance
   where a screenshot still needs to be captured. */
.md-typeset figure.placeholder {
    border: 2px dashed var(--md-default-fg-color--lightest);
    background-color: var(--md-default-bg-color--light);
    border-radius: 8px;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--md-default-fg-color--light);
    font-style: italic;
    margin: 1.5rem 0;
}
.md-typeset figure.placeholder::before {
    content: "Screenshot pending";
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--md-primary-fg-color);
    font-style: normal;
}