@lab206/ui 0.1.0

package/src/rovingFocus.ts

@@ -0,0 +1,171 @@
+/**
+ * Roving tabindex helpers for Menu, Tabs, List, etc.
+ * @see https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+ */
+
+export function listRovingItems(
+  root: HTMLElement,
+  selector: string,
+): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(selector)].filter((el) => {
+    if (el.hasAttribute("disabled")) return false;
+    if (el.getAttribute("aria-disabled") === "true") return false;
+    // hidden from a11y tree
+    if (el.getAttribute("aria-hidden") === "true") return false;
+    return true;
+  });
+}
+
+/** Set tabindex so only `activeIndex` is in sequential tab order. */
+export function applyRovingTabIndex(
+  items: HTMLElement[],
+  activeIndex: number,
+): void {
+  items.forEach((el, i) => {
+    el.tabIndex = i === activeIndex ? 0 : -1;
+  });
+}
+
+export function focusRovingItem(
+  items: HTMLElement[],
+  index: number,
+): HTMLElement | null {
+  if (items.length === 0) return null;
+  const i = Math.max(0, Math.min(items.length - 1, index));
+  applyRovingTabIndex(items, i);
+  const el = items[i]!;
+  el.focus();
+  return el;
+}
+
+export function indexOfFocused(
+  items: HTMLElement[],
+  active: Element | null,
+): number {
+  if (!active) return -1;
+  return items.findIndex((el) => el === active || el.contains(active));
+}
+
+export type RovingKeyOptions = {
+  orientation?: "horizontal" | "vertical" | "both";
+  loop?: boolean;
+  /** Home / End jump to ends (default true) */
+  homeEnd?: boolean;
+  /**
+   * Called when the focused item should activate (Enter / Space).
+   * Return true if the event was handled.
+   */
+  onActivate?: (el: HTMLElement, index: number) => boolean | void;
+  /**
+   * Called when focus moves via arrows/home/end.
+   * Return true to also activate (tabs pattern).
+   */
+  onMove?: (el: HTMLElement, index: number) => boolean | void;
+};
+
+/**
+ * Handle Arrow / Home / End / Enter / Space on a composite widget.
+ * Returns true when the event was consumed.
+ */
+export function handleRovingKeydown(
+  e: KeyboardEvent,
+  root: HTMLElement,
+  selector: string,
+  options: RovingKeyOptions = {},
+): boolean {
+  const {
+    orientation = "vertical",
+    loop = true,
+    homeEnd = true,
+    onActivate,
+    onMove,
+  } = options;
+
+  const items = listRovingItems(root, selector);
+  if (items.length === 0) return false;
+
+  const doc = root.ownerDocument;
+  let idx = indexOfFocused(items, doc.activeElement);
+  if (idx < 0) idx = 0;
+
+  const key = e.key;
+  const vertical =
+    orientation === "vertical" || orientation === "both";
+  const horizontal =
+    orientation === "horizontal" || orientation === "both";
+
+  let next = idx;
+  let moved = false;
+
+  if (vertical && key === "ArrowDown") {
+    next = loop
+      ? (idx + 1) % items.length
+      : Math.min(items.length - 1, idx + 1);
+    moved = true;
+  } else if (vertical && key === "ArrowUp") {
+    next = loop
+      ? (idx - 1 + items.length) % items.length
+      : Math.max(0, idx - 1);
+    moved = true;
+  } else if (horizontal && key === "ArrowRight") {
+    next = loop
+      ? (idx + 1) % items.length
+      : Math.min(items.length - 1, idx + 1);
+    moved = true;
+  } else if (horizontal && key === "ArrowLeft") {
+    next = loop
+      ? (idx - 1 + items.length) % items.length
+      : Math.max(0, idx - 1);
+    moved = true;
+  } else if (homeEnd && key === "Home") {
+    next = 0;
+    moved = true;
+  } else if (homeEnd && key === "End") {
+    next = items.length - 1;
+    moved = true;
+  } else if (key === "Enter" || key === " ") {
+    e.preventDefault();
+    const el = items[idx]!;
+    onActivate?.(el, idx);
+    return true;
+  } else {
+    return false;
+  }
+
+  if (!moved || next === idx && key !== "Home" && key !== "End") {
+    // still prevent scroll for arrows even if clamped
+    if (
+      key === "ArrowDown" ||
+      key === "ArrowUp" ||
+      key === "ArrowLeft" ||
+      key === "ArrowRight" ||
+      key === "Home" ||
+      key === "End"
+    ) {
+      e.preventDefault();
+      return true;
+    }
+    return false;
+  }
+
+  e.preventDefault();
+  const el = focusRovingItem(items, next);
+  if (el) onMove?.(el, next);
+  return true;
+}
+
+/**
+ * Initial tabindex setup + focus first/selected item.
+ * Call when a menu opens or a list mounts.
+ */
+export function initRovingFocus(
+  root: HTMLElement,
+  selector: string,
+  preferredIndex = 0,
+): number {
+  const items = listRovingItems(root, selector);
+  if (items.length === 0) return -1;
+  const i = Math.max(0, Math.min(items.length - 1, preferredIndex));
+  applyRovingTabIndex(items, i);
+  return i;
+}

package/src/size-entries/form-kit.ts

@@ -0,0 +1,11 @@
+/**
+ * Size entry: golden-path form surface only (tree-shake probe).
+ * Measured by scripts/size.ts — not a public export.
+ */
+export { Button } from "../components/Button.js";
+export { Input } from "../components/Input.js";
+export { Field } from "../components/Field.js";
+export { Stack } from "../components/Stack.js";
+export { Text } from "../components/Text.js";
+export { createTheme } from "../theme.js";
+export { required, emailFormat, firstError } from "../form.js";

package/src/styles/base.css

@@ -0,0 +1,70 @@
+/**
+ * Base reset + element defaults for Powers apps.
+ * Import after tokens.css.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  color-scheme: light;
+  -webkit-text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html[data-pu-theme="dark"] {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--pu-font-sans);
+  font-size: var(--pu-text-md);
+  line-height: var(--pu-leading);
+  background: var(--pu-color-bg);
+  color: var(--pu-color-text);
+  /* Soft navy / green atmosphere — clean, not noisy */
+  background-image:
+    radial-gradient(1000px 520px at 8% -12%, var(--pu-color-glow), transparent 55%),
+    radial-gradient(800px 460px at 96% 0%, var(--pu-color-glow-2), transparent 52%),
+    radial-gradient(600px 400px at 50% 110%, var(--pu-color-glow-holo), transparent 55%);
+  background-attachment: scroll;
+}
+
+::selection {
+  background: var(--pu-color-selection);
+  color: var(--pu-color-text);
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+:focus {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--pu-color-focus) 80%, transparent);
+  outline-offset: 2px;
+}
+
+a {
+  color: inherit;
+}
+
+code,
+pre,
+kbd {
+  font-family: var(--pu-font-mono);
+}

package/src/styles/theme.css

@@ -0,0 +1,14 @@
+/**
+ * Default Powers style entry (batteries included).
+ *
+ * Layers:
+ *   1. tokens   — design contracts
+ *   2. base     — document defaults
+ *   3. utilities — optional BEM-ish layout helpers (token-mapped)
+ *
+ * Component styles (pu-btn, etc.) are injected by primitives when used.
+ * For a minimal CSS footprint: import only tokens.css + base.css.
+ */
+@import "./tokens.css";
+@import "./base.css";
+@import "./utilities.css";

package/src/styles/tokens.css

@@ -0,0 +1,377 @@
+/**
+ * Powers design tokens — “instrument panel”
+ * -----------------------------------------
+ * Deep navy + green signal + cool slate neutrals (instrument).
+ * Thin edges, soft glows — dual electric overrides via data-pu-palette.
+ *
+ * Edit this file to rebrand the entire product.
+ */
+
+:root {
+  /* ---- Brand navy scale ---- */
+  --pu-brand-50: #eef3f9;
+  --pu-brand-100: #d4e0ee;
+  --pu-brand-200: #9bb6d4;
+  --pu-brand-300: #5a86b5;
+  --pu-brand-400: #2f5f94;
+  --pu-brand-500: #0a2744; /* lifted navy — less chalk-black */
+  --pu-brand-600: #061c33;
+  --pu-brand-700: #041528;
+  --pu-brand-800: #030f1c;
+  --pu-brand-900: #020a14;
+
+  /* ---- Cool slate neutrals ---- */
+  --pu-gray-0: #fcfdff;
+  --pu-gray-50: #f4f6fa;
+  --pu-gray-100: #e8ecf3;
+  --pu-gray-200: #d2d9e5;
+  --pu-gray-300: #a8b2c2;
+  --pu-gray-400: #7c8799;
+  --pu-gray-500: #5a6578;
+  --pu-gray-600: #434c5d;
+  --pu-gray-700: #313846;
+  --pu-gray-800: #1f2530;
+  --pu-gray-900: #12161e;
+  --pu-gray-950: #090c11;
+
+  /* ---- Signal green (success / live — not primary chrome) ---- */
+  --pu-sage-300: #8fd44f;
+  --pu-sage-400: #7ac936;
+  --pu-sage-500: #69be28;
+  --pu-sage-600: #4f9a1c;
+  --pu-sage-700: #3a7214;
+  --pu-sage-800: #2a5410;
+
+  /* ---- Soft metal (optional; prefer not on surfaces) ---- */
+  --pu-brass-400: #c4c9d2;
+  --pu-brass-500: #9aa3b2;
+  --pu-brass-600: #6b7382;
+
+  /* ---- Precision cyan (focus / edge — restrained electric) ---- */
+  --pu-holo-cyan: #2eb8c9;
+  --pu-holo-teal: #1f8f9c;
+  --pu-holo-mix: color-mix(in srgb, var(--pu-holo-cyan) 40%, var(--pu-sage-400));
+
+  /* ---- Semantic surfaces ---- */
+  --pu-color-bg: var(--pu-gray-50);
+  --pu-color-surface: var(--pu-gray-0);
+  --pu-color-surface-2: var(--pu-gray-100);
+  --pu-color-surface-elevated: var(--pu-gray-0);
+  --pu-color-surface-sunken: color-mix(in srgb, var(--pu-gray-100) 88%, var(--pu-brand-500));
+  --pu-color-border: color-mix(in srgb, var(--pu-gray-200) 88%, var(--pu-brand-400));
+  --pu-color-border-strong: color-mix(in srgb, var(--pu-gray-300) 70%, var(--pu-brand-400));
+  /* Form controls / checkbox / switch — always clearer than hairline borders */
+  --pu-color-control-border: color-mix(in srgb, var(--pu-gray-300) 82%, var(--pu-brand-400));
+  --pu-color-text: var(--pu-brand-500);
+  --pu-color-text-muted: #4a5568; /* ~gray-600 — AA on surface/bg */
+  /* Primary actions: navy; green reserved for live/success signal */
+  --pu-color-accent: var(--pu-brand-500);
+  --pu-color-accent-hover: var(--pu-brand-600);
+  --pu-color-accent-fg: #f7fafc;
+  --pu-color-signal: var(--pu-sage-500);
+  --pu-color-danger: #b42318;
+  --pu-color-danger-fg: #fcfdff;
+  --pu-color-focus: var(--pu-holo-cyan);
+  --pu-color-selection: color-mix(in srgb, var(--pu-holo-cyan) 18%, transparent);
+  --pu-color-success: var(--pu-sage-600);
+  --pu-color-warning: #a67c3d;
+  --pu-color-warning-fg: #5c4018;
+  /* Soft / secondary actions (buttons, chips, active chrome) */
+  --pu-color-soft-bg: color-mix(in srgb, var(--pu-color-signal) 12%, var(--pu-color-surface));
+  --pu-color-soft-bg-hover: color-mix(in srgb, var(--pu-color-signal) 18%, var(--pu-color-surface));
+  --pu-color-soft-fg: #1f3d2e; /* dark green-navy — readable on soft wash */
+  --pu-color-soft-border: color-mix(in srgb, var(--pu-color-signal) 28%, var(--pu-color-border));
+
+  /* Thin glass — almost flat, slight frost */
+  --pu-glass-bg: color-mix(in srgb, var(--pu-color-surface) 86%, transparent);
+  --pu-glass-border: color-mix(
+    in srgb,
+    var(--pu-holo-cyan) 10%,
+    var(--pu-color-border)
+  );
+  --pu-glass-blur: 14px;
+
+  --pu-color-glow: color-mix(in srgb, var(--pu-brand-400) 10%, transparent);
+  --pu-color-glow-2: color-mix(in srgb, var(--pu-sage-500) 8%, transparent);
+  --pu-color-glow-holo: color-mix(in srgb, var(--pu-holo-cyan) 10%, transparent);
+
+  /* ---- Space ---- */
+  --pu-space-0: 0;
+  --pu-space-1: 0.25rem;
+  --pu-space-2: 0.5rem;
+  --pu-space-3: 0.75rem;
+  --pu-space-4: 1rem;
+  --pu-space-5: 1.25rem;
+  --pu-space-6: 1.5rem;
+  --pu-space-8: 2rem;
+  --pu-space-10: 2.5rem;
+  --pu-space-12: 3rem;
+
+  /* ---- Radius (technical, not bubbly) ---- */
+  --pu-radius-sm: 5px;
+  --pu-radius-md: 8px;
+  --pu-radius-lg: 12px;
+  --pu-radius-xl: 16px;
+  --pu-radius-full: 9999px;
+
+  /* ---- Typography ---- */
+  --pu-font-sans: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
+  --pu-font-display: "DM Sans", "Segoe UI", system-ui, sans-serif;
+  --pu-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --pu-text-xs: 0.75rem;
+  --pu-text-sm: 0.875rem;
+  --pu-text-md: 1rem;
+  --pu-text-lg: 1.125rem;
+  --pu-text-xl: 1.375rem;
+  --pu-text-2xl: 1.75rem;
+  --pu-text-3xl: 2.35rem;
+  --pu-leading: 1.55;
+  --pu-leading-tight: 1.15;
+  --pu-tracking-tight: -0.025em;
+  --pu-tracking-display: -0.035em;
+  --pu-font-medium: 500;
+  --pu-font-semibold: 600;
+  --pu-font-bold: 700;
+
+  /* ---- Airy elevation (Linear-like, cool navy tint) ---- */
+  --pu-shadow-xs: 0 1px 1px rgba(10, 39, 68, 0.03);
+  --pu-shadow-sm:
+    0 1px 2px rgba(10, 39, 68, 0.03),
+    0 2px 6px rgba(10, 39, 68, 0.04);
+  --pu-shadow-md:
+    0 2px 4px rgba(10, 39, 68, 0.03),
+    0 8px 24px rgba(10, 39, 68, 0.06);
+  --pu-shadow-lg:
+    0 4px 8px rgba(10, 39, 68, 0.03),
+    0 16px 40px rgba(10, 39, 68, 0.08);
+  --pu-shadow-xl:
+    0 8px 16px rgba(10, 39, 68, 0.04),
+    0 24px 56px rgba(10, 39, 68, 0.1);
+  --pu-shadow-float:
+    0 0 0 1px color-mix(in srgb, var(--pu-holo-cyan) 12%, var(--pu-color-border)),
+    0 0 20px color-mix(in srgb, var(--pu-holo-cyan) 5%, transparent),
+    0 12px 36px rgba(10, 39, 68, 0.1);
+
+  /* ---- Motion ---- */
+  --pu-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --pu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --pu-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
+  --pu-duration-fast: 130ms;
+  --pu-duration: 220ms;
+  --pu-duration-slow: 380ms;
+
+  /* ---- Controls ---- */
+  --pu-control-h-sm: 2rem;
+  --pu-control-h-md: 2.5rem;
+  --pu-control-h-lg: 3rem;
+  --pu-control-px: 0.95rem;
+  --pu-field-gap: var(--pu-space-2);
+  --pu-label-size: var(--pu-text-sm);
+
+  --pu-z-overlay: 1000;
+  --pu-z-toast: 1100;
+  --pu-overlay-scrim: color-mix(in srgb, var(--pu-brand-500) 48%, transparent);
+}
+
+[data-pu-density="compact"] {
+  --pu-control-h-sm: 1.75rem;
+  --pu-control-h-md: 2rem;
+  --pu-control-h-lg: 2.35rem;
+  --pu-control-px: 0.7rem;
+  --pu-field-gap: var(--pu-space-1);
+  --pu-label-size: var(--pu-text-xs);
+  --pu-space-3: 0.5rem;
+  --pu-space-4: 0.75rem;
+  --pu-space-5: 1rem;
+  --pu-space-6: 1.15rem;
+}
+
+[data-pu-density="comfortable"] {
+}
+
+/* Dark — void navy; green as signal only; cyan focus edge */
+[data-pu-theme="dark"] {
+  --pu-color-bg: #050a12;
+  --pu-color-surface: #0b1220;
+  --pu-color-surface-2: #121b2c;
+  --pu-color-surface-elevated: #172234;
+  --pu-color-surface-sunken: #03060c;
+  /* Borders must stay visible on navy surfaces (was ~12% — near-invisible) */
+  --pu-color-border: color-mix(in srgb, #9aa8bc 28%, transparent);
+  --pu-color-border-strong: color-mix(in srgb, var(--pu-holo-cyan) 36%, #6b7a90);
+  --pu-color-control-border: color-mix(in srgb, #b6c2d4 42%, transparent);
+  --pu-color-text: #e8eef8;
+  --pu-color-text-muted: #a8b4c8; /* brighter muted for AA on dark surfaces */
+  /* Primary CTA: medium blue + light label (never dark-on-dark) */
+  --pu-color-accent: #4a8fd4;
+  --pu-color-accent-hover: #6aa8e6;
+  --pu-color-accent-fg: #f7fafc;
+  --pu-color-signal: var(--pu-sage-400);
+  --pu-color-focus: var(--pu-holo-cyan);
+  --pu-color-danger: #f07178;
+  --pu-color-danger-fg: #1a0a0c;
+  --pu-color-success: var(--pu-sage-400);
+  --pu-color-warning: #e0b45c;
+  --pu-color-warning-fg: #1a1408;
+  --pu-color-selection: color-mix(in srgb, var(--pu-holo-cyan) 22%, transparent);
+  /* Soft chrome — light text on tinted dark wash */
+  --pu-color-soft-bg: color-mix(in srgb, var(--pu-color-accent) 18%, var(--pu-color-surface));
+  --pu-color-soft-bg-hover: color-mix(in srgb, var(--pu-color-accent) 26%, var(--pu-color-surface));
+  --pu-color-soft-fg: #c5ddf5;
+  --pu-color-soft-border: color-mix(in srgb, var(--pu-color-accent) 40%, transparent);
+  --pu-glass-bg: color-mix(in srgb, #0b1220 78%, transparent);
+  --pu-glass-border: color-mix(in srgb, var(--pu-holo-cyan) 18%, transparent);
+  --pu-color-glow: color-mix(in srgb, var(--pu-brand-300) 12%, transparent);
+  --pu-color-glow-2: color-mix(in srgb, var(--pu-sage-500) 8%, transparent);
+  --pu-color-glow-holo: color-mix(in srgb, var(--pu-holo-cyan) 10%, transparent);
+  --pu-overlay-scrim: color-mix(in srgb, #000 72%, transparent);
+  --pu-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4);
+  --pu-shadow-sm:
+    0 1px 2px rgba(0, 0, 0, 0.35),
+    0 2px 8px rgba(0, 0, 0, 0.28);
+  --pu-shadow-md:
+    0 2px 4px rgba(0, 0, 0, 0.3),
+    0 10px 28px rgba(0, 0, 0, 0.4);
+  --pu-shadow-lg:
+    0 4px 8px rgba(0, 0, 0, 0.3),
+    0 18px 44px rgba(0, 0, 0, 0.48);
+  --pu-shadow-xl:
+    0 8px 16px rgba(0, 0, 0, 0.35),
+    0 26px 60px rgba(0, 0, 0, 0.52);
+  --pu-shadow-float:
+    0 0 0 1px color-mix(in srgb, var(--pu-holo-cyan) 18%, transparent),
+    0 0 28px color-mix(in srgb, var(--pu-holo-cyan) 6%, transparent),
+    0 14px 44px rgba(0, 0, 0, 0.55);
+}
+
+/**
+ * Palette: dual electric (preview / option 3)
+ * Navy primary + electric cyan secondary. Green = success/live only.
+ * Toggle via data-pu-palette="dual" | "instrument" (see createPalette).
+ * Default preview is dual; click “Instrument” in the nav to restore the prior look.
+ */
+html[data-pu-palette="instrument"] {
+  /* explicit: :root values already = instrument */
+}
+
+html[data-pu-palette="dual"] {
+  /* Whiter canvas, clearer cyan — dual electric light (pushed) */
+  --pu-brand-50: #f4f9ff;
+  --pu-brand-100: #e3f0fc;
+  --pu-brand-200: #b6d4f5;
+  --pu-brand-300: #6ba3e0;
+  --pu-brand-400: #2f78c4;
+  --pu-brand-500: #0a1e38;
+  --pu-brand-600: #06152a;
+  --pu-brand-700: #040f1e;
+  --pu-brand-800: #030a14;
+  --pu-brand-900: #01060d;
+
+  --pu-gray-0: #ffffff;
+  --pu-gray-50: #f7f9fc;
+  --pu-gray-100: #eef2f8;
+  --pu-gray-200: #d8e0ec;
+  --pu-gray-300: #a8b4c8;
+  --pu-gray-400: #7a879e;
+  --pu-gray-500: #5a6780;
+  --pu-gray-600: #424d63;
+  --pu-gray-700: #303a4c;
+  --pu-gray-800: #1d2433;
+  --pu-gray-900: #111722;
+  --pu-gray-950: #080b12;
+
+  /* Electric cyan — stronger second brand voice */
+  --pu-holo-cyan: #06b6d4;
+  --pu-holo-teal: #0891b2;
+  --pu-holo-mix: color-mix(in srgb, var(--pu-holo-cyan) 60%, var(--pu-brand-300));
+
+  --pu-sage-500: #69be28;
+  --pu-sage-600: #4f9a1c;
+
+  --pu-color-bg: #f4f8fc;
+  --pu-color-surface: #ffffff;
+  --pu-color-surface-2: #e8f4f8;
+  --pu-color-surface-elevated: #ffffff;
+  --pu-color-surface-sunken: #dceef4;
+  --pu-color-border: color-mix(in srgb, #a8c4d4 62%, #06b6d4);
+  --pu-color-border-strong: color-mix(in srgb, #06b6d4 52%, #475569);
+  --pu-color-control-border: color-mix(in srgb, #7a9eb0 55%, #0891b2);
+  --pu-color-text: #0a1e38;
+  --pu-color-text-muted: #3d4f63; /* darker muted for AA on white/surface-2 */
+  --pu-color-accent: #0a1e38;
+  --pu-color-accent-hover: #06152a;
+  --pu-color-accent-fg: #ffffff;
+  --pu-color-signal: #69be28;
+  --pu-color-success: #3d7a16;
+  --pu-color-focus: #06b6d4;
+  --pu-color-selection: color-mix(in srgb, #06b6d4 32%, transparent);
+
+  /* Soft actions = cyan wash (readable dual electric) */
+  --pu-color-soft-bg: color-mix(in srgb, #06b6d4 16%, #ffffff);
+  --pu-color-soft-bg-hover: color-mix(in srgb, #06b6d4 24%, #ffffff);
+  --pu-color-soft-fg: #0a5f73; /* darker teal for AA on soft cyan wash */
+  --pu-color-soft-border: color-mix(in srgb, #06b6d4 45%, #94a3b8);
+
+  --pu-glass-bg: color-mix(in srgb, #ffffff 88%, #cffafe);
+  --pu-glass-border: color-mix(in srgb, #06b6d4 28%, #d0dae8);
+  --pu-glass-blur: 16px;
+  --pu-color-glow: color-mix(in srgb, #06b6d4 18%, transparent);
+  --pu-color-glow-2: color-mix(in srgb, #22d3ee 16%, transparent);
+  --pu-color-glow-holo: color-mix(in srgb, #06b6d4 20%, transparent);
+
+  --pu-shadow-xs: 0 1px 1px rgba(6, 182, 212, 0.06);
+  --pu-shadow-sm:
+    0 1px 2px rgba(10, 30, 56, 0.03),
+    0 2px 10px rgba(6, 182, 212, 0.1);
+  --pu-shadow-md:
+    0 2px 4px rgba(10, 30, 56, 0.03),
+    0 12px 32px rgba(6, 182, 212, 0.12);
+  --pu-shadow-lg:
+    0 4px 8px rgba(10, 30, 56, 0.04),
+    0 20px 48px rgba(6, 182, 212, 0.14);
+  --pu-shadow-float:
+    0 0 0 1px color-mix(in srgb, #06b6d4 32%, transparent),
+    0 0 40px color-mix(in srgb, #06b6d4 16%, transparent),
+    0 16px 44px rgba(10, 30, 56, 0.1);
+}
+
+html[data-pu-palette="dual"][data-pu-theme="dark"] {
+  --pu-color-bg: #04080f;
+  --pu-color-surface: #0a101c;
+  --pu-color-surface-2: #111a2a;
+  --pu-color-surface-elevated: #162033;
+  --pu-color-surface-sunken: #02050a;
+  --pu-color-border: color-mix(in srgb, #94a3b8 26%, transparent);
+  --pu-color-border-strong: color-mix(in srgb, #22d3ee 38%, #64748b);
+  --pu-color-control-border: color-mix(in srgb, #a5b4c8 40%, transparent);
+  --pu-color-text: #eef3fb;
+  --pu-color-text-muted: #a8b6c9;
+  /* Soft electric primary for dark CTAs — dark ink on bright cyan */
+  --pu-color-accent: #38bdf8;
+  --pu-color-accent-hover: #7dd3fc;
+  --pu-color-accent-fg: #041018;
+  --pu-color-signal: #8fd44f;
+  --pu-color-success: #8fd44f;
+  --pu-color-focus: #22d3ee;
+  --pu-color-selection: color-mix(in srgb, #22d3ee 26%, transparent);
+  --pu-color-danger: #fb7185;
+  --pu-color-danger-fg: #1a080c;
+  --pu-color-warning: #f0c14d;
+  --pu-color-warning-fg: #1a1408;
+
+  --pu-color-soft-bg: color-mix(in srgb, #22d3ee 18%, #0a101c);
+  --pu-color-soft-bg-hover: color-mix(in srgb, #22d3ee 26%, #0a101c);
+  --pu-color-soft-fg: #a5f3fc; /* bright cyan text on dark soft wash */
+  --pu-color-soft-border: color-mix(in srgb, #22d3ee 42%, transparent);
+
+  --pu-glass-bg: color-mix(in srgb, #0a101c 80%, transparent);
+  --pu-glass-border: color-mix(in srgb, #22d3ee 18%, transparent);
+  --pu-color-glow: color-mix(in srgb, #38bdf8 14%, transparent);
+  --pu-color-glow-2: color-mix(in srgb, #69be28 8%, transparent);
+  --pu-color-glow-holo: color-mix(in srgb, #22d3ee 12%, transparent);
+
+  --pu-shadow-float:
+    0 0 0 1px color-mix(in srgb, #22d3ee 24%, transparent),
+    0 0 36px color-mix(in srgb, #22d3ee 10%, transparent),
+    0 16px 48px rgba(0, 0, 0, 0.55);
+}