From aaef1ee4f85fd0b2af6c53b523f7eac4ad0b43c4 Mon Sep 17 00:00:00 2001
From: Keith Solomon <ksolomon@gmail.com>
Date: Sun, 16 Aug 2026 13:24:04 -0500
Subject: [PATCH] feat(buttons): dark-surface button variants with WCAG-AA
 contrast

---
 styles/base/colors.css    |  1 +
 styles/blocks/buttons.css | 40 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/styles/base/colors.css b/styles/base/colors.css
index 6a5dbdc..abbfb7c 100644
--- a/styles/base/colors.css
+++ b/styles/base/colors.css
@@ -53,6 +53,7 @@
 
   --color-primary-fixed:        #dce1ff;
   --color-primary-fixed-dim:    #b6c4ff;
+  --color-on-primary:           #05297a;
   --color-on-primary-fixed:     #00164e;
   --color-on-primary-fixed-variant: #264191;
 
diff --git a/styles/blocks/buttons.css b/styles/blocks/buttons.css
index 09f4264..c48e360 100644
--- a/styles/blocks/buttons.css
+++ b/styles/blocks/buttons.css
@@ -174,3 +174,43 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
   opacity: 1;
   outline: 2px solid var(--color-info, #233a7a);
 }
+
+/* Dark-surface button variants (WCAG-AA against #100e0b) */
+.button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 600;
+	font-size: 1rem;
+	line-height: 1.1;
+	padding: 0.5rem 2rem;
+	border-radius: 0.5rem;
+	border: 3px solid transparent;
+	text-decoration: none;
+	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
+}
+
+.button:active { transform: scale(0.99); }
+@media (prefers-reduced-motion: reduce) { .button:active { transform: none; } }
+
+.button:focus-visible { outline: 2px solid var(--color-primary, #b6c4ff); outline-offset: 3px; }
+
+.button--primary {
+	background: var(--color-primary, #b6c4ff);
+	color: var(--color-on-primary, #05297a);
+	border-color: var(--color-primary, #b6c4ff);
+}
+.button--primary:hover { background: var(--color-primary-87, #dce1ff); border-color: var(--color-primary-87, #dce1ff); }
+
+.button--outline {
+	background: transparent;
+	color: var(--color-on-surface, #e3e1e9);
+	border-color: var(--color-outline, #8f909d);
+}
+.button--outline:hover { border-color: var(--color-primary, #b6c4ff); color: var(--color-primary, #b6c4ff); }
+
+.button--secondary {
+	background: var(--color-surface-container-high, #292a2f);
+	color: var(--color-on-surface, #e3e1e9);
+	border-color: var(--color-outline-variant, #444651);
+}