fix: add --on-accent var and fix button text color + CTA centering

Adds --on-accent semantic CSS variable (#f0f0f0 dark / #f0f4f8 light),
both passing WCAG AA against --accent in their respective modes.
Updates .btn-primary to use var(--on-accent) instead of hardcoded
#ffffff. Adds .cta-block override to win specificity over the base
a { color: var(--accent) } rule. Centers content inside .cta-block.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 19 insertions, 2 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 3dbf367..7088236 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -29,6 +29,8 @@
   --type-quote-text: #000000;
   --type-link-text: #000000;
   --type-photo-text: #000000;
+  /* Text on accent background — WCAG AA compliant */
+  --on-accent: #f0f0f0;
   /* Callout shortcode colors */
   --callout-note:    var(--accent);
   --callout-tip:     var(--accent2);
@@ -65,6 +67,8 @@ html.theme-light {
   --type-quote-text: #000000;
   --type-link-text: #000000;
   --type-photo-text: #ffffff;
+  /* Text on accent background — WCAG AA compliant */
+  --on-accent: #f0f4f8;
   /* Callout shortcode colors */
   --callout-danger:  #ef4444;
 }
@@ -95,6 +99,8 @@ html.theme-light {
     --type-quote-text: #000000;
     --type-link-text: #000000;
     --type-photo-text: #ffffff;
+    /* Text on accent background — WCAG AA compliant */
+    --on-accent: #f0f4f8;
     /* Callout shortcode colors */
     --callout-danger:  #ef4444;
   }
@@ -277,7 +283,7 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] {
   /* Button variants */
   .btn-primary {
     background-color: var(--accent);
-    color: #ffffff;
+    color: var(--on-accent);
   }
 
   .btn-primary:hover:not(:disabled) {
@@ -1857,7 +1863,7 @@ html.theme-light .callout-success { background: rgba(0, 143, 90, 0.06); }
   border-radius: 0.5rem;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   gap: 0.75rem;
   box-shadow: 0 0 20px var(--accent-glow);
 }
@@ -1867,6 +1873,17 @@ html.theme-light .callout-success { background: rgba(0, 143, 90, 0.06); }
   color: var(--text-dim);
   margin: 0;
   line-height: 1.6;
+  text-align: center;
+}
+
+/* Override base `a { color: var(--accent) }` — button needs on-accent text */
+.cta-block .btn-primary {
+  color: var(--on-accent);
+}
+
+.cta-block .btn-primary:hover {
+  color: var(--on-accent);
+  opacity: 1;
 }
 
 html.theme-light .cta-block {