/*
 * Oat Milk theme override for mkdocs-material.
 * Drop at docs/stylesheets/extra.css and reference from mkdocs.yml:
 *
 *   extra_css:
 *     - stylesheets/extra.css
 *   theme:
 *     palette:
 *       - scheme: default
 *         primary: custom
 *         accent:  custom
 *       - scheme: slate
 *         primary: custom
 *         accent:  custom
 *
 * The palette-name "custom" pairs with the --md-* overrides below.
 */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ——— Light (cream paper) ——— */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:              #1A1613;
  --md-primary-fg-color--light:       #3A342C;
  --md-primary-fg-color--dark:        #1A1613;
  --md-primary-bg-color:              #FBF7EC;
  --md-primary-bg-color--light:       #F4EEE2;

  --md-accent-fg-color:               #C65A3A;
  --md-accent-fg-color--transparent:  rgba(198, 90, 58, 0.12);
  --md-accent-bg-color:               #FBF7EC;

  --md-default-bg-color:              #F4EEE2;
  --md-default-fg-color:              #1A1613;
  --md-default-fg-color--light:       #3A342C;
  --md-default-fg-color--lighter:     #6B6458;
  --md-default-fg-color--lightest:    #D9CFB9;

  --md-code-bg-color:                 #FBF7EC;
  --md-code-fg-color:                 #1A1613;

  --md-typeset-a-color:               #C65A3A;
}

/* ——— Dark (espresso) ——— */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:              #1A1410;
  --md-default-bg-color--light:       #221A14;
  --md-default-bg-color--lighter:     #261D17;
  --md-default-fg-color:              #F4E8D8;
  --md-default-fg-color--light:       #CBB79D;
  --md-default-fg-color--lighter:     #8A7866;

  --md-primary-fg-color:              #F4E8D8;
  --md-primary-bg-color:              #1A1410;

  --md-accent-fg-color:               #E98B5F;
  --md-accent-fg-color--transparent:  rgba(233, 139, 95, 0.14);

  --md-code-bg-color:                 #221A14;
  --md-code-fg-color:                 #F4E8D8;
  --md-typeset-a-color:               #E98B5F;
}

/* ——— Typography ——— */
:root {
  --md-text-font: "Geist", system-ui, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, monospace;
}

.md-typeset h1,
.md-typeset h2 {
  font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.md-typeset h1 { font-size: 2.8rem; margin-top: 0.6em; }
.md-typeset h2 { font-size: 2rem; margin-top: 2.4em; }

.md-typeset h1 em,
.md-typeset h2 em {
  color: var(--md-accent-fg-color);
  font-style: italic;
}

.md-typeset p { text-wrap: pretty; line-height: 1.6; }

.md-typeset code {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  background: var(--md-code-bg-color);
}

/* Eyebrow / section labels — hijack admonition "note" for the editorial look */
.md-typeset .admonition {
  border-radius: 10px;
  border-left-width: 3px;
  font-size: 0.82rem;
}

/* Header strip — less stark, warm border-bottom. Keep the wordmark + tabs
 * readable across both schemes: force the foreground to the default text
 * colour so they never inherit the browser's neon-blue selection state. */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color--light, var(--md-default-bg-color));
  color: var(--md-default-fg-color);
}

.md-header__title,
.md-header__topic,
.md-header__button,
.md-tabs,
.md-tabs__link { color: var(--md-default-fg-color); }

.md-tabs {
  background: var(--md-default-bg-color--light, var(--md-default-bg-color));
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-header__title { font-family: "Instrument Serif", Georgia, serif; font-size: 1.25rem; }

/* Navigation — softer active state */
.md-nav__link--active {
  color: var(--md-accent-fg-color);
  font-weight: 500;
}

/* Text selection — editorial terracotta, scoped to the reading surface so
 * the header and tabs keep the browser's calm native highlight. */
.md-main ::selection,
.md-content ::selection,
.md-typeset ::selection {
  background: rgba(198, 90, 58, 0.18);
  color: inherit;
}

[data-md-color-scheme="slate"] .md-main ::selection,
[data-md-color-scheme="slate"] .md-content ::selection,
[data-md-color-scheme="slate"] .md-typeset ::selection {
  background: rgba(233, 139, 95, 0.22);
  color: inherit;
}

/* Footer — editorial caption feel */
.md-footer-meta { background: var(--md-default-bg-color--light, var(--md-default-bg-color)); }
.md-footer { background: var(--md-default-bg-color--light, var(--md-default-bg-color)); }