extra.css

/* ============================================================
   PROTEUS — Thermocline theme for zensical / Material for MkDocs
   Drop-in: docs/stylesheets/extra.css
   ------------------------------------------------------------
   mkdocs.yml:
     theme:
       name: zensical            # or material
       palette:
         - media: "(prefers-color-scheme: dark)"
           scheme: slate         # dark-first
           toggle: { icon: material/brightness-7, name: Light mode }
         - media: "(prefers-color-scheme: light)"
           scheme: default
           toggle: { icon: material/brightness-4, name: Dark mode }
       font: false               # fonts loaded below
       logo: assets/glyph_phase_dark.png
       favicon: assets/favicon.svg
     extra_css:
       - stylesheets/extra.css
   Copy logo/glyph/glyph_phase_dark.png (+ _light) and
   logo/favicon/favicon.svg into docs/assets/,
   and from this repo's fonts/ folder copy fonts.css, OFL.txt, and the
   three family folders into docs/stylesheets/fonts/ (the import below
   loads them; no third-party font requests). Leave fonts/README.md
   behind so mkdocs does not render it as a page.
   ============================================================ */

@import url("fonts/fonts.css");

:root {
  /* brand */
  --pt-magma: #E23D28;
  --pt-mantle: #8E1F12;
  --pt-crimson: #C2362B;
  --pt-ocean: #1B6FA8;
  --pt-abyss: #14406B;
  --pt-azure: #4FA3D9;
  --pt-ice: #A8D4E8;
  --pt-void: #05070B;
  --pt-basalt: #0E131B;
  --pt-line-d: #1A2230;

  /* accents: sporadic highlight and extra data-series range. Solar is the
     bright tone for dark surfaces; the light block below swaps in the deep
     one, which is also available by name for a mark that must stay deep. */
  --pt-solar: #E0A32E;
  --pt-solar-deep: #C8860F;
  --pt-verdant: #57A05C;

  /* module domains: one hue per physical domain, identical in every artifact
     of the ecosystem, so a reader who learns the mapping on one page carries
     it to the next. A module takes the colour of the domain it acts on. */
  --pt-dom-interior: #E23D28;   /* SPIDER, Aragog, Zalmoxis */
  --pt-dom-outgassing: #A03123; /* CALLIOPE, Atmodeller */
  --pt-dom-tidal: #593E74;      /* LovePy, Obliqua */
  --pt-dom-chem: #1B6FA8;       /* VULCAN, ZEPHYRUS */
  --pt-dom-atmos: #4FA3D9;      /* AGNI, JANUS */
  --pt-dom-stellar: #E0A32E;    /* MORS; deepens on light, see the light block */
  --pt-dom-accretion: #A38F7A;  /* Morrigan */

  /* phase ramp, magma through void to ocean, for data running molten to
     frozen. Ordered, so an index maps to a position along the ramp. */
  --pt-p1: #E23D28;
  --pt-p2: #8E1F12;
  --pt-p3: #3A120C;
  --pt-p4: #05070B;
  --pt-p5: #0E2A45;
  --pt-p6: #14406B;
  --pt-p7: #1B6FA8;
  --pt-p8: #4FA3D9;
  --pt-p9: #A8D4E8;

  /* status, held apart from the domain hues so a red module and a failure
     never have to be told apart by colour alone */
  --pt-positive: #2E8B57;
  --pt-warning: #C77726;
  --pt-danger: #C2362B;
  --pt-info: #1B6FA8;

  --md-text-font: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --md-code-font: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- DARK (scheme: slate) — the primary mode ---------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--pt-void);
  --md-default-fg-color: #E9EEF2;
  --md-default-fg-color--light: #9FB0BE;
  --md-default-fg-color--lighter: #5A6B7A;
  --md-default-fg-color--lightest: #1A2230;

  --md-primary-fg-color: var(--pt-void);
  --md-primary-bg-color: #E9EEF2;
  --md-accent-fg-color: var(--pt-ice);

  --md-typeset-color: #C6D0D9;
  --md-typeset-a-color: var(--pt-azure);

  --md-code-bg-color: #04060A;
  --md-code-fg-color: #B8C6D2;
  --md-code-hl-keyword-color: var(--pt-magma);
  --md-code-hl-string-color: var(--pt-azure);
  --md-code-hl-number-color: var(--pt-ice);
  --md-code-hl-comment-color: #5A6B7A;
  --md-code-hl-function-color: var(--pt-ice);
  --md-code-hl-name-color: #C6D0D9;

  --md-admonition-bg-color: var(--pt-basalt);
  --md-footer-bg-color: var(--pt-basalt);
  --md-footer-bg-color--dark: var(--pt-void);
}

/* ---------- LIGHT (scheme: default) — the mirror ---------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #F2F5F7;
  --md-default-fg-color: #10151B;
  --md-default-fg-color--light: #3E4A55;
  --md-default-fg-color--lighter: #7A8894;
  --md-default-fg-color--lightest: #D2DAE1;

  --md-primary-fg-color: #10151B;   /* header bar stays ink on light */
  --md-primary-bg-color: #F2F5F7;
  --md-accent-fg-color: var(--pt-abyss);

  --md-typeset-color: #2A343D;
  --md-typeset-a-color: var(--pt-ocean);

  --md-code-bg-color: #E9EEF3;
  --md-code-fg-color: #22303B;
  --md-code-hl-keyword-color: var(--pt-crimson);
  --md-code-hl-string-color: var(--pt-abyss);
  --md-code-hl-number-color: var(--pt-ocean);
  --md-code-hl-comment-color: #7A8894;

  /* the one domain colour that differs by scheme: the bright tone reaches
     only 2.0:1 on Paper, and deepening lifts it to 2.8:1 */
  --pt-solar: #C8860F;
  --pt-dom-stellar: #C8860F;
}

/* ---------- typography ---------- */
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: "Sora", var(--md-text-font);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.md-typeset h1 { font-weight: 800; }
.md-header__topic, .md-header__title {
  font-family: "Sora", var(--md-text-font);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* tracked mono labels for nav sections */
.md-nav__title, .md-nav--secondary .md-nav__title {
  font-family: var(--md-code-font);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- structure: hairlines, active ticks ---------- */
.md-header { border-bottom: 1px solid var(--pt-line-d); }
[data-md-color-scheme="default"] .md-header { border-bottom-color: #D2DAE1; }

.md-nav__item .md-nav__link--active {
  color: var(--pt-azure);
  border-left: 2px solid var(--pt-magma);
  padding-left: 0.5rem;
  margin-left: -0.6rem;
  background: linear-gradient(90deg, rgba(226,61,40,0.06), transparent);
}
[data-md-color-scheme="default"] .md-nav__item .md-nav__link--active {
  color: var(--pt-ocean);
  border-left-color: var(--pt-crimson);
}

.md-typeset h2 { border-top: 1px solid var(--pt-line-d); padding-top: 0.8em; }
[data-md-color-scheme="default"] .md-typeset h2 { border-top-color: #D2DAE1; }

/* code blocks: magma spine */
.md-typeset pre > code { border-radius: 4px; }
.md-typeset pre { border-left: 3px solid var(--pt-magma); border-radius: 4px; }

/* tabs: active = magma underline */
.md-tabs__link--active { border-bottom: 2px solid var(--pt-magma); }

/* admonitions: flat, mono titles */
.md-typeset .admonition, .md-typeset details {
  border-width: 1px;
  border-radius: 4px;
  box-shadow: none;
}
.md-typeset .admonition-title, .md-typeset summary {
  font-family: var(--md-code-font);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.md-typeset .admonition.note, .md-typeset .admonition.info {
  border-color: rgba(27,111,168,0.4);
}
.md-typeset .admonition.warning, .md-typeset .admonition.danger {
  border-color: rgba(226,61,40,0.4);
}

/* tables */
.md-typeset table:not([class]) th {
  font-family: var(--md-code-font);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* footer phase band */
.md-footer-meta { position: relative; }
.md-footer-meta::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #E23D28, #8E1F12 25%, #05070B 50%, #14406B 75%, #4FA3D9 92%, #A8D4E8);
}

/* focus */
:focus-visible { outline: 2px solid var(--pt-magma); outline-offset: 2px; }