@livenetworks/ashlar 2.0.7 → 2.0.8

package/theme/config/_palette.scss

@@ -1,274 +1,274 @@
-// ==========================================================================
-// Palette & Color Derivation Mixins — ln-ashlar
-// ==========================================================================
-// Value mixins + the derivation chain, plus two zero-specificity CSS blocks
-// at the bottom (brand, base defaults).
-// Defines theme values (light and dark) and the unified color derivation chain.
-// ==========================================================================
-
-@mixin ln-values-light {
-	// Secondary tint layers
-	--color-secondary-light:   160 84% 94%;
-	--color-secondary-lighter: 160 84% 97%;
-
-	// Status colors
-	--color-success:         142 76% 36%;
-	--color-success-light:   142 71% 94%;
-	--color-success-lighter: 142 71% 97%;
-
-	--color-error:           0 84% 48%;
-	--color-error-light:     0 84% 94%;
-	--color-error-lighter:   0 84% 97%;
-
-	--color-warning:         32 95% 38%;
-	--color-warning-light:   38 92% 94%;
-	--color-warning-lighter: 38 92% 97%;
-
-	--color-info:            200 95% 38%;
-	--color-info-light:      199 89% 94%;
-	--color-info-lighter:    199 89% 97%;
-
-	// Neutral scale (canonical greys)
-	--color-neutral-50:  210 20% 98%;
-	--color-neutral-100: 220 14% 96%;
-	--color-neutral-150: 220 13% 93%;
-	--color-neutral-175: 220 13% 91%;
-	--color-neutral-200: 220 13% 90%;
-	--color-neutral-300: 216 12% 84%;
-	--color-neutral-400: 218 11% 58%;
-	--color-neutral-500: 220 10% 40%;
-	--color-neutral-600: 215 14% 34%;
-	--color-neutral-700: 217 19% 27%;
-	--color-neutral-800: 215 28% 17%;
-	--color-neutral-900: 222 47% 11%;
-
-	// Base canvas background
-	--color-white: 0 0% 100%;
-
-	// Shadows — cool-tinted, dual-layer (ambient + key light)
-	--shadow-none: none;
-
-	--shadow-xs:
-		0 1px 2px 0 hsl(220 40% 10% / 0.05);
-
-	--shadow-sm:
-		0 1px 3px 0 hsl(220 40% 10% / 0.07),
-		0 1px 2px -1px hsl(220 40% 10% / 0.05);
-
-	--shadow-md:
-		0 4px 6px -1px hsl(220 40% 10% / 0.08),
-		0 2px 4px -2px hsl(220 40% 10% / 0.05);
-
-	--shadow-lg:
-		0 10px 15px -3px hsl(220 40% 10% / 0.08),
-		0 4px 6px -4px hsl(220 40% 10% / 0.04);
-
-	--shadow-xl:
-		0 20px 25px -5px hsl(220 40% 10% / 0.09),
-		0 8px 10px -6px hsl(220 40% 10% / 0.04);
-
-	--shadow-2xl:
-		0 25px 50px -12px hsl(220 40% 10% / 0.18);
-
-	--shadow-inner:
-		inset 0 2px 4px 0 hsl(220 40% 15% / 0.06);
-
-	// Surface highlight — subtle top-edge bevel/illumination for elevated surfaces
-	--surface-highlight: inset 0 1px 0 0 hsl(0 0% 100% / 0.6);
-
-	// Value vocabulary — what bg/fg/border/shadow values exist
-	--bg-base:     hsl(var(--color-white));
-	--bg-elevated: var(--bg-base);
-	--bg-sunken:   hsl(var(--color-neutral-100));
-	--bg-recessed: hsl(var(--color-neutral-50));
-
-	--bg-hover:  hsl(var(--color-neutral-100));
-	--bg-active: hsl(var(--color-neutral-150));
-
-	// Bound low on the ramp so every tier clears 7:1 against --bg-active,
-	// the lightest surface any of them lands on (8.02 / 11.52 / 14.11).
-	--fg-default: hsl(var(--color-neutral-900));
-	--fg-muted:   hsl(var(--color-neutral-800));
-	--fg-subtle:  hsl(var(--color-neutral-700));
-
-	--border-subtle:       hsl(var(--color-neutral-200));
-	--border-strong:       hsl(var(--color-neutral-300));
-
-	// Interactive boundaries only (input/select/checkbox). 1.4.11 wants 3:1
-	// for these; --border-subtle/-strong stay decorative and exempt.
-	--border-ui:           hsl(var(--color-neutral-400));
-
-	--color-scrim:  hsl(var(--color-neutral-900) / 0.5);
-
-	// Per-polarity, not derived in the chain: the chain re-evaluates at
-	// [data-mode], where neutral-900 inverts to near-white and the scrim would
-	// lighten the page instead of dimming it.
-	--app-scrim-bg: hsl(var(--color-neutral-900) / 0.4);
-}
-
-@mixin ln-values-dark {
-	// Neutral scale — inverted
-	--color-neutral-50:  220 20%  5%;
-	--color-neutral-100: 220 16%  7%;
-	--color-neutral-150: 220 14% 10%;
-	--color-neutral-175: 220 13% 12%;
-	--color-neutral-200: 220 13% 14%;
-	--color-neutral-300: 220 13% 36%;
-	--color-neutral-400: 218 11% 52%;
-	--color-neutral-500: 220 10% 68%;
-	--color-neutral-600: 220 11% 76%;
-	--color-neutral-700: 220 14% 84%;
-	--color-neutral-800: 220 20% 92%;
-	--color-neutral-900: 221 30% 97%;
-
-	// --color-white is deliberately not restated: :where(:root) still matches
-	// <html data-mode="dark"> and supplies it, and --color-accent-fg needs real
-	// white for text on a solid accent fill.
-
-	// Vocabulary — bg. Elevated is DARKER than sunken here; that inversion
-	// against light is intentional.
-	--bg-base:     hsl(var(--color-neutral-100));
-	--bg-elevated: hsl(var(--color-neutral-150));
-	--bg-sunken:   hsl(var(--color-neutral-175));
-	--bg-recessed: hsl(var(--color-neutral-50));
-	--bg-hover:    hsl(var(--color-neutral-175));
-	--bg-active:   hsl(var(--color-neutral-200));
-
-	// Vocabulary — fg
-	// Bound high on the ramp for the same reason as light: every tier clears
-	// 7:1 against --bg-active (8.68 / 10.74 / 14.78).
-	--fg-default: hsl(var(--color-neutral-900));
-	--fg-muted:   hsl(var(--color-neutral-700));
-	--fg-subtle:  hsl(var(--color-neutral-600));
-
-	--border-subtle:       hsl(var(--color-neutral-175));
-	--border-strong:       hsl(var(--color-neutral-300));
-
-	--border-ui:           hsl(var(--color-neutral-400));
-
-	// Scrims — anchored to black, not the ramp: dark --color-neutral-900 is
-	// near-white, so binding either to it would need an index flip.
-	--color-scrim:  hsl(0 0% 0% / 0.6);
-	--app-scrim-bg: hsl(0 0% 0% / 0.4);
-
-	// Status tint layers — re-tuned for dark surfaces
-	--color-success-light:   142 50% 18%;
-	--color-success-lighter: 142 40% 13%;
-	--color-warning-light:   32 55% 20%;
-	--color-warning-lighter: 32 45% 14%;
-	--color-info-light:      217 55% 22%;
-	--color-info-lighter:    217 45% 15%;
-	
-	--color-error:           0 84% 65%; // Lighter red for text contrast in dark mode
-	--color-error-light:     0 50% 20%;
-	--color-error-lighter:   0 40% 14%;
-
-	// Secondary tint layers — re-tuned for dark surfaces
-	--color-secondary-light:   160 55% 20%;
-	--color-secondary-lighter: 160 45% 14%;
-
-	// Shadows — solid black, boosted alpha, dual-layer
-	--shadow-xs:
-		0 1px 2px 0 hsl(0 0% 0% / 0.35);
-	--shadow-sm:
-		0 1px 3px 0 hsl(0 0% 0% / 0.40),
-		0 1px 2px -1px hsl(0 0% 0% / 0.25);
-	--shadow-md:
-		0 4px 6px -1px hsl(0 0% 0% / 0.45),
-		0 2px 4px -2px hsl(0 0% 0% / 0.30);
-	--shadow-lg:
-		0 10px 15px -3px hsl(0 0% 0% / 0.50),
-		0 4px 6px -4px hsl(0 0% 0% / 0.35);
-	--shadow-xl:
-		0 20px 25px -5px hsl(0 0% 0% / 0.60),
-		0 8px 10px -6px hsl(0 0% 0% / 0.40);
-	--shadow-2xl:
-		0 25px 50px -12px hsl(0 0% 0% / 0.70);
-	--shadow-inner:
-		inset 0 2px 4px 0 hsl(0 0% 0% / 0.32);
-
-	// Surface highlight — crisp top-edge bevel on dark elevated surfaces
-	--surface-highlight: inset 0 1px 0 0 hsl(0 0% 100% / 0.08);
-}
-
-@mixin ln-color-chain {
-	// brand → semantic
-	--color-primary:   var(--brand-primary);
-	--color-secondary: var(--brand-secondary);
-
-	// colour-aware shadows
-	--shadow-primary:  0 8px 24px -6px hsl(var(--color-primary) / 0.28);
-	--shadow-success:  0 8px 24px -6px hsl(var(--color-success) / 0.28);
-	--shadow-error:    0 8px 24px -6px hsl(var(--color-error)   / 0.28);
-}
-
-// ---------------------------------------------------------------------------
-// Brand — :where(:root) ONLY. Deliberately not in ln-values-light /
-// ln-values-dark and deliberately not joined to the four-axis block below.
-//
-// Brand is a literal with no polarity opinion. Declared inside the value
-// mixins it would be re-declared on every nested [data-mode] island, and a
-// declaration beats inheritance at any specificity — so a light card inside
-// <section data-theme="sunset" data-mode="dark"> would snap back to default
-// blue. :root-only means no island re-declares it; [data-theme] at (0,1,0)
-// rebinds it normally; a consumer's brand.css at (0,1,0) still wins at any
-// stylesheet load order, which is brand.css's whole guarantee.
-// ---------------------------------------------------------------------------
-:where(:root) {
-	--brand-primary:   221 83% 43%;
-	--brand-secondary: 160 84% 36%;
-}
-
-// ---------------------------------------------------------------------------
-// Base Defaults — Lazy-evaluated primitives and surfaces.
-// These live in :where(:root) (0,0,0) so they can be overridden by [data-skin] 
-// or [data-theme] (0,1,0) without being clobbered by nested [data-mode] islands.
-// ---------------------------------------------------------------------------
-:where(:root),
-:where([data-mode]),
-:where([data-theme]),
-:where([data-skin]) {
-	// shadow roles
-	--shadow-resting:  var(--shadow-sm);
-	--shadow-floating: var(--shadow-md);
-	--shadow-overlay:  var(--shadow-xl);
-
-	// primitives — what mixin bodies read
-	--color-bg:     var(--bg-base);
-	--color-fg:     var(--fg-default);
-	--color-border: var(--border-subtle);
-	--shadow:       var(--shadow-resting);
-	--radius:       var(--radius-md);
-
-	// accent — tints computed against the LOCAL --bg-base, so one
-	// formula serves both themes. The two override slots are
-	// undeclared by default; a client declares them to win.
-	--color-accent:    hsl(var(--color-primary));
-	--color-accent-fg: hsl(var(--color-white));
-
-	// Dark foreground pole for fills too light to carry white at AAA.
-	// A literal, never var(--color-neutral-900) — that inverts to near-white
-	// in dark mode, which is exactly where the ink islands live. Mirrors
-	// $_ln-contrast-ink in _contrast.scss; keep the two in step.
-	--color-ink: 222 47% 11%;
-
-	// Checkmark stroke is baked into the data URI, so it ships in both poles
-	// and --check-mark selects one. An ink island must repoint this or its
-	// checkmark stays white on a light fill, well under the 3:1 that 1.4.11
-	// asks of a meaningful graphic.
-	--check-mark-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
-	--check-mark-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1729' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
-	--check-mark: var(--check-mark-on-light);
-	--color-accent-tint: var(--brand-primary-tint,
-		color-mix(in srgb, hsl(var(--color-primary)) 8%, var(--bg-base)));
-	--color-accent-tint-strong: var(--brand-primary-tint-strong,
-		color-mix(in srgb, hsl(var(--color-primary)) 16%, var(--bg-base)));
-
-	// button surface (neutral default)
-	--btn-bg:           var(--color-bg);
-	--btn-fg:           var(--color-fg);
-	--btn-border:       var(--border-strong);
-	--btn-bg-hover:     var(--bg-hover);
-	--btn-fg-hover:     var(--color-fg);
-	--btn-border-hover: var(--border-strong);
-}
+// ==========================================================================
+// Palette & Color Derivation Mixins — ln-ashlar
+// ==========================================================================
+// Value mixins + the derivation chain, plus two zero-specificity CSS blocks
+// at the bottom (brand, base defaults).
+// Defines theme values (light and dark) and the unified color derivation chain.
+// ==========================================================================
+
+@mixin ln-values-light {
+	// Secondary tint layers
+	--color-secondary-light:   160 84% 94%;
+	--color-secondary-lighter: 160 84% 97%;
+
+	// Status colors
+	--color-success:         142 76% 36%;
+	--color-success-light:   142 71% 94%;
+	--color-success-lighter: 142 71% 97%;
+
+	--color-error:           0 84% 48%;
+	--color-error-light:     0 84% 94%;
+	--color-error-lighter:   0 84% 97%;
+
+	--color-warning:         32 95% 38%;
+	--color-warning-light:   38 92% 94%;
+	--color-warning-lighter: 38 92% 97%;
+
+	--color-info:            200 95% 38%;
+	--color-info-light:      199 89% 94%;
+	--color-info-lighter:    199 89% 97%;
+
+	// Neutral scale (canonical greys)
+	--color-neutral-50:  210 20% 98%;
+	--color-neutral-100: 220 14% 96%;
+	--color-neutral-150: 220 13% 93%;
+	--color-neutral-175: 220 13% 91%;
+	--color-neutral-200: 220 13% 90%;
+	--color-neutral-300: 216 12% 84%;
+	--color-neutral-400: 218 11% 58%;
+	--color-neutral-500: 220 10% 40%;
+	--color-neutral-600: 215 14% 34%;
+	--color-neutral-700: 217 19% 27%;
+	--color-neutral-800: 215 28% 17%;
+	--color-neutral-900: 222 47% 11%;
+
+	// Base canvas background
+	--color-white: 0 0% 100%;
+
+	// Shadows — cool-tinted, dual-layer (ambient + key light)
+	--shadow-none: none;
+
+	--shadow-xs:
+		0 1px 2px 0 hsl(220 40% 10% / 0.05);
+
+	--shadow-sm:
+		0 1px 3px 0 hsl(220 40% 10% / 0.07),
+		0 1px 2px -1px hsl(220 40% 10% / 0.05);
+
+	--shadow-md:
+		0 4px 6px -1px hsl(220 40% 10% / 0.08),
+		0 2px 4px -2px hsl(220 40% 10% / 0.05);
+
+	--shadow-lg:
+		0 10px 15px -3px hsl(220 40% 10% / 0.08),
+		0 4px 6px -4px hsl(220 40% 10% / 0.04);
+
+	--shadow-xl:
+		0 20px 25px -5px hsl(220 40% 10% / 0.09),
+		0 8px 10px -6px hsl(220 40% 10% / 0.04);
+
+	--shadow-2xl:
+		0 25px 50px -12px hsl(220 40% 10% / 0.18);
+
+	--shadow-inner:
+		inset 0 2px 4px 0 hsl(220 40% 15% / 0.06);
+
+	// Surface highlight — subtle top-edge bevel/illumination for elevated surfaces
+	--surface-highlight: inset 0 1px 0 0 hsl(0 0% 100% / 0.6);
+
+	// Value vocabulary — what bg/fg/border/shadow values exist
+	--bg-base:     hsl(var(--color-white));
+	--bg-elevated: var(--bg-base);
+	--bg-sunken:   hsl(var(--color-neutral-100));
+	--bg-recessed: hsl(var(--color-neutral-50));
+
+	--bg-hover:  hsl(var(--color-neutral-100));
+	--bg-active: hsl(var(--color-neutral-150));
+
+	// Bound low on the ramp so every tier clears 7:1 against --bg-active,
+	// the lightest surface any of them lands on (8.02 / 11.52 / 14.11).
+	--fg-default: hsl(var(--color-neutral-900));
+	--fg-muted:   hsl(var(--color-neutral-800));
+	--fg-subtle:  hsl(var(--color-neutral-700));
+
+	--border-subtle:       hsl(var(--color-neutral-200));
+	--border-strong:       hsl(var(--color-neutral-300));
+
+	// Interactive boundaries only (input/select/checkbox). 1.4.11 wants 3:1
+	// for these; --border-subtle/-strong stay decorative and exempt.
+	--border-ui:           hsl(var(--color-neutral-400));
+
+	--color-scrim:  hsl(var(--color-neutral-900) / 0.5);
+
+	// Per-polarity, not derived in the chain: the chain re-evaluates at
+	// [data-mode], where neutral-900 inverts to near-white and the scrim would
+	// lighten the page instead of dimming it.
+	--app-scrim-bg: hsl(var(--color-neutral-900) / 0.4);
+}
+
+@mixin ln-values-dark {
+	// Neutral scale — inverted
+	--color-neutral-50:  220 20%  5%;
+	--color-neutral-100: 220 16%  7%;
+	--color-neutral-150: 220 14% 10%;
+	--color-neutral-175: 220 13% 12%;
+	--color-neutral-200: 220 13% 14%;
+	--color-neutral-300: 220 13% 36%;
+	--color-neutral-400: 218 11% 52%;
+	--color-neutral-500: 220 10% 68%;
+	--color-neutral-600: 220 11% 76%;
+	--color-neutral-700: 220 14% 84%;
+	--color-neutral-800: 220 20% 92%;
+	--color-neutral-900: 221 30% 97%;
+
+	// --color-white is deliberately not restated: :where(:root) still matches
+	// <html data-mode="dark"> and supplies it, and --color-accent-fg needs real
+	// white for text on a solid accent fill.
+
+	// Vocabulary — bg. Elevated is DARKER than sunken here; that inversion
+	// against light is intentional.
+	--bg-base:     hsl(var(--color-neutral-100));
+	--bg-elevated: hsl(var(--color-neutral-150));
+	--bg-sunken:   hsl(var(--color-neutral-175));
+	--bg-recessed: hsl(var(--color-neutral-50));
+	--bg-hover:    hsl(var(--color-neutral-175));
+	--bg-active:   hsl(var(--color-neutral-200));
+
+	// Vocabulary — fg
+	// Bound high on the ramp for the same reason as light: every tier clears
+	// 7:1 against --bg-active (8.68 / 10.74 / 14.78).
+	--fg-default: hsl(var(--color-neutral-900));
+	--fg-muted:   hsl(var(--color-neutral-700));
+	--fg-subtle:  hsl(var(--color-neutral-600));
+
+	--border-subtle:       hsl(var(--color-neutral-175));
+	--border-strong:       hsl(var(--color-neutral-300));
+
+	--border-ui:           hsl(var(--color-neutral-400));
+
+	// Scrims — anchored to black, not the ramp: dark --color-neutral-900 is
+	// near-white, so binding either to it would need an index flip.
+	--color-scrim:  hsl(0 0% 0% / 0.6);
+	--app-scrim-bg: hsl(0 0% 0% / 0.4);
+
+	// Status tint layers — re-tuned for dark surfaces
+	--color-success-light:   142 50% 18%;
+	--color-success-lighter: 142 40% 13%;
+	--color-warning-light:   32 55% 20%;
+	--color-warning-lighter: 32 45% 14%;
+	--color-info-light:      217 55% 22%;
+	--color-info-lighter:    217 45% 15%;
+	
+	--color-error:           0 84% 65%; // Lighter red for text contrast in dark mode
+	--color-error-light:     0 50% 20%;
+	--color-error-lighter:   0 40% 14%;
+
+	// Secondary tint layers — re-tuned for dark surfaces
+	--color-secondary-light:   160 55% 20%;
+	--color-secondary-lighter: 160 45% 14%;
+
+	// Shadows — solid black, boosted alpha, dual-layer
+	--shadow-xs:
+		0 1px 2px 0 hsl(0 0% 0% / 0.35);
+	--shadow-sm:
+		0 1px 3px 0 hsl(0 0% 0% / 0.40),
+		0 1px 2px -1px hsl(0 0% 0% / 0.25);
+	--shadow-md:
+		0 4px 6px -1px hsl(0 0% 0% / 0.45),
+		0 2px 4px -2px hsl(0 0% 0% / 0.30);
+	--shadow-lg:
+		0 10px 15px -3px hsl(0 0% 0% / 0.50),
+		0 4px 6px -4px hsl(0 0% 0% / 0.35);
+	--shadow-xl:
+		0 20px 25px -5px hsl(0 0% 0% / 0.60),
+		0 8px 10px -6px hsl(0 0% 0% / 0.40);
+	--shadow-2xl:
+		0 25px 50px -12px hsl(0 0% 0% / 0.70);
+	--shadow-inner:
+		inset 0 2px 4px 0 hsl(0 0% 0% / 0.32);
+
+	// Surface highlight — crisp top-edge bevel on dark elevated surfaces
+	--surface-highlight: inset 0 1px 0 0 hsl(0 0% 100% / 0.08);
+}
+
+@mixin ln-color-chain {
+	// brand → semantic
+	--color-primary:   var(--brand-primary);
+	--color-secondary: var(--brand-secondary);
+
+	// colour-aware shadows
+	--shadow-primary:  0 8px 24px -6px hsl(var(--color-primary) / 0.28);
+	--shadow-success:  0 8px 24px -6px hsl(var(--color-success) / 0.28);
+	--shadow-error:    0 8px 24px -6px hsl(var(--color-error)   / 0.28);
+}
+
+// ---------------------------------------------------------------------------
+// Brand — :where(:root) ONLY. Deliberately not in ln-values-light /
+// ln-values-dark and deliberately not joined to the four-axis block below.
+//
+// Brand is a literal with no polarity opinion. Declared inside the value
+// mixins it would be re-declared on every nested [data-mode] island, and a
+// declaration beats inheritance at any specificity — so a light card inside
+// <section data-theme="sunset" data-mode="dark"> would snap back to default
+// blue. :root-only means no island re-declares it; [data-theme] at (0,1,0)
+// rebinds it normally; a consumer's brand.css at (0,1,0) still wins at any
+// stylesheet load order, which is brand.css's whole guarantee.
+// ---------------------------------------------------------------------------
+:where(:root) {
+	--brand-primary:   221 83% 43%;
+	--brand-secondary: 160 84% 36%;
+}
+
+// ---------------------------------------------------------------------------
+// Base Defaults — Lazy-evaluated primitives and surfaces.
+// These live in :where(:root) (0,0,0) so they can be overridden by [data-skin] 
+// or [data-theme] (0,1,0) without being clobbered by nested [data-mode] islands.
+// ---------------------------------------------------------------------------
+:where(:root),
+:where([data-mode]),
+:where([data-theme]),
+:where([data-skin]) {
+	// shadow roles
+	--shadow-resting:  var(--shadow-sm);
+	--shadow-floating: var(--shadow-md);
+	--shadow-overlay:  var(--shadow-xl);
+
+	// primitives — what mixin bodies read
+	--color-bg:     var(--bg-base);
+	--color-fg:     var(--fg-default);
+	--color-border: var(--border-subtle);
+	--shadow:       var(--shadow-resting);
+	--radius:       var(--radius-md);
+
+	// accent — tints computed against the LOCAL --bg-base, so one
+	// formula serves both themes. The two override slots are
+	// undeclared by default; a client declares them to win.
+	--color-accent:    hsl(var(--color-primary));
+	--color-accent-fg: hsl(var(--color-white));
+
+	// Dark foreground pole for fills too light to carry white at AAA.
+	// A literal, never var(--color-neutral-900) — that inverts to near-white
+	// in dark mode, which is exactly where the ink islands live. Mirrors
+	// $_ln-contrast-ink in _contrast.scss; keep the two in step.
+	--color-ink: 222 47% 11%;
+
+	// Checkmark stroke is baked into the data URI, so it ships in both poles
+	// and --check-mark selects one. An ink island must repoint this or its
+	// checkmark stays white on a light fill, well under the 3:1 that 1.4.11
+	// asks of a meaningful graphic.
+	--check-mark-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
+	--check-mark-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1729' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
+	--check-mark: var(--check-mark-on-light);
+	--color-accent-tint: var(--brand-primary-tint,
+		color-mix(in srgb, hsl(var(--color-primary)) 8%, var(--bg-base)));
+	--color-accent-tint-strong: var(--brand-primary-tint-strong,
+		color-mix(in srgb, hsl(var(--color-primary)) 16%, var(--bg-base)));
+
+	// button surface (neutral default)
+	--btn-bg:           var(--color-bg);
+	--btn-fg:           var(--color-fg);
+	--btn-border:       var(--border-strong);
+	--btn-bg-hover:     var(--bg-hover);
+	--btn-fg-hover:     var(--color-fg);
+	--btn-border-hover: var(--border-strong);
+}