Website templates: readable event pink and pricing green (#170)

ddiff --git a/templates/spaces/site-event.html b/templates/spaces/site-event.html
iindex 7f738ae..5ffc4c3 100644
---- a/templates/spaces/site-event.html
++++ b/templates/spaces/site-event.html
@@@ -6,9 +6,9 @@
  <title>Night Market on Fifth · Saturday 14 November</title>
  <meta name="description" content="Forty stalls, live music and food from the neighbourhood, on Fifth Street from 5 to 11 pm.">
  <style>
--  /* Change the colours here: --accent is the date and the buttons, --glow the light behind the title. */
--  :root { --bg: #fff8ef; --card: #ffffff; --ink: #1e1530; --muted: #6e6280; --line: #ecdfd0; --accent: #d9468a; --on-accent: #fff; --glow: #ffd27a; }
--  @media (prefers-color-scheme: dark) { :root { --bg: #120d1d; --card: #1b1429; --ink: #f6eefe; --muted: #b0a2c4; --line: #2e2440; --accent: #ff7ab6; --on-accent: #1a0f20; --glow: #6b3fa0; } }
++  /* Change the colours here: --accent is the buttons and the fills, --accent-text the date and times, --glow the light behind the title. */
++  :root { --bg: #fff8ef; --card: #ffffff; --ink: #1e1530; --muted: #6e6280; --line: #ecdfd0; --accent: #d9468a; --accent-text: #b8326f; --on-accent: #fff; --glow: #ffd27a; }
++  @media (prefers-color-scheme: dark) { :root { --bg: #120d1d; --card: #1b1429; --ink: #f6eefe; --muted: #b0a2c4; --line: #2e2440; --accent: #ff7ab6; --accent-text: #ff7ab6; --on-accent: #1a0f20; --glow: #6b3fa0; } }
    * { box-sizing: border-box; }
    body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
    h1, h2 { line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.02em; }
@@@ -18,7 +18,7 @@
    .lights { display: flex; justify-content: center; gap: 18px; margin-bottom: 22px; }
    .lights i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
    .lights i:nth-child(2n) { background: #ffb547; box-shadow: 0 0 14px #ffb547; }
--  .date { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
++  .date { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
    .hero h1 { font-size: clamp(2.6rem, 8vw, 5.2rem); margin: 10px 0 14px; }
    .hero p { color: var(--muted); font-size: 1.15rem; margin: 0 auto 26px; max-width: 46ch; }
    .facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
@@@ -29,7 +29,7 @@
    h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 20px; }
    .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    .timeline li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
--  .timeline time { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
++  .timeline time { font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
    .timeline b { display: block; }
    .timeline span { color: var(--muted); font-size: .95rem; }
    .rsvp { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: grid; gap: 16px; }
ddiff --git a/templates/spaces/site-landing.html b/templates/spaces/site-landing.html
iindex 9a48928..2fdbe12 100644
---- a/templates/spaces/site-landing.html
++++ b/templates/spaces/site-landing.html
@@@ -7,7 +7,7 @@
  <meta name="description" content="Tally splits rent, trips and groceries fairly, settles up in one tap and never shows anyone an ad.">
  <style>
    /* Change the colours here: --accent is the buttons and highlights. */
--  :root { --bg: #ffffff; --soft: #f4f7f5; --card: #ffffff; --ink: #0d1f17; --muted: #5b6e65; --line: #e1e8e4; --accent: #0f8a5f; --on-accent: #fff; }
++  :root { --bg: #ffffff; --soft: #f4f7f5; --card: #ffffff; --ink: #0d1f17; --muted: #5b6e65; --line: #e1e8e4; --accent: #0b7550; --on-accent: #fff; }
    @media (prefers-color-scheme: dark) { :root { --bg: #08110d; --soft: #0d1914; --card: #10201a; --ink: #e6f3ec; --muted: #94ab9f; --line: #1d3128; --accent: #3ddc97; --on-accent: #062014; } }
    * { box-sizing: border-box; }
    body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
ddiff --git a/test/templates-contrast.test.js b/test/templates-contrast.test.js
nnew file mode 100644
iindex 0000000..6ebcc85
---- /dev/null
++++ b/test/templates-contrast.test.js
@@@ -0,0 +1,24 @@
++'use strict';
++/**
++ * The starter site templates keep their words readable (WCAG 2.1 AA). The event page's pink is a fill, so its date and
++ * times use a darker pink that reads 5.6:1 on white; the landing page's green is 4.35:1 both as a button fill and as
++ * text on white, so the light theme uses the darker green that reads 5.7:1 both ways.
++ */
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const read = (id) => fs.readFileSync(path.join(__dirname, '..', 'templates', 'spaces', `${id}.html`), 'utf8');
++
++const event = read('site-event');
++assert.match(event, /--accent-text:\s*#b8326f;/, 'the event page has the readable text pink on white');
++assert.match(event, /@media \(prefers-color-scheme: dark\)[^{]*\{[^}]*--accent-text:\s*#ff7ab6;/, 'and the brighter pink on the dark page');
++assert.match(event, /\.date \{[^}]*color: var\(--accent-text\)/, 'the date uses the text pink');
++assert.match(event, /\.timeline time \{[^}]*color: var\(--accent-text\)/, 'the event times use the text pink');
++assert.ok(!/\.(date|timeline time) \{[^}]*color: var\(--accent\)/.test(event), 'no text uses the fill pink');
++
++const landing = read('site-landing');
++assert.match(landing, /--accent:\s*#0b7550;/, 'the landing page uses the readable green');
++assert.ok(!landing.includes('#0f8a5f'), 'the 4.35:1 green is gone from the template');
++
++console.log('template colours: the event text pink and the landing green are readable');