/* Varagity brand layer for Material.
 *
 * Mirrors the web GUI's design tokens (web/app/globals.css + layout.tsx):
 * one accent pair — hue 278 / chroma 0.14, "refined indigo" — drives every
 * colored token, Geist carries body text (theme.font), and Instrument Serif
 * is the editorial display face for headings. Hex values below are the
 * oklch() tokens converted to sRGB (Material's palette vars predate oklch).
 *
 * The palette entries in mkdocs.yml declare `primary: custom` /
 * `accent: custom`, which defers all color values to this file.
 */

/* ---- Light scheme ------------------------------------------------------ */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #5156af;        /* oklch(0.495 0.14 278) = web --primary */
  --md-primary-fg-color--light: #747bd9; /* oklch(0.62  0.14 278) */
  --md-primary-fg-color--dark: #3e3f97;  /* oklch(0.42  0.14 278) */
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: #6b71e3;         /* oklch(0.60 0.17 278) — hover/focus */
  --md-accent-fg-color--transparent: rgba(107, 113, 227, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* ---- Dark scheme ------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  /* Slate derives every surface from this hue — same tinted-dark trick the
   * web GUI plays with its oklch(l c var(--accent-hue)) backgrounds. */
  --md-hue: 278;

  /* Dark tinted header (≈ web --card dark) instead of a saturated banner;
   * the indigo moves into links and interactive accents where it reads. */
  --md-primary-fg-color: #15161f;        /* oklch(0.205 0.018 278) */
  --md-primary-fg-color--light: #2a2c3d; /* oklch(0.30  0.03  278) */
  --md-primary-fg-color--dark: #101018;
  --md-primary-bg-color: #eceefc;
  --md-primary-bg-color--light: rgba(236, 238, 252, 0.7);

  --md-accent-fg-color: #969fff;         /* oklch(0.74 0.15 278) */
  --md-accent-fg-color--transparent: rgba(150, 159, 255, 0.1);
  --md-accent-bg-color: #15161f;
  --md-accent-bg-color--light: rgba(21, 22, 31, 0.7);

  --md-typeset-a-color: #8c95ee;         /* oklch(0.70 0.13 278) */
}

/* Text selection matches the web GUI's --selection token. */
::selection {
  background: rgba(107, 113, 227, 0.25);
}

/* ---- Editorial display headings ---------------------------------------- */

/* Instrument Serif is the web GUI's wordmark/panel-heading face: display
 * weights only, so it stays on h1/h2 and the header wordmark — h3 and below
 * remain Geist, and code spans inside headings keep Geist Mono. */
.md-header__topic,
.md-typeset h1,
.md-typeset h2 {
  font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
}

.md-header__topic {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.md-typeset h1 {
  color: var(--md-default-fg-color); /* full contrast, not the muted default */
  font-size: 2.6em;
  line-height: 1.15;
}

.md-typeset h2 {
  font-size: 1.9em;
  line-height: 1.2;
}

/* ---- Landing-page cards ------------------------------------------------ */

.md-typeset .grid.cards > ul > li {
  border-radius: 0.55rem;
  transition: border-color 125ms, box-shadow 125ms, transform 125ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0.45rem 1.1rem -0.4rem rgba(81, 86, 175, 0.5);
  transform: translateY(-0.12rem);
}

/* Card icons take the brand color (link color in slate, where the primary
 * variable is the dark header surface). */
.md-typeset .grid.cards .twemoji.lg {
  color: var(--md-primary-fg-color);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards .twemoji.lg {
  color: var(--md-typeset-a-color);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li {
    transition: none;
  }

  .md-typeset .grid.cards > ul > li:hover {
    transform: none;
  }
}

/* ---- /quiz — the architecture practice page --------------------------- */

/* Deliberately unlisted (mkdocs.yml `not_in_nav`). Each question's solution
 * is a pymdownx.details block (`??? question "Reveal solution"`), restyled
 * from Material's collapsible-admonition look into a pill button: closed,
 * only the button shows; open, the solution sits in a tinted card beneath
 * it. The tokens are the only per-scheme values — the primary indigo reads
 * on the light page, while slate's primary is the dark header surface, so
 * the button there takes the accent indigo with dark text. */

.md-typeset .quiz {
  --quiz-button-bg: var(--md-primary-fg-color);
  --quiz-button-bg-hover: var(--md-primary-fg-color--dark);
  --quiz-button-fg: #ffffff;
}

[data-md-color-scheme="slate"] .md-typeset .quiz {
  --quiz-button-bg: var(--md-accent-fg-color);
  --quiz-button-bg-hover: #adb4ff;          /* oklch(0.80 0.12 278) */
  --quiz-button-fg: #101018;
}

.md-typeset .quiz details.question {
  margin: 0.8em 0 2.4em;
  padding: 0;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  box-shadow: none;
}

.md-typeset .quiz details.question[open] {
  padding: 0.8rem 1rem 0.2rem;
  background: var(--md-code-bg-color);
}

.md-typeset .quiz details.question > summary {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0.45em 2.4em 0.45em 2.3em;
  border: 0;
  border-radius: 2rem;
  background: var(--quiz-button-bg);
  color: var(--quiz-button-fg);
  font-weight: 600;
  transition: background-color 125ms, box-shadow 125ms, transform 125ms;
}

.md-typeset .quiz details.question > summary:hover,
.md-typeset .quiz details.question > summary:focus-visible {
  background: var(--quiz-button-bg-hover);
  box-shadow: 0 0.35rem 0.9rem -0.4rem rgba(81, 86, 175, 0.6);
  transform: translateY(-0.06rem);
}

/* Material positions the type icon (::before) and the chevron (::after)
 * absolutely inside the summary; re-centre them for the pill's padding and
 * paint both in the button's text colour (the icon is a mask). */
.md-typeset .quiz details.question > summary::before,
.md-typeset .quiz details.question > summary::after {
  top: 50%;
  margin-top: -0.5rem;
  background-color: currentColor;
}

.md-typeset .quiz details.question > summary::before {
  left: 0.8em;
}

.md-typeset .quiz details.question > summary::after {
  right: 0.8em;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .quiz details.question > summary {
    transition: none;
  }

  .md-typeset .quiz details.question > summary:hover,
  .md-typeset .quiz details.question > summary:focus-visible {
    transform: none;
  }
}

/* ---- /map — the embedded codebase map (ADR-018) ------------------------- */

/* The frame is the map's own page (assets/map/index.html — a Vite build of
 * the web GUI's /map view, committed); it follows this site's palette by
 * reading <body data-md-color-scheme> through the same-origin parent, so
 * there is nothing to pass in. Sized to the viewport minus the header and
 * the intro, never shorter than a usable canvas; the backgrounds match so
 * the frame has nothing to flash while it loads. */

.md-typeset .codebase-map {
  margin: 1.2em 0 0.8em;
  overflow: hidden;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.55rem;
  background: var(--md-default-bg-color);
}

.md-typeset .codebase-map iframe {
  display: block;
  width: 100%;
  height: clamp(30rem, calc(100vh - 13rem), 56rem);
  border: 0;
  background: var(--md-default-bg-color);
}