/* ============================================================
   Trimus docs theme — mirrors the Trimus app UI (internal/web/static/app.css)
   Maps Material for MkDocs CSS variables onto the app's design tokens for
   both the light ("default") and dark ("slate") colour schemes.
   ============================================================ */

/* ── Trimus / Keystone identity — mirrors internal/web/static/app.css.
   Self-hosted from docs/user/assets/fonts/ (see OFL.txt there). ── */
@font-face { font-family:'Space Grotesk'; font-weight:400; font-display:swap; src:url('../assets/fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:500; font-display:swap; src:url('../assets/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:700; font-display:swap; src:url('../assets/fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-weight:400; font-display:swap; src:url('../assets/fonts/hanken-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-weight:500; font-display:swap; src:url('../assets/fonts/hanken-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-weight:700; font-display:swap; src:url('../assets/fonts/hanken-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'Martian Mono'; font-weight:400; font-display:swap; src:url('../assets/fonts/martian-mono-400.woff2') format('woff2'); }
@font-face { font-family:'Martian Mono'; font-weight:600; font-display:swap; src:url('../assets/fonts/martian-mono-600.woff2') format('woff2'); }

:root {
  --brand-name:"Trimus";
  --brand-primary:#1f5fa8; --brand-primary-deep:#173f6f; --brand-primary-soft:#dbe6f3;
  --brand-signal:#d98a1e; --brand-danger:#a3352c;
  --brand-ink:#14181f; --brand-sub:#4a5461;
  --brand-bg:#eef1f4; --brand-surface:#f9fafb; --brand-line:#d3dae1;
  --brand-radius:8px;
  --brand-font-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --brand-font-text:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --brand-font-mono:'Martian Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --trimus-font: var(--brand-font-text);
  --trimus-mono: var(--brand-font-mono);
  --md-text-font-family: var(--trimus-font);
  --md-code-font-family: var(--trimus-mono);
}

/* ---------- Light scheme ---------- */
[data-md-color-scheme="default"] {
  --md-hue: 222;

  /* Accent — Keystone cobalt (app --primary / --primary-hover, var(--brand-primary)) */
  --md-primary-fg-color:        #1f5fa8;
  --md-primary-fg-color--light: #4a86c2;
  --md-primary-fg-color--dark:  #173f6f;
  --md-primary-bg-color:        #111827;   /* fg on the (surface) header */
  --md-primary-bg-color--light: #5b6472;
  --md-accent-fg-color:         #1f5fa8;

  /* Surfaces (app --bg / --surface / --surface-2) */
  --md-default-bg-color:        #f6f7f9;
  --md-default-fg-color:        #111827;
  --md-default-fg-color--light:   rgba(17, 24, 39, 0.62);
  --md-default-fg-color--lighter:  rgba(17, 24, 39, 0.32);
  --md-default-fg-color--lightest: rgba(17, 24, 39, 0.07);
  --md-typeset-color:           #111827;

  /* Links (app --primary-hover, var(--brand-primary-deep)) */
  --md-typeset-a-color:         #173f6f;

  /* Code (app --surface-2 / --text) */
  --md-code-bg-color:           #f1f3f6;
  --md-code-fg-color:           #1f2937;

  /* Footer (app dark sidebar feel) */
  --md-footer-bg-color:         #111a2b;
  --md-footer-bg-color--dark:   #0b1220;

  --trimus-surface:   #ffffff;
  --trimus-surface-2: #f1f3f6;
  --trimus-border:    #e4e7ec;
  --trimus-shadow:    0 1px 2px rgba(15, 23, 42, 0.05);
}

/* ---------- Dark scheme ---------- */
[data-md-color-scheme="slate"] {
  --md-hue: 222;

  /* Accent — a lighter Keystone cobalt tint for legibility on dark surfaces */
  --md-primary-fg-color:        #5b93cf;
  --md-primary-fg-color--light: #8fb8e0;
  --md-primary-fg-color--dark:  #3f7cc0;
  --md-primary-bg-color:        #e5e9f2;
  --md-primary-bg-color--light: #9aa5b6;
  --md-accent-fg-color:         #8fb8e0;

  --md-default-bg-color:        #0b1220;
  --md-default-fg-color:        #e5e9f2;
  --md-default-fg-color--light:   rgba(229, 233, 242, 0.68);
  --md-default-fg-color--lighter:  rgba(229, 233, 242, 0.40);
  --md-default-fg-color--lightest: rgba(229, 233, 242, 0.12);
  --md-typeset-color:           #e5e9f2;

  --md-typeset-a-color:         #6ba3dd;

  --md-code-bg-color:           #0f1828;
  --md-code-fg-color:           #d6deea;

  --md-footer-bg-color:         #0b1220;
  --md-footer-bg-color--dark:   #070d18;

  --trimus-surface:   #111a2b;
  --trimus-surface-2: #0f1828;
  --trimus-border:    #25324a;
  --trimus-shadow:    0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   Header & top nav — the app uses a light/surface topbar with a
   bottom border, not a saturated colour bar.
   ============================================================ */
.md-header {
  background-color: var(--trimus-surface);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--trimus-border);
  box-shadow: none;
}
.md-header--shadow { box-shadow: 0 1px 0 var(--trimus-border); }
.md-header__title { font-weight: 600; }

.md-tabs {
  background-color: var(--trimus-surface);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--trimus-border);
}
.md-tabs__link { opacity: 0.72; }
.md-tabs__link:hover,
.md-tabs__link--active { opacity: 1; color: var(--md-primary-fg-color); }

/* Search field reads as an app input */
.md-search__form {
  background-color: var(--trimus-surface-2);
  border: 1px solid var(--trimus-border);
  border-radius: 8px;
  box-shadow: none;
}
.md-search__form:hover { background-color: var(--trimus-surface-2); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-color: var(--md-primary-fg-color);
}
.md-search__input { color: var(--md-default-fg-color); }
.md-search__input::placeholder { color: var(--md-default-fg-color--lighter); }

/* Per-scheme logo swap (app ships a light + a dark mark) */
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-nav__button.md-logo img {
  content: url("../assets/logo-dark.svg");
}

/* ============================================================
   Sidebar / nav — active item picks up the app's blue rail.
   ============================================================ */
.md-nav__link:focus,
.md-nav__link:hover { color: var(--md-primary-fg-color); }
.md-nav__item .md-nav__link--active,
.md-nav__link--active > .md-nav__link {
  color: var(--md-primary-fg-color--dark);
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  color: var(--md-primary-fg-color);
}

/* ============================================================
   Typography & content surfaces
   ============================================================ */
.md-typeset { font-feature-settings: "kern", "liga"; }
.md-typeset h1,
.md-typeset h2 { font-weight: 650; letter-spacing: -0.01em; }
.md-typeset h2 {
  border-bottom: 1px solid var(--trimus-border);
  padding-bottom: 0.3em;
}

.md-typeset a { text-underline-offset: 2px; }

/* Inline code + fenced blocks — app surface-2 with a border + 6px radius */
.md-typeset code {
  border-radius: var(--md-code-radius, 6px);
}
.md-typeset pre > code {
  border: 1px solid var(--trimus-border);
  border-radius: 8px;
}
.highlight > pre,
.md-typeset .highlight { border-radius: 8px; }

/* Tables — app card look */
.md-typeset table:not([class]) {
  border: 1px solid var(--trimus-border);
  border-radius: 8px;
  box-shadow: var(--trimus-shadow);
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background-color: var(--trimus-surface-2);
  font-weight: 600;
}
.md-typeset table:not([class]) tr:hover {
  background-color: var(--md-default-fg-color--lightest);
}

/* Buttons — app primary */
.md-typeset .md-button {
  border-radius: 6px;
  border-color: var(--trimus-border);
}
.md-typeset .md-button--primary {
  background-color: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: #ffffff;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--md-primary-fg-color--dark);
  border-color: var(--md-primary-fg-color--dark);
}

/* ============================================================
   Admonitions — recoloured to the app's callout palette
   (info=blue, warning=amber, success=green, danger=red).
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border-width: 1px;
  box-shadow: var(--trimus-shadow);
  font-size: 0.74rem;
}
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset .admonition.abstract {
  border-color: #bfdbfe;
}
.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title,
.md-typeset .abstract > .admonition-title {
  background-color: rgba(59, 130, 246, 0.10);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before { background-color: #3b82f6; }

.md-typeset .admonition.tip,
.md-typeset .admonition.success {
  border-color: #a7f3d0;
}
.md-typeset .tip > .admonition-title,
.md-typeset .success > .admonition-title {
  background-color: rgba(34, 197, 94, 0.12);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .success > .admonition-title::before { background-color: #16a34a; }

.md-typeset .admonition.warning,
.md-typeset .admonition.caution {
  border-color: #fde68a;
}
.md-typeset .warning > .admonition-title,
.md-typeset .caution > .admonition-title {
  background-color: rgba(245, 158, 11, 0.14);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .caution > .admonition-title::before { background-color: #d97706; }

.md-typeset .admonition.danger,
.md-typeset .admonition.failure,
.md-typeset .admonition.bug {
  border-color: #fecaca;
}
.md-typeset .danger > .admonition-title,
.md-typeset .failure > .admonition-title,
.md-typeset .bug > .admonition-title {
  background-color: rgba(239, 68, 68, 0.12);
}
.md-typeset .danger > .admonition-title::before,
.md-typeset .failure > .admonition-title::before,
.md-typeset .bug > .admonition-title::before { background-color: #dc2626; }

/* Tag/label pills (app badge feel) */
.md-typeset .md-tag {
  border-radius: 999px;
  background-color: var(--trimus-surface-2);
  border: 1px solid var(--trimus-border);
}

/* Footer accent */
.md-footer-meta { background-color: var(--md-footer-bg-color--dark); }