Palettes: pastel-lavender/peach/cloud presets + semantic status colors (#16)

- Three new light [data-preset] blocks alongside midnight (default) and smooth
- --ok/--warn/--err semantic tokens with 4.5:1 contrast per preset
- .toast success/error variants wired in new.html
- ?theme= query param preview hook in layout head (screenshots only)
- Preview screenshots in docs/palette-previews/

Closes #16

web/static/app.css

@@ -7,10 +7,38 @@
   --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", monospace;
 }
+/* semantic status colors (dark preset values; light presets override below) */
+:root {
+  --ok: #9CD49C; --warn: #E8C77B; --err: #F2A3B3;
+  --on-accent: #241B30; /* text placed on accent-colored backgrounds */
+}
 [data-preset="smooth"] {
   --bg: #F6F5FA; --surface: #FFFFFF; --surface-2: #DAD7E6;
   --muted: #B5B1C9; --muted-fg: #7A7796; --fg: #2A2A36;
   --accent: #7A7796; --border: #DAD7E6;
+  --ok: #456F45; --warn: #7A5E1B; --err: #9E4054;
+  --on-accent: #F6F5FA;
+}
+[data-preset="pastel-lavender"] {
+  --bg: #e6e0f5; --surface: #f1edfa; --surface-2: #cbb8e7;
+  --muted: #a99cc9; --muted-fg: #5f5390; --fg: #3E3059;
+  --accent: #806bb8; --border: #c4b6e0;
+  --ok: #3E6B3E; --warn: #7A5E1B; --err: #9E4054;
+  --on-accent: #f1edfa;
+}
+[data-preset="pastel-peach"] {
+  --bg: #ffe0d6; --surface: #fff0ea; --surface-2: #ffc4a8;
+  --muted: #d9a08c; --muted-fg: #7a4632; --fg: #4F2318;
+  --accent: #f9826c; --border: #ffc9b5;
+  --ok: #3E6B3E; --warn: #7A5E1B; --err: #9E4054;
+  --on-accent: #4F2318;
+}
+[data-preset="pastel-cloud"] {
+  --bg: #fff0f6; --surface: #fff7fb; --surface-2: #ffc8dd;
+  --muted: #d9b9c9; --muted-fg: #7d5670; --fg: #4A3355;
+  --accent: #a2d2ff; --border: #ffccd9;
+  --ok: #3E6B3E; --warn: #7A5E1B; --err: #9E4054;
+  --on-accent: #274a6b;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -243,6 +271,9 @@ td a.slug:hover { color: var(--accent); }
   box-shadow: 0 4px 16px rgba(0,0,0,.25);
 }
 .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+/* status variants (#16) */
+.toast.success { border-color: var(--ok); color: var(--ok); }
+.toast.error { border-color: var(--err); color: var(--err); }
 
 /* protection section rhythm (#20) */
 .protect { display: flex; flex-direction: column; gap: 2px; }