docs/publishing/brand.css

/* Inference Cooperative brand layer for the documentation site.
 *
 * Source of truth: the co-op's website (repos/website/index.html) — its CSS
 * custom properties and its Figtree webfont. This file reuses those values so
 * the documentation reads as the same organisation, not a default theme.
 *
 * Standing constraint: everything here is local. No third-party font service,
 * no CDN, no other external host.
 */

:root {
  /* -- the co-op's palette (copied from repos/website/index.html) -- */
  --cream: #faf8f5;
  --white: #ffffff;
  --ink: #2d3327;
  --muted: #6b7a62;
  --light-muted: #94a08c;
  --green-deep: #5b8c5a;
  --green-mid: #6ba86b;
  --green-light: #7ab87a;
  --border: #e8e2d8;
  --wash: #eef4ea;
  --earth-red: #a04b3a;
  --earth-red-wash: #f3e6e1;
  --bronze: #a97a4a;
  --bronze-wash: #f1e8da;
}

/* ---------- Material for MkDocs: map the palette onto the theme ---------- */

:root,
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--cream);
  --md-primary-fg-color: var(--green-deep);
  --md-primary-fg-color--light: var(--green-mid);
  --md-primary-fg-color--dark: #4a7a49;
  --md-primary-bg-color: var(--cream);
  --md-accent-fg-color: var(--earth-red);
  --md-typeset-a-color: var(--green-deep);
  --md-typeset-color: var(--ink);
  --md-footer-bg-color: var(--wash);
  --md-footer-fg-color: var(--ink);
  --md-footer-fg-color--light: var(--muted);
  --md-code-bg-color: #f2efe9;
  --md-code-fg-color: var(--ink);
  --md-admonition-bg-color: var(--wash);
}

/* Dark scheme keeps the same accents; light stays the default. */
[data-md-color-scheme="slate"] {
  /* The header was #3f6b3e -- a dark green against a dark page, so the bar
     disappeared into the background. Green-mid with near-black text keeps the
     bar legible in dark mode while staying on brand. */
  --md-primary-fg-color: #6ba86b;
  --md-primary-fg-color--light: #7ab87a;
  --md-primary-fg-color--dark: #5b8c5a;
  --md-primary-bg-color: #16201a;
  --md-primary-bg-color--light: rgba(22, 32, 26, 0.7);
  --md-accent-fg-color: #d98a75;
  --md-typeset-a-color: var(--green-light);
  --md-code-bg-color: #2e3328;
  --md-code-fg-color: #e8e2d8;
}

/* ---------- Typography: Figtree, self-hosted (SIL OFL 1.1) ---------- */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/figtree-400.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/figtree-500.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/figtree-600.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/figtree-700.woff2") format("woff2");
}

:root {
  --md-text-font-family: "Figtree", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-code-font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono",
    "Segoe UI Mono", Menlo, Consolas, monospace;
}

/* ---------- Friendly details ---------- */

/* Links read like the website's: brand green, semibold, underline on hover. */
.md-typeset a {
  font-weight: 600;
}
.md-typeset a:hover,
.md-typeset a:focus {
  text-decoration: underline;
}

/* Rounder cards and tables; a wash instead of grey where the theme has one. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card,
.md-typeset table:not([class]) {
  border-radius: 0.6rem;
}
.md-typeset table:not([class]) {
  border: 1px solid var(--border);
}

/* Header: co-op green with the cream wordmark. */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.md-header .md-header__title {
  font-weight: 600;
}

/* Tabs and the search field pick up the wash. */
.md-tabs {
  background-color: var(--green-deep);
}
.md-search__input {
  background-color: rgba(255, 255, 255, 0.92);
}

/* Admonitions get the co-op's washes instead of stock greys. */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.6rem;
}
.md-typeset .admonition.tip,
.md-typeset .admonition.note {
  border-color: var(--green-mid);
}
.md-typeset .admonition.warning {
  border-color: var(--earth-red);
}

/* ---------- Typography: make Figtree actually apply ----------
 * Material renders body and headings with var(--md-text-font-family) and defines that
 * variable on <body>, so a :root definition loses to it by proximity in the DOM -- the
 * same way the colours lost to the palette. Declare the font on the elements themselves
 * as well, and size headings closer to the website rather than Material's defaults.
 */
body,
.md-typeset,
.md-nav,
.md-header,
.md-tabs {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__title {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

.md-typeset h1 {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* ink is a light-scheme colour; in dark mode let Material's own fg colour apply */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3 {
  color: var(--ink);
}

.md-typeset h2 {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.md-header__title {
  font-weight: 600;
}