/* ===========================================================================
 * FermiHDI house style for the administrator manual.
 *
 * Every colour here comes from the FermiHDI branding standards:
 *
 *   Main       #1F3B6D  navy      #149BFF  blue
 *              #F7931E  orange    #FFDC48  yellow
 *   Text       on light  #1F3B6D body, #8497B0 muted
 *              on dark    #B3C7E6 body, #000000 reserved for artwork
 *
 * The standards give text colours for a dark background but not the dark
 * ground itself, so the two shades below are derived from the brand navy
 * (#1F3B6D) rather than invented: --fhdi-navy-deep is that navy darkened for
 * the page, --fhdi-navy is the navy itself, used for the surfaces that sit on
 * it. Nothing else is added to the palette.
 *
 * Typography is Nunito Sans throughout, in the three weights the standards
 * call for: SemiBold 600 titles, Light 300 body copy, ExtraLight 200 labels.
 * ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;1,300&display=swap");

:root {
  /* Brand */
  --fhdi-navy: #1f3b6d;
  --fhdi-blue: #149bff;
  --fhdi-orange: #f7931e;
  --fhdi-yellow: #ffdc48;

  /* Text */
  --fhdi-ink: #1f3b6d;        /* body on light */
  --fhdi-muted: #8497b0;      /* muted on light */
  --fhdi-on-dark: #b3c7e6;    /* body on dark */

  /* Grounds derived from the brand navy */
  --fhdi-navy-deep: #16294f;  /* page ground, dark scheme */
  --fhdi-navy-sunk: #112040;  /* code and inset panels, dark scheme */
  --fhdi-navy-line: #2c4a80;  /* rules and borders, dark scheme */

  --md-text-font: "Nunito Sans", system-ui, -apple-system, sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Typography ---------------------------------------------------------- */

.md-typeset {
  font-weight: 300;                 /* LIGHT BODY COPY */
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__topic,
.md-nav__title {
  font-family: var(--md-text-font);
  font-weight: 600;                 /* SEMI BOLD TITLES */
  letter-spacing: -0.01em;
}

/* EXTRA LIGHT LABELS — the small caps-ish furniture around the content. */
.md-nav__link,
.md-footer__title,
.md-typeset .admonition-title,
.md-typeset summary,
.md-typeset table:not([class]) th {
  font-weight: 200;
}

.md-typeset strong,
.md-typeset b {
  font-weight: 600;
}

/* ===========================================================================
 * Dark scheme — the manual's default.
 * ========================================================================= */

[data-md-color-scheme="fermihdi"] {
  --md-default-bg-color: var(--fhdi-navy-deep);
  --md-default-bg-color--light: #1b3260;
  --md-default-bg-color--lighter: var(--fhdi-navy);
  --md-default-bg-color--lightest: #26467e;

  --md-default-fg-color: #eaf1fb;
  --md-default-fg-color--light: var(--fhdi-on-dark);
  --md-default-fg-color--lighter: #8fa8cc;
  --md-default-fg-color--lightest: var(--fhdi-navy-line);

  --md-primary-fg-color: var(--fhdi-navy);
  --md-primary-fg-color--light: #26467e;
  --md-primary-fg-color--dark: #16294f;
  --md-primary-bg-color: #eaf1fb;
  --md-primary-bg-color--light: var(--fhdi-on-dark);

  --md-accent-fg-color: var(--fhdi-blue);
  --md-accent-fg-color--transparent: rgba(20, 155, 255, 0.12);
  --md-accent-bg-color: var(--fhdi-navy-deep);

  --md-typeset-color: var(--fhdi-on-dark);
  --md-typeset-a-color: var(--fhdi-blue);
  --md-typeset-mark-color: rgba(255, 220, 72, 0.32);
  --md-typeset-kbd-color: var(--fhdi-navy);
  --md-typeset-kbd-accent-color: var(--fhdi-navy-line);
  --md-typeset-table-color: var(--fhdi-navy-line);

  --md-footer-bg-color: #112040;
  --md-footer-bg-color--dark: #0d1935;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * Code on the dark scheme.
 *
 * Material ships its dark token colours under the scheme name "slate". This
 * manual's scheme is named "fermihdi", so none of them apply and any token
 * left unset falls back to Material's light defaults — dark text on a dark
 * block, which is unreadable. Every token Material defines is therefore given
 * a light value here explicitly. Do not delete one because it looks unused:
 * the fallback is the bug.
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="fermihdi"] {
  --md-code-bg-color: var(--fhdi-navy-sunk);
  --md-code-fg-color: #dfe9f7;

  --md-code-hl-color: rgba(20, 155, 255, 0.20);
  --md-code-hl-keyword-color: var(--fhdi-blue);
  --md-code-hl-function-color: #7fc4ff;
  --md-code-hl-operator-color: #9fb6d8;
  --md-code-hl-punctuation-color: #9fb6d8;
  --md-code-hl-name-color: #dfe9f7;
  --md-code-hl-variable-color: var(--fhdi-orange);
  --md-code-hl-constant-color: var(--fhdi-orange);
  --md-code-hl-number-color: var(--fhdi-orange);
  --md-code-hl-string-color: var(--fhdi-yellow);
  --md-code-hl-special-color: var(--fhdi-yellow);
  --md-code-hl-comment-color: #8fa8cc;
  --md-code-hl-generic-color: var(--fhdi-on-dark);
  --md-code-hl-deleted-color: #ff9c8a;
  --md-code-hl-inserted-color: #8fe3b0;
}

/* Inline code and the copy button sit on the same sunk ground. */
[data-md-color-scheme="fermihdi"] .md-typeset code,
[data-md-color-scheme="fermihdi"] .md-typeset pre > code {
  color: var(--md-code-fg-color);
  background-color: var(--md-code-bg-color);
}

/* Line numbers must not go dark either. */
[data-md-color-scheme="fermihdi"] .md-typeset .linenos,
[data-md-color-scheme="fermihdi"] .md-typeset .linenodiv pre {
  color: #7f97bd;
  background-color: var(--fhdi-navy-sunk);
}

[data-md-color-scheme="fermihdi"] .md-header,
[data-md-color-scheme="fermihdi"] .md-tabs {
  background: linear-gradient(135deg, #16294f 0%, #1f3b6d 55%, #16294f 100%);
  border-bottom: 1px solid var(--fhdi-navy-line);
  box-shadow: none;
}

[data-md-color-scheme="fermihdi"] .md-typeset table:not([class]) th {
  background: var(--fhdi-navy);
  color: #eaf1fb;
}

/* ===========================================================================
 * Light scheme — for daylight, and for anything printed.
 * ========================================================================= */

[data-md-color-scheme="fermihdi-light"] {
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: var(--fhdi-ink);
  --md-default-fg-color--light: var(--fhdi-muted);
  --md-default-fg-color--lighter: #a8b6c9;
  --md-default-fg-color--lightest: #d9e0ea;

  --md-primary-fg-color: var(--fhdi-navy);
  --md-primary-fg-color--light: #26467e;
  --md-primary-fg-color--dark: #16294f;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #e6edf7;

  --md-accent-fg-color: var(--fhdi-blue);
  --md-accent-fg-color--transparent: rgba(20, 155, 255, 0.10);

  --md-typeset-color: var(--fhdi-ink);
  --md-typeset-a-color: var(--fhdi-blue);
  --md-typeset-mark-color: rgba(255, 220, 72, 0.45);
  --md-typeset-table-color: #d9e0ea;

  --md-code-bg-color: #f2f5fa;
  --md-code-fg-color: #21365c;
  --md-code-hl-keyword-color: #0b63b8;
  --md-code-hl-function-color: #1f3b6d;
  --md-code-hl-operator-color: #5b6f8d;
  --md-code-hl-punctuation-color: #5b6f8d;
  --md-code-hl-name-color: #21365c;
  --md-code-hl-variable-color: #b5620a;
  --md-code-hl-constant-color: #b5620a;
  --md-code-hl-number-color: #b5620a;
  --md-code-hl-string-color: #1a7f4b;
  --md-code-hl-special-color: #1a7f4b;
  --md-code-hl-comment-color: var(--fhdi-muted);
  --md-code-hl-generic-color: var(--fhdi-ink);
  --md-code-hl-deleted-color: #b3261e;
  --md-code-hl-inserted-color: #1a7f4b;

  color-scheme: light;
}

[data-md-color-scheme="fermihdi-light"] .md-header,
[data-md-color-scheme="fermihdi-light"] .md-tabs {
  background: linear-gradient(135deg, #16294f 0%, #1f3b6d 55%, #16294f 100%);
}

/* The logo is a horizontal wordmark, not the square Material expects. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

/* ---------------------------------------------------------------------------
 * Diagrams. scripts/mermaid_diagrams.py draws these as PNGs on a white ground,
 * because one file has to serve the site and the PDF alike. On the dark scheme
 * that would be a bare white rectangle, so it is given a card to sit in.
 * ------------------------------------------------------------------------- */
.md-typeset img.mermaid-diagram {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.4em auto;
  padding: 0.9rem;
  background: #ffffff;
  border: 1px solid var(--fhdi-navy-line);
  border-radius: 0.5rem;
}

[data-md-color-scheme="fermihdi-light"] .md-typeset img.mermaid-diagram {
  border-color: #d9e0ea;
}

/* Accents that carry the brand rather than Material's defaults. */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.4rem;
  font-size: 0.75rem;
}

.md-typeset code {
  border-radius: 0.25rem;
}

/* Emphasis furniture in the brand's orange and yellow, which otherwise appear
 * nowhere in a text document. */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--fhdi-orange);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--fhdi-yellow);
}