@livenetworks/ashlar 1.6.1 → 2.0.0

package/theme/config/_palette.scss

@@ -0,0 +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);
+}

package/theme/config/_theme.scss

@@ -0,0 +1,293 @@
+@use 'palette' as *;
+
+// ==========================================================================
+// Theme — ln-ashlar
+// ==========================================================================
+// Three orthogonal activation axes:
+//   data-skin   — structure/physics (radius, shadow, button chrome, nav/menu
+//                 rebinds). Polarity-agnostic.
+//   data-mode   — polarity only (bg/fg base values + native color-scheme).
+//   data-theme  — brand palette only (color values).
+//
+// Activation paths:
+//   <html data-mode="dark">                 ← explicit dark polarity
+//   <element data-mode="dark">              ← scoped dark polarity island
+//   @media (prefers-color-scheme: dark)     ← system preference (auto)
+//   :root:not([data-mode="light"])          ← opt-out of auto
+//   <html data-skin="glass">                ← structural preset (flat, borderless)
+//   <html data-theme="ocean">               ← brand palette preset
+//
+// See docs-mcp/css/theming.md for the full guide.
+// ==========================================================================
+
+// ---------------------------------------------------------------------------
+// Activation — ashlar values at zero specificity, derivations at every scope
+// ---------------------------------------------------------------------------
+
+// Ashlar values — zero specificity, a client file always outranks them
+:where(:root),
+:where([data-mode="light"]) {
+	@include ln-values-light;
+	color-scheme: light;
+}
+
+:where([data-mode="dark"]) {
+	@include ln-values-dark;
+	color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+	:where(:root:not([data-mode="light"])) {
+		@include ln-values-dark;
+		color-scheme: dark;
+	}
+}
+
+// Derivations — library-owned, normal specificity, every colour-bearing scope.
+// data-skin is deliberately absent: it declares no colour values, so the chain
+// there could only reproduce the inherited result — while clobbering the
+// preset --btn-* / tint overrides of any ancestor theme.
+:root,
+[data-theme],
+[data-mode] {
+	@include ln-color-chain;
+}
+
+:where([data-mode]) {
+	color: var(--color-fg);
+}
+
+:where([data-mode]:not(html):not(body)) {
+	background-color: var(--color-bg);
+}
+
+// ---------------------------------------------------------------------------
+// Named presets — demo theme picker. Brand palette only. Activation:
+//   <html data-theme="ocean">   <html data-theme="sunset">   etc.
+// ---------------------------------------------------------------------------
+
+// Lightness is solved, not authored: each fill sits at the AAA (7:1) limit
+// for its hue against whichever foreground pole is nearer. Dark lifts cross
+// the white/ink boundary, so they pair themselves — see --color-ink.
+[data-theme="ocean"] {
+	--brand-primary: 190 80% 24%;   // 7.40 on white
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 190 80% 46%;   // 7.24 on ink
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+[data-theme="sunset"] {
+	--brand-primary: 10 80% 36%;   // 7.10 on white
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 10 80% 69%;   // 7.09 on ink
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+[data-theme="midnight"] {
+	// Pure palette — no polarity opinion, but both lightnesses are now solved,
+	// so the unpaired light case reads at AAA instead of being "accepted".
+	--brand-primary: 265 70% 50%;   // 7.05 on white
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 265 70% 75%;   // 7.15 on ink
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+[data-theme="glass"] {
+	// Electric blue accent — luminescent on dark navy glass
+	// No &[data-mode="dark"] lift block (unlike ocean/sunset/midnight): glass
+	// was authored dark-first, so it solves straight to the ink pole in both
+	// polarities — a lift here would blow out on dark.
+	--brand-primary: 218 95% 71%;   // 7.04 on ink
+	--check-mark: var(--check-mark-on-dark);
+	--color-accent-fg: hsl(var(--color-ink));
+
+	// Active-nav wash — Glass computes a stronger 24% tint mix against
+	// local --bg-base for contrast on the deep dark surface.
+	// Side-effect: dropdown active items + upload drop-zone also pick up the
+	// slightly darker tint — improvement, not regression.
+	--color-accent-tint: color-mix(in srgb, hsl(var(--color-primary)) 24%, var(--bg-base));
+}
+
+[data-theme="aurora"] {
+	--brand-primary: 158 80% 30%;
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 158 80% 55%;
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+[data-theme="violet"] {
+	--brand-primary: 255 75% 48%;
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 255 85% 72%;
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+[data-theme="cyber"] {
+	--brand-primary: 198 95% 38%;
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 198 95% 58%;
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Named skins — structural/physics presets. Polarity-agnostic. Activation:
+//   <html data-skin="glass">
+// ---------------------------------------------------------------------------
+
+[data-skin="glass"] {
+	// Flat — zero radius everywhere
+	--radius-xs: 0;
+	--radius-sm: 0;
+	--radius-md: 0;
+	--radius-lg: 0;
+	--radius-xl: 0;
+	--radius-2xl: 0;
+	--radius-full: 0;
+
+	// Flat — no elevation shadows. --shadow-inner kept for recessed
+	// surfaces (code blocks, progress tracks) which read it as a depth
+	// affordance rather than elevation.
+	--shadow-xs: none;
+	--shadow-sm: none;
+	--shadow-md: none;
+	--shadow-lg: none;
+	--shadow-xl: none;
+	--shadow-2xl: none;
+
+	// ── Buttons — neutral chrome via --btn-* rebind, accent variant via
+	// cross-cutting --color-accent-bg-* companion tokens. Skin rebinds
+	// at :root only; library owns structure. (See docs/architecture/reference.md ## Theme Architecture for exact mechanics)
+	--btn-bg: var(--bg-elevated);
+	--btn-bg-hover: var(--bg-hover);
+	--btn-border: var(--color-accent);
+	// --color-accent-hover is declared only below <html> (a, mixin bodies);
+	// invalid at computed-value time here — derive locally. l - 6 matches
+	// @mixin btn's own accent-hover so neutral and accent buttons agree.
+	--btn-border-hover: hsl(from var(--color-accent) h s calc(l - 6));
+
+	// ── Accent buttons — translucent fill via consumer-scope rebind
+	// Rebind --btn-* on the button itself (not at skin :root) so
+	// var(--color-primary) inside the values resolves on the button's
+	// cascade — letting .success / .error / .warning / .info status
+	// overrides reach the fill and text color. Token-only rebinds; no
+	// background/color/border-color declarations, no &:hover blocks
+	// (button-base already handles state via --btn-*-hover).
+	button[type="submit"],
+	.btn {
+		--btn-bg: hsl(var(--color-primary) / 0.2);
+		--btn-fg: hsl(var(--color-primary));
+		--btn-bg-hover: hsl(var(--color-primary) / 0.3);
+		--btn-fg-hover: hsl(var(--color-primary));
+	}
+
+	// ── Nav surface — palette-only rebind ──────────────────────────
+	// @mixin nav reads --nav-link-border-color* via fallback (defaults:
+	// transparent). Glass rebinds them so hover/active draw an accent
+	// ring. --nav-list-bleed shifts the ul to the sidebar's vertical
+	// borders so dividers reach edge-to-edge; @mixin nav reads it with
+	// `0` fallback so default theme is unaffected.
+	--nav-link-border-color-hover: var(--color-accent);
+	--nav-link-border-color-active: var(--color-accent);
+	// Resolves against the ROOT --padding-x, not a sidebar-local one — valid
+	// today because nothing between :root and the nav rebinds it, but latent.
+	--nav-list-bleed: calc(-1 * var(--padding-x));
+
+	// ── Dropdown / menu-items dividers ─────────────────────────────
+	// @mixin menu-items reads SOFT --border-block-start on `li + li`
+	// and `hr` with `none` fallback. Glass rebinds the slot in scope
+	// so the divider appears for both. Scoped (not skin :root)
+	// because --border-block-start is read by ~10 other mixins
+	// (cards, tables, accordions) where the divider should NOT appear.
+	[data-ln-dropdown-menu],
+	.menu-items {
+		--border-block-start: var(--border-width) solid var(--color-border);
+	}
+}
+
+[data-skin="outline"] {
+	// Outline — no elevation shadows, structural borders only.
+	--shadow-xs: none;
+	--shadow-sm: none;
+	--shadow-md: none;
+	--shadow-lg: none;
+	--shadow-xl: none;
+	--shadow-2xl: none;
+	
+	// Retain the inner shadow for recessed tracks.
+	--shadow-resting: none;
+	--shadow-floating: none;
+
+	// Make the borders stand out more since there are no shadows
+	// Resolves once at <html> against whichever polarity is active there —
+	// a nested [data-mode] island under this skin inherits root neutral-300.
+	--border-subtle: hsl(var(--color-neutral-300));
+
+	// ── Buttons — neutral chrome
+	--btn-bg: transparent;
+	--btn-bg-hover: var(--bg-hover);
+	// Give buttons a visible border instead of filling them
+	--btn-border: var(--border-strong);
+
+	// ── Accent buttons — transparent fill, colored border
+	button[type="submit"],
+	.btn {
+		--btn-bg: transparent;
+		--btn-fg: hsl(var(--color-primary));
+		--btn-border: hsl(var(--color-primary));
+		--btn-bg-hover: hsl(var(--color-primary) / 0.1);
+		--btn-fg-hover: hsl(var(--color-primary));
+		--btn-border-hover: hsl(var(--color-primary));
+	}
+}
+
+[data-skin="soft"] {
+	// Soft — playful, maximum radius, heavily shadow-based, no borders.
+	--radius-xs: 0.5rem;
+	--radius-sm: 0.75rem;
+	--radius-md: 1rem;
+	--radius-lg: 1.5rem;
+	--radius-xl: 2rem;
+	--radius-2xl: 2.5rem;
+
+	// Override shadows to be much larger and softer (volumetric look)
+	--shadow-sm: 0 8px 16px -2px rgba(0, 0, 0, 0.08);
+	--shadow-md: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
+	--shadow-lg: 0 24px 48px -4px rgba(0, 0, 0, 0.16);
+
+	// Floating elements are more pronounced
+	--shadow-resting: var(--shadow-sm);
+	--shadow-floating: var(--shadow-lg);
+
+	// Remove default subtle borders (cards, panels) so they rely solely on shadows
+	--border-subtle: transparent;
+
+	// ── Buttons — pill shapes, floating, no borders
+	--btn-border: transparent;
+	--btn-border-hover: transparent;
+	--btn-bg: var(--bg-elevated);
+	--btn-bg-hover: var(--bg-hover);
+}