/* Design tokens — copied verbatim from Kyle's peak_checklist app (dist/index.html),
   so the research site and the checklist read as one product.

   THE RULE THAT TRAVELS WITH THEM: --climbed green is SEMANTIC. It means "climbed",
   never decoration. Material's default palette used green as the *brand* colour on
   every heading and link, which is exactly what made it meaningless here. The
   accent below is the warm --accent; green is reserved. */

:root,
[data-md-color-scheme="default"] {
  --bg: #fafaf7;
  --fg: #1c1c1e;
  --muted: #6b6b70;
  --line: #e4e4e0;
  --accent: #b85c00;
  --accent-soft: #fef3e8;
  --climbed: #2d7a3f;
  --climbed-soft: #e8f4eb;
  --pending: #c8c8c8;
  --card: #fff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-md-color-scheme="slate"] {
  --bg: #1c1c1e;
  --fg: #f0f0f0;
  --muted: #999;
  --line: #2c2c2e;
  --accent: #ff8a3d;
  --accent-soft: #3a2a1a;
  --climbed: #52b06a;
  --climbed-soft: #1f2e23;
  --pending: #555;
  --card: #26262a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── map the tokens onto Material, so report pages inherit the language ──────
   Layout is untouched; this is colour + type only. */
:root {
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  --md-code-font: ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--bg);
  --md-default-fg-color: var(--fg);

  /* The header: a light card with dark text, not a saturated brand bar. */
  --md-primary-fg-color: var(--card);
  --md-primary-fg-color--light: var(--card);
  --md-primary-fg-color--dark: var(--card);
  --md-primary-bg-color: var(--fg);
  --md-primary-bg-color--light: var(--muted);

  --md-accent-fg-color: var(--accent);
  --md-accent-fg-color--transparent: var(--accent-soft);
  --md-typeset-a-color: var(--accent);
}

/* Material draws the header with no border once it is card-coloured, so the page
   loses its top edge; give it back. */
.md-header {
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
