/* ============================================================
   HoEN Library — Wires Uncrossed skin for mkdocs-material.
   Pass 1 of the WU design adoption (see docs/planning/wip/wu-design-skin.md).
   Maps the prototype's brand onto Material's CSS custom properties; also
   exposes the HoEN level/spectrum tokens the follow-up components will reuse.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
  /* Brand palette (from the prototype styles.css) */
  --wu-charcoal: #333333;
  --wu-orange: #ee7c01;
  --wu-orange-700: #c66400;
  --wu-orange-200: #fde2c3;

  /* HoEN level spectrum — for pass-2 components (Matrix/Model/Radar) */
  --wu-level-1: #333333;
  --wu-level-2: #502470;
  --wu-level-3: #2282b1;
  --wu-level-4: #149286;
  --wu-level-5: #ee7c01;
  --wu-grad-spectrum: linear-gradient(90deg,
    #333333 0%, #502470 25%, #2282b1 50%, #149286 75%, #ee7c01 100%);

  /* Maturity rings (Adopt / Trial / Assess / Avoid) */
  --wu-ring-adopt: #149286;
  --wu-ring-trial: #2282b1;
  --wu-ring-assess: #ee7c01;
  --wu-ring-avoid: #c53030;

  --md-text-font: "Inter";
  --md-code-font: "JetBrains Mono";
}

/* ---------- Light scheme ---------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--wu-charcoal);
  --md-primary-fg-color--light: #4a4a4a;
  --md-primary-fg-color--dark: #1f1f1f;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: var(--wu-orange);
  --md-accent-fg-color--transparent: rgba(238, 124, 1, 0.1);

  --md-typeset-a-color: var(--wu-level-3);

  --md-default-fg-color: #0a0a0a;
  --md-default-fg-color--light: #71717a;
  --md-default-fg-color--lighter: #a1a1aa;
  --md-default-bg-color: #ffffff;
}

/* ---------- Dark scheme (slate), tuned to the prototype's dark tokens ---------- */
[data-md-color-scheme="slate"] {
  --md-hue: 240;
  --md-primary-fg-color: #161618;
  --md-primary-bg-color: #f4f4f5;

  --md-accent-fg-color: var(--wu-orange);

  --md-typeset-a-color: #4aa3c9;

  --md-default-bg-color: #0f0f11;
  --md-default-fg-color: #f4f4f5;
  --md-default-fg-color--light: #a1a1aa;
  --md-code-bg-color: #161618;
}

/* ---------- Headings: Plus Jakarta Sans display face ---------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-nav__title {
  font-family: "Plus Jakarta Sans", var(--md-text-font), system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.md-typeset h1 { font-weight: 800; }
.md-typeset h2,
.md-typeset h3 { font-weight: 700; }

/* ---------- Header: charcoal bar + spectrum rule beneath ---------- */
.md-header {
  border-bottom: 3px solid transparent;
  border-image: var(--wu-grad-spectrum) 1;
}
.md-tabs {
  background-color: var(--md-primary-fg-color);
}

/* Brand mark sizing in the header */
.md-header__button.md-logo img {
  height: 1.5rem;
  width: auto;
}

/* ---------- Search field accent on focus ---------- */
[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  box-shadow: 0 0 0 2px rgba(238, 124, 1, 0.5);
}

/* ---------- Inline code: WU purple, like the prototype ---------- */
.md-typeset code:not(.md-code__content) {
  color: var(--wu-level-2);
}
[data-md-color-scheme="slate"] .md-typeset code:not(.md-code__content) {
  color: #c9a3e6;
}

/* ---------- Selection ---------- */
::selection {
  background: var(--wu-orange-200);
  color: var(--wu-charcoal);
}

/* ---------- Active nav / TOC in brand level-3 blue ---------- */
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--wu-level-3);
}

/* ---------- Buttons / admonition titles pick up the accent automatically
   via --md-accent-fg-color; nothing further needed for pass 1. ---------- */