:root {
  /* Ground */
  --canvas: #0B0B0D;
  --anchor: #101826;              /* deep slate-indigo; gradient far end */
  --canvas-gradient: radial-gradient(120% 80% at 50% 0%, #101826 0%, #0B0B0D 60%);

  /* Glass */
  --panel-fill: rgba(255, 255, 255, 0.055);
  --panel-fill-raised: rgba(255, 255, 255, 0.085);
  --panel-border: rgba(255, 255, 255, 0.14);
  --panel-border-bright: rgba(255, 255, 255, 0.24);
  --panel-blur: 14px;
  --panel-lift: 0 8px 28px rgba(0, 0, 0, 0.55);
  --panel-lift-high: 0 18px 52px rgba(0, 0, 0, 0.68);
  --recess-fill: rgba(0, 0, 0, 0.32);

  /* Text */
  --text-primary: #EDEDEF;
  --text-secondary: #B9BCC4;      /* deliberately above the mid-grey failure band */
  --text-on-accent: #0B0B0D;      /* all eight accents are light; near-black wins */

  /* Accents — mirrored from site.toml. build.py regenerates the block below;
     do not hand-edit the values, edit site.toml. */
  /* BEGIN accent block */
  --accent-environment-and-climate-change: #3DDC97;
  --accent-evolution: #FF7AB6;
  --accent-historical-geology: #FF9442;
  --accent-history-of-science: #B98CFF;
  --accent-human-evolution-and-anthropology: #FFDE00;
  --accent-palaeontology: #4DD9E8;
  --accent-philosophy-of-science: #7FA0FF;
  --accent-zoology: #FF5C5C;
  /* END accent block */

  /* Per-page region colour. Templates set --accent on <body>; every component
     reads --accent, never a category-specific variable. */
  --accent: var(--accent-palaeontology);

  /* Type */
  --font-ui: Tahoma, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  --size-body: 1.125rem;          /* 18px */
  --leading-body: 1.72;
  --measure: 66ch;

  /* Form */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border: 1px;
  --space: 8px;

  /* Layout — one content width for the whole site, so the header, the
     listings, and the article measure all share the same left and right
     edges. --gutter is the minimum black margin either side of it. */
  --wrap: 74rem;
  --gutter: clamp(16px, 4vw, 40px);

  /* Motion */
  --motion-hover: 180ms;
  --motion-base: 320ms;
  --motion-celebrate: 900ms;
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-entrance: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-hover: 0ms;
    --motion-base: 0ms;
    --motion-celebrate: 0ms;
  }
}