/*
 * The theme in the app's colours and faces.
 *
 * The site is read beside the app — a node's reference opens from the
 * inspector — so it follows the product surface, not the marketing one:
 * Inter throughout, the brand orange for links and focus, the app's dark
 * surfaces. Every
 * value is a token from brand/tokens/generated/tokens.css, staged beside this
 * file by generate.py; no hex is written twice. Material reads its palette
 * from the --md-* variables below, so the site follows the brand when the
 * tokens move, without this file changing.
 *
 * The selector carries the palette attributes because the theme's own rules
 * do: with `primary: custom` in mkdocs.yml the theme sets no colour of its
 * own, and this rule outranks the scheme's defaults.
 */

:root,
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  /* Surfaces and text */
  --md-default-bg-color: hsl(var(--background));
  --md-default-bg-color--light: hsl(var(--bg-secondary));
  --md-default-bg-color--lighter: hsl(var(--bg-tertiary));
  --md-default-bg-color--lightest: hsl(var(--bg-hover));
  --md-default-fg-color: hsl(var(--foreground));
  --md-default-fg-color--light: hsl(var(--text-secondary));
  --md-default-fg-color--lighter: hsl(var(--text-tertiary));
  --md-default-fg-color--lightest: hsl(var(--border-default));

  /* The header and the footer are the elevated surface, not an accent bar */
  --md-primary-fg-color: hsl(var(--bg-secondary));
  --md-primary-fg-color--light: hsl(var(--bg-tertiary));
  --md-primary-fg-color--dark: hsl(var(--background));
  --md-primary-bg-color: hsl(var(--foreground));
  --md-primary-bg-color--light: hsl(var(--text-secondary));
  --md-footer-bg-color: hsl(var(--bg-secondary));
  --md-footer-bg-color--dark: hsl(var(--background));
  --md-footer-fg-color: hsl(var(--foreground));
  --md-footer-fg-color--light: hsl(var(--text-secondary));
  --md-footer-fg-color--lighter: hsl(var(--text-tertiary));

  /* The brand orange is for links, focus and the active nav item */
  --md-accent-fg-color: hsl(var(--accent-hover));
  --md-accent-fg-color--transparent: hsl(var(--primary) / 0.12);
  --md-typeset-a-color: hsl(var(--primary));
  --md-typeset-mark-color: hsl(var(--primary) / 0.25);

  /* Code */
  --md-code-bg-color: hsl(var(--bg-tertiary));
  --md-code-fg-color: hsl(var(--foreground));
  --md-code-hl-color: hsl(var(--primary) / 0.2);

  /* Tables, rules and admonitions */
  --md-typeset-table-color: hsl(var(--border-default));
  --md-typeset-table-color--light: hsl(var(--border-subtle));
  --md-admonition-bg-color: hsl(var(--bg-secondary));
  --md-admonition-fg-color: hsl(var(--foreground));

  /* Faces */
  --md-text-font: var(--font-sans);
  --md-code-font: var(--font-mono);

  /* Wiring diagrams: a node is a card, an edge is a rule, one style for all */
  --md-mermaid-font-family: var(--font-sans);
  --md-mermaid-node-bg-color: hsl(var(--bg-tertiary));
  --md-mermaid-node-fg-color: hsl(var(--border-default));
  --md-mermaid-label-bg-color: hsl(var(--background));
  --md-mermaid-label-fg-color: hsl(var(--foreground));
  --md-mermaid-edge-color: hsl(var(--text-secondary));
}

/* Headings stay on the sans, as in the app; weight carries the hierarchy */
.md-typeset h1 {
  color: hsl(var(--foreground));
  font-weight: 700;
}

.md-typeset h2 {
  font-weight: 600;
}

.md-typeset h3 {
  font-weight: 500;
}

/* A thin rule under the header rather than a shadow, like the app's chrome */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid hsl(var(--border-subtle));
}

/* A wide table scrolls in its own box and never widens the prose beside it */
.md-typeset__scrollwrap {
  border-radius: var(--br-md);
}

.md-typeset table:not([class]) {
  font-size: 0.8rem;
}

.md-typeset table:not([class]) th {
  color: hsl(var(--text-secondary));
  font-weight: 600;
}

/* Inline code reads in the brand orange, as it does in the app's node reference */
.md-typeset code {
  color: hsl(var(--primary));
}

.md-typeset pre code {
  color: hsl(var(--foreground));
}