Derive --divider via color-mix; add explicit divider key as escape hatch

--divider in both light and dark modes now auto-derives from the theme's
background and text colours using color-mix(in srgb, bg 85%, text), so
accent-coloured or custom-background themes get a correct divider without
any extra config. An explicit `divider` key in theme.yml overrides this
for the rare cases where exact control is needed.

docs/claude-design.md and CLAUDE.md updated accordingly.

https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB

CLAUDE.md

@@ -233,6 +233,7 @@ Presentational config separate from `config.yml`. Controls accent colour, dark/l
 | `nav-link` | `--nav-link-colour` | falls back to `text` |
 | `nav-link-active` | `--nav-link-active-colour` | falls back to `accent` |
 | `nav-section-heading` | `--nav-section-heading-colour` | falls back to `text-muted` |
+| `divider` | `--divider` | `color-mix(in srgb, background 85%, text)` |
 
 **When to use nav-link keys:** When `nav-background` matches or is very close to `accent`, the default behaviour (active link coloured with `accent`) makes links invisible. Set `nav-link`, `nav-link-active`, and `nav-section-heading` explicitly so all three are legible against `nav-background`. Example: a red nav background needs white (`#FFFFFF`) for all three nav colour keys.
 

app/index.html

@@ -65,7 +65,7 @@ if ('serviceWorker' in navigator) {
   --font-colour-muted: #64748B;
   --code-bg: #F1F5F9;
   --code-font: #1E293B;
-  --divider: #CBD5E1;
+  --divider: color-mix(in srgb, var(--bg-main) 85%, var(--font-colour));
   --table-header-bg: rgba(var(--accent-rgb), 0.08);
   --table-border: #E2E8F0;
   --link-colour: #2563EB;
@@ -99,7 +99,7 @@ if ('serviceWorker' in navigator) {
   --font-colour-muted: #94A3B8;
   --code-bg: #1E293B;
   --code-font: #E2E8F0;
-  --divider: #334155;
+  --divider: color-mix(in srgb, var(--bg-main) 85%, var(--font-colour));
   --table-header-bg: rgba(96, 165, 250, 0.10);
   --table-border: #334155;
   --link-colour: #60A5FA;
@@ -1259,6 +1259,7 @@ body {
       if (m['nav-link'])            vars.push(`--nav-link-colour: ${m['nav-link']}`);
       if (m['nav-link-active'])     vars.push(`--nav-link-active-colour: ${m['nav-link-active']}`);
       if (m['nav-section-heading']) vars.push(`--nav-section-heading-colour: ${m['nav-section-heading']}`);
+      if (m['divider'])             vars.push(`--divider: ${m['divider']}`);
       if (vars.length) modeCss += `:root[data-theme="${mode}"] { ${vars.join('; ')}; }\n`;
     });
     if (modeCss) getOrCreateStyle('theme-overrides').textContent = modeCss;

app/theme.yml

@@ -15,6 +15,7 @@ light:
   # nav-link: "#1E293B"          # inactive nav link text (defaults to text)
   # nav-link-active: "#2563EB"   # active nav link text (defaults to accent)
   # nav-section-heading: "#64748B" # nav section label text (defaults to text-muted)
+  # divider: "#CBD5E1"           # border/hr colour (defaults to color-mix of background + text)
 
 dark:
   accent: "#60A5FA"
@@ -25,6 +26,7 @@ dark:
   # nav-link: "#E2E8F0"          # inactive nav link text (defaults to text)
   # nav-link-active: "#60A5FA"   # active nav link text (defaults to accent)
   # nav-section-heading: "#94A3B8" # nav section label text (defaults to text-muted)
+  # divider: "#334155"           # border/hr colour (defaults to color-mix of background + text)
 
 # ──────────────────────────────────
 # Semantic colours

docs/claude-design.md

@@ -24,6 +24,7 @@ light:
   nav-link: "#1E293B"         # inactive nav link text
   nav-link-active: "#2563EB"  # active (current page) nav link text
   nav-section-heading: "#64748B"  # nav section label text (uppercase, small)
+  # divider: "#CBD5E1"        # omit to auto-derive via color-mix(background, text)
 
 dark:
   accent: "#60A5FA"
@@ -34,6 +35,7 @@ dark:
   nav-link: "#E2E8F0"
   nav-link-active: "#60A5FA"
   nav-section-heading: "#94A3B8"
+  # divider: "#334155"        # omit to auto-derive via color-mix(background, text)
 
 # ──────────────────────────────────
 # Semantic colours
@@ -179,6 +181,7 @@ uses its own per-callout colour settings rather than the semantic variables.
 - [ ] All three nav link colours contrast against `nav-background` (WCAG AA minimum)
 - [ ] `colours-semantic-dark` provided with lighter variants of each colour
 - [ ] `callouts` `primary-colour` matches `colours-semantic` values for consistency
+- [ ] `divider` omitted unless the auto-derived value looks wrong (check hr and table borders)
 - [ ] Dark mode `background` is not pure `#000000` unless intentional (use `#0A0A0A`+)
 - [ ] `font-size` between `0.85` and `1.15`; `line-height` between `1.5` and `1.9`
 - [ ] Version comment on line 1: `# mdcms v0.4 | DO NOT REMOVE THIS COMMENT`