/*
 * Blueprint: a style for the style picker.
 *
 * Every page links it, but its rules only apply while the picker in the
 * header says Blueprint: they all sit inside one :has() selector, nested.
 * On top of /style.css it changes the colour tokens, the fonts and a few
 * flourishes. Copy it, change it, make your own (ADR 2026-10-18-style-picker).
 * Text pairs still meet WCAG AAA 7:1.
 */
:root:has(#style [value="blueprint"]:checked) {
  /* White lines on drafting blue, always dark. */
  color-scheme: dark;
  --text-1: #ffffff;
  --text-2: #d6e6f7;
  --text-link: #ffe08a;
  --text-link-hover: #fff3c4;
  --surface-page: #123a66;
  --surface-card: #174677;
  --surface-sunken: #0e2f53;
  --surface-selected: #1d5287;
  --border-strong: #d6e6f7;
  --border-subtle: #4f7fb0;
  --focus-halo: #ffe08a;
  --focus-ring: #123a66;
  --badge-neutral-bg: #174677;
  --badge-neutral-border: #4f7fb0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-pill: 0;

  /* Graph paper: a fine grid every 24px and a heavier one every 120px. */
  & body {
    background-image:
      linear-gradient(rgb(255 255 255 / .12) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / .12) 1px, transparent 1px),
      linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  }

  /* Headings lettered like a title block. */
  & :is(h1, h2, h3, h4, .site-title) {
    font-family: var(--font-code);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  & main h1 {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--border-strong);
  }
  & main h2 { border-block-end: 1px dashed var(--border-subtle); padding-block-end: var(--space-1); }

  /* Text blocks sit on the paper, not on the grid. */
  & main :is(p, ul, ol, blockquote, table) { background: var(--surface-page); }
}