@web-my-money/tokens 1.0.0

package/dist/tailwind-preset.mjs

@@ -0,0 +1,6 @@
+import {
+  wmmPreset
+} from "./chunk-4FF2FHY6.mjs";
+export {
+  wmmPreset
+};

package/dist/themes/app-theme.css

@@ -0,0 +1,140 @@
+/* GENERATED by scripts/gen-theme-css.mjs — DO NOT EDIT.
+   Source of truth: src/themes/palette.mjs · variant: app (wmm-native vocab)
+   Themes: light (default), dark, wmm — switch via [data-theme]. */
+
+@theme inline {
+  --color-background: var(--bg);
+  --color-surface: var(--surface);
+  --color-card: var(--card);
+  --color-overlay: var(--overlay);
+  --color-foreground: var(--fg);
+  --color-muted: var(--muted);
+  --color-faint: var(--faint);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-primary: var(--primary);
+  --color-primary-dim: var(--primary-dim);
+  --color-accent: var(--accent);
+  --color-danger: var(--danger);
+  --color-warn: var(--warn);
+  --color-ok: var(--ok);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+  --radius-4xl: var(--radius-4xl);
+}
+
+:root {
+  --radius: 0.625rem;
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --wmm-aqua: #8fccb6;
+  --wmm-periwinkle: #869ce2;
+  --wmm-blue-lift: #7388cf;
+  --wmm-navy: #1f2d56;
+  --wmm-glow: rgba(143, 204, 182, 0.15);
+  --wmm-teal: #8fccb6;
+  --wmm-violet: #869ce2;
+  --wmm-sky: #7388cf;
+}
+
+:root, [data-theme="light"] {
+  color-scheme: light;
+  --bg: oklch(0.985 0.003 250);
+  --surface: oklch(1 0 0);
+  --card: oklch(1 0 0);
+  --overlay: oklch(0.965 0.004 250);
+  --fg: oklch(0.22 0.012 260);
+  --muted: oklch(0.42 0.012 260);
+  --faint: oklch(0.58 0.01 260);
+  --border: oklch(0 0 0 / 8%);
+  --border-strong: oklch(0 0 0 / 14%);
+  --primary: #4f8a72;
+  --primary-dim: rgba(79, 138, 114, 0.10);
+  --accent: #4a5fb0;
+  --danger: oklch(0.56 0.22 25);
+  --warn: oklch(0.62 0.16 65);
+  --ok: oklch(0.55 0.16 150);
+  --ring: #4f8a72;
+  --chart-1: #0284c7;
+  --chart-2: #16a34a;
+  --chart-3: #b45309;
+  --chart-4: #7c3aed;
+  --chart-5: #dc2626;
+  --chart-6: #0d9488;
+  --chart-7: #db2777;
+  --chart-8: #475569;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: oklch(0.13 0.005 260);
+  --surface: oklch(0.16 0.006 260);
+  --card: oklch(0.18 0.006 260);
+  --overlay: oklch(0.21 0.008 260);
+  --fg: oklch(0.97 0 0);
+  --muted: oklch(0.74 0.012 260);
+  --faint: oklch(0.58 0.011 260);
+  --border: oklch(1 0 0 / 9%);
+  --border-strong: oklch(1 0 0 / 16%);
+  --primary: #8fccb6;
+  --primary-dim: rgba(143, 204, 182, 0.16);
+  --accent: #869ce2;
+  --danger: oklch(0.66 0.22 25);
+  --warn: oklch(0.80 0.16 75);
+  --ok: oklch(0.78 0.17 150);
+  --ring: #8fccb6;
+  --chart-1: #38bdf8;
+  --chart-2: #4ade80;
+  --chart-3: #fbbf24;
+  --chart-4: #a78bfa;
+  --chart-5: #f87171;
+  --chart-6: #2dd4bf;
+  --chart-7: #f472b6;
+  --chart-8: #94a3b8;
+}
+
+[data-theme="wmm"] {
+  color-scheme: dark;
+  --bg: #080b14;
+  --surface: #0b1322;
+  --card: #0f172a;
+  --overlay: #16203a;
+  --fg: #f8fafc;
+  --muted: #94a3b8;
+  --faint: #64748b;
+  --border: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.14);
+  --primary: #8fccb6;
+  --primary-dim: rgba(143, 204, 182, 0.16);
+  --accent: #869ce2;
+  --danger: #ef4444;
+  --warn: #f59e0b;
+  --ok: #22c55e;
+  --ring: #8fccb6;
+  --chart-1: #38bdf8;
+  --chart-2: #4ade80;
+  --chart-3: #fbbf24;
+  --chart-4: #a78bfa;
+  --chart-5: #f87171;
+  --chart-6: #2dd4bf;
+  --chart-7: #f472b6;
+  --chart-8: #94a3b8;
+}

package/dist/themes/clients/acme.css

@@ -0,0 +1,50 @@
+/* GENERATED client theme: Acme (base: light). DO NOT EDIT — regenerate.
+   Import AFTER the base theme; set <html data-theme="acme">. */
+
+/* shadcn vocab (primitives / blocks / charts) */
+[data-theme="acme"] {
+  color-scheme: light;
+  --background: oklch(0.985 0.003 250);
+  --foreground: oklch(0.22 0.012 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.22 0.012 260);
+  --popover: oklch(0.965 0.004 250);
+  --popover-foreground: oklch(0.22 0.012 260);
+  --primary: #e11d48;
+  --primary-foreground: #ffffff;
+  --secondary: oklch(1 0 0);
+  --secondary-foreground: oklch(0.22 0.012 260);
+  --muted: oklch(1 0 0);
+  --muted-foreground: oklch(0.42 0.012 260);
+  --accent: oklch(0.965 0.004 250);
+  --accent-foreground: oklch(0.22 0.012 260);
+  --destructive: oklch(0.56 0.22 25);
+  --border: oklch(0 0 0 / 8%);
+  --input: oklch(0 0 0 / 14%);
+  --ring: #e11d48;
+  --chart-1: #e11d48;
+  --chart-2: #2563eb;
+  --chart-3: oklch(0.55 0.16 150);
+  --chart-4: oklch(0.62 0.16 65);
+  --chart-5: oklch(0.56 0.22 25);
+}
+
+/* wmm-native vocab (apps on --bg/--fg/… ) */
+[data-theme="acme"] {
+  --bg: oklch(0.985 0.003 250);
+  --surface: oklch(1 0 0);
+  --card: oklch(1 0 0);
+  --overlay: oklch(0.965 0.004 250);
+  --fg: oklch(0.22 0.012 260);
+  --muted: oklch(0.42 0.012 260);
+  --faint: oklch(0.58 0.01 260);
+  --border: oklch(0 0 0 / 8%);
+  --border-strong: oklch(0 0 0 / 14%);
+  --primary: #e11d48;
+  --primary-dim: oklch(0.58 0.15 175 / 12%);
+  --accent: #2563eb;
+  --danger: oklch(0.56 0.22 25);
+  --warn: oklch(0.62 0.16 65);
+  --ok: oklch(0.55 0.16 150);
+  --ring: #e11d48;
+}

package/dist/themes/extended.css

@@ -0,0 +1,453 @@
+/* @web-my-money/tokens/themes/extended.css
+   Extended design tokens — typography scale, gradients, glass, glow, shadows.
+   Imported automatically via @web-my-money/tokens/theme (do not import separately). */
+
+/* ── Typography ─────────────────────────────────────────────── */
+:root {
+  /* Font stacks (next/font populates the var()s; these are the fallback chains) */
+  --font-sans:    var(--font-inter, ui-sans-serif, system-ui, sans-serif);
+  --font-display: var(--font-space-grotesk, "Space Grotesk", var(--font-inter, ui-sans-serif));
+  --font-mono:    ui-monospace, "JetBrains Mono", "Fira Code", monospace;
+
+  /* Type scale — rem, 4px base */
+  --text-xs:      0.75rem;    /* 12px */
+  --text-sm:      0.875rem;   /* 14px */
+  --text-base:    1rem;       /* 16px */
+  --text-lg:      1.125rem;   /* 18px */
+  --text-xl:      1.25rem;    /* 20px */
+  --text-2xl:     1.5rem;     /* 24px */
+  --text-3xl:     1.875rem;   /* 30px */
+  --text-4xl:     2.25rem;    /* 36px */
+  --text-5xl:     3rem;       /* 48px */
+  --text-6xl:     3.75rem;    /* 60px */
+  --text-display: clamp(2.5rem, 4.5vw + 0.5rem, 4.5rem); /* fluid hero */
+
+  /* Line heights */
+  --leading-none:    1;
+  --leading-tight:   1.25;
+  --leading-snug:    1.375;
+  --leading-normal:  1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose:   2;
+
+  /* Font weights */
+  --font-normal:   400;
+  --font-medium:   500;
+  --font-semibold: 600;
+  --font-bold:     700;
+  --font-black:    900;
+
+  /* Letter spacing */
+  --tracking-tight:   -0.025em;
+  --tracking-normal:  0em;
+  --tracking-wide:    0.025em;
+  --tracking-wider:   0.05em;
+  --tracking-widest:  0.1em;
+}
+
+/* ── Font-size accessibility preference ───────────────────────
+   Three-step text-size preference (Settings → Appearance), set by
+   FontSizeToggle / useFontSizePreference (@web-my-money/tokens/react) and
+   persisted under localStorage['wmm-font-size']. Rescales the whole UI
+   because the type scale above (and Tailwind's rem-based utilities) resolve
+   against <html>'s font-size. Generalizes wmm-finance-hr's real, proven
+   font-size-toggle.tsx pattern (own key there) — same 14/16/18px steps. */
+html.font-md { font-size: 14px; } /* default */
+html.font-lg { font-size: 16px; } /* comfortable */
+html.font-xl { font-size: 18px; } /* large */
+
+/* ── Motion ──────────────────────────────────────────────────── */
+:root {
+  /* Durations */
+  --duration-instant: 80ms;
+  --duration-fast:    150ms;
+  --duration-base:    200ms;
+  --duration-slow:    300ms;
+  --duration-slower:  500ms;
+  --duration-glacial: 800ms;
+
+  /* Easings */
+  --ease-linear:      linear;
+  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
+  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot */
+  --ease-bounce:      cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  --ease-smooth:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+  /* Transition shorthands */
+  --transition-colors: color var(--duration-base) var(--ease-out),
+                       background-color var(--duration-base) var(--ease-out),
+                       border-color var(--duration-base) var(--ease-out);
+  --transition-opacity: opacity var(--duration-fast) var(--ease-out);
+  --transition-transform: transform var(--duration-base) var(--ease-spring);
+  --transition-all: all var(--duration-base) var(--ease-out);
+}
+
+/* ── Z-index scale ───────────────────────────────────────────── */
+:root {
+  --z-hide:    -1;
+  --z-base:     0;
+  --z-raised:   10;
+  --z-dropdown: 1000;
+  --z-sticky:   1100;
+  --z-overlay:  1200;
+  --z-modal:    1300;
+  --z-toast:    1400;
+  --z-tooltip:  1500;
+}
+
+/* ── Border radius scale ─────────────────────────────────────── */
+:root {
+  --radius-none: 0;
+  --radius-xs:   0.125rem;   /* 2px */
+  --radius-sm:   0.25rem;    /* 4px */
+  --radius-md:   0.375rem;   /* 6px */
+  --radius-lg:   0.5rem;     /* 8px */
+  --radius-xl:   0.75rem;    /* 12px */
+  --radius-2xl:  1rem;       /* 16px */
+  --radius-3xl:  1.5rem;     /* 24px */
+  --radius-full: 9999px;
+}
+
+/* ── Spacing scale (4px base) ────────────────────────────────── */
+:root {
+  --space-px:  1px;
+  --space-0:   0;
+  --space-1:   0.25rem;    /* 4px */
+  --space-2:   0.5rem;     /* 8px */
+  --space-3:   0.75rem;    /* 12px */
+  --space-4:   1rem;       /* 16px */
+  --space-5:   1.25rem;    /* 20px */
+  --space-6:   1.5rem;     /* 24px */
+  --space-8:   2rem;       /* 32px */
+  --space-10:  2.5rem;     /* 40px */
+  --space-12:  3rem;       /* 48px */
+  --space-16:  4rem;       /* 64px */
+  --space-20:  5rem;       /* 80px */
+  --space-24:  6rem;       /* 96px */
+  --space-32:  8rem;       /* 128px */
+}
+
+/* ── Light theme ───────────────────────────────────────────── */
+:root, [data-theme="light"] {
+  /* Gradients */
+  --gradient-hero:    linear-gradient(160deg, oklch(0.985 0.003 250) 0%, oklch(0.96 0.008 200) 60%, oklch(0.985 0.003 250) 100%);
+  --gradient-cta:     linear-gradient(135deg, oklch(0.58 0.15 175) 0%, oklch(0.50 0.22 295) 100%);
+  --gradient-primary: linear-gradient(135deg, oklch(0.58 0.15 175) 0%, oklch(0.50 0.22 295) 100%);
+  --gradient-card:    none;
+  --gradient-shine:   linear-gradient(105deg, transparent 40%, oklch(0.58 0.15 175 / 6%) 50%, transparent 60%);
+  --gradient-teal-glow:   radial-gradient(ellipse at 50% 0%, oklch(0.58 0.15 175 / 12%) 0%, transparent 70%);
+  --gradient-violet-glow: radial-gradient(ellipse at 80% 80%, oklch(0.50 0.22 295 / 10%) 0%, transparent 60%);
+
+  /* Glass — uses foreground (dark on light) for brand-adaptive glass */
+  --glass-bg:        color-mix(in srgb, var(--foreground) 3%, transparent);
+  --glass-bg-strong: color-mix(in srgb, var(--foreground) 6%, transparent);
+  --glass-border:    color-mix(in srgb, var(--foreground) 10%, transparent);
+  --glass-blur:      blur(16px);
+
+  /* Glow — uses OKLCH for accuracy */
+  --glow-primary-sm: 0 0 20px oklch(0.58 0.15 175 / 15%);
+  --glow-primary:    0 0 40px oklch(0.58 0.15 175 / 12%);
+  --glow-primary-lg: 0 0 80px oklch(0.58 0.15 175 / 10%);
+  --glow-accent-sm:  0 0 20px oklch(0.50 0.22 295 / 15%);
+  --glow-teal-bar:   inset 0 1px 0 oklch(0.58 0.15 175 / 20%);
+
+  /* Shadows */
+  --shadow-xs:     0 1px 2px rgba(0,0,0,0.05);
+  --shadow-card:   0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
+  --shadow-dialog: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
+  --shadow-glow:   0 4px 24px oklch(0.58 0.15 175 / 18%);
+  /* A second, more restrained elevation option ("Linear-quality" — soft
+     blur + hairline ring, no heavy shadow) alongside --shadow-card above,
+     not replacing it: --shadow-card already ships and other consumers may
+     render it as-is, so this is additive rather than a retroactive change.
+     Verified against wmm-tasks' production values (2026-07). */
+  --shadow-card-subtle:       0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
+  --shadow-card-subtle-hover: 0 0 0 1px rgba(79,138,114,0.20), 0 8px 24px rgba(0,0,0,0.10);
+}
+
+/* ── Dark theme ────────────────────────────────────────────── */
+[data-theme="dark"] {
+  --gradient-hero:    linear-gradient(160deg, oklch(0.13 0.005 260) 0%, oklch(0.17 0.012 270) 60%, oklch(0.13 0.005 260) 100%);
+  --gradient-cta:     linear-gradient(135deg, oklch(0.78 0.15 175) 0%, oklch(0.66 0.22 295) 100%);
+  --gradient-primary: linear-gradient(135deg, oklch(0.78 0.15 175) 0%, oklch(0.66 0.22 295) 100%);
+  --gradient-card:    linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
+  --gradient-shine:   linear-gradient(105deg, transparent 40%, oklch(0.78 0.15 175 / 8%) 50%, transparent 60%);
+  --gradient-teal-glow:   radial-gradient(ellipse at 50% 0%, oklch(0.78 0.15 175 / 16%) 0%, transparent 70%);
+  --gradient-violet-glow: radial-gradient(ellipse at 80% 80%, oklch(0.66 0.22 295 / 12%) 0%, transparent 60%);
+
+  --glass-bg:        rgba(255,255,255,0.04);
+  --glass-bg-strong: rgba(255,255,255,0.08);
+  --glass-border:    rgba(255,255,255,0.08);
+  --glass-blur:      blur(20px);
+
+  --glow-primary-sm: 0 0 20px oklch(0.78 0.15 175 / 25%);
+  --glow-primary:    0 0 40px oklch(0.78 0.15 175 / 20%);
+  --glow-primary-lg: 0 0 80px oklch(0.78 0.15 175 / 15%);
+  --glow-accent-sm:  0 0 20px oklch(0.66 0.22 295 / 25%);
+  --glow-teal-bar:   inset 0 1px 0 oklch(0.78 0.15 175 / 20%);
+
+  --shadow-xs:     0 1px 2px rgba(0,0,0,0.2);
+  --shadow-card:   0 4px 24px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2);
+  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
+  --shadow-dialog: 0 20px 60px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
+  --shadow-glow:   0 4px 24px oklch(0.78 0.15 175 / 22%);
+  /* See light theme's comment above — additive, near-invisible inset
+     highlight instead of a heavy drop shadow. */
+  --shadow-card-subtle:       0 1px 0 rgba(255,255,255,0.04) inset;
+  --shadow-card-subtle-hover: 0 0 0 1px rgba(143,204,182,0.25), 0 8px 30px rgba(0,0,0,0.4);
+}
+
+/* ── WMM brand theme ───────────────────────────────────────── */
+[data-theme="wmm"] {
+  --gradient-hero:    linear-gradient(180deg, #070b13 0%, #080c14 46%, #0a1220 100%);
+  --gradient-cta:     linear-gradient(135deg, #1f2d56 0%, #8fccb6 100%);
+  --gradient-primary: linear-gradient(135deg, #1f2d56 0%, #8fccb6 100%);
+  --gradient-card:    linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
+  --gradient-shine:   linear-gradient(105deg, transparent 40%, rgba(143,204,182,0.10) 50%, transparent 60%);
+  --gradient-teal-glow:   radial-gradient(ellipse at 50% 0%, rgba(143,204,182,0.18) 0%, transparent 70%);
+  --gradient-violet-glow: radial-gradient(ellipse at 84% 6%, rgba(115,136,207,0.14) 0%, transparent 60%);
+  --gradient-hero-full: var(--gradient-hero), var(--gradient-teal-glow), var(--gradient-violet-glow);
+
+  --glass-bg:        rgba(255,255,255,0.04);
+  --glass-bg-strong: rgba(255,255,255,0.08);
+  --glass-border:    rgba(255,255,255,0.09);
+  --glass-blur:      blur(20px);
+
+  --glow-primary-sm: 0 0 20px rgba(143,204,182,0.32);
+  --glow-primary:    0 0 40px rgba(143,204,182,0.24);
+  --glow-primary-lg: 0 0 80px rgba(143,204,182,0.16);
+  --glow-accent-sm:  0 0 20px rgba(134,156,226,0.32);
+  --glow-accent:     0 0 40px rgba(134,156,226,0.24);
+  --glow-teal-bar:   inset 0 1px 0 rgba(143,204,182,0.25);
+
+  --shadow-xs:     0 1px 2px rgba(0,0,0,0.3);
+  --shadow-card:   0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3), var(--glow-teal-bar);
+  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
+  --shadow-dialog: 0 20px 60px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
+  --shadow-glow:   0 4px 24px rgba(143,204,182,0.28), var(--glow-teal-bar);
+  /* Reuses dark's subtle values (same precedent as this theme's chart
+     palette above) — a low-key option for internal-tool-style surfaces
+     that land on the marketing-flavored wmm theme. */
+  --shadow-card-subtle:       0 1px 0 rgba(255,255,255,0.04) inset;
+  --shadow-card-subtle-hover: 0 0 0 1px rgba(143,204,182,0.25), 0 8px 30px rgba(0,0,0,0.4);
+}
+
+/* ── Native form controls ─────────────────────────────────────
+   Selects/date-pickers must follow the active theme, or the OS paints its
+   own light popup over a dark page. Ported from wmm-tasks' production fix
+   (verified there before centralizing here). light is the default (matches
+   :root above); dark + wmm are both dark-scheme themes. */
+select,
+input[type="date"],
+input[type="datetime-local"],
+input[type="time"] {
+  color-scheme: light;
+}
+[data-theme="dark"] select,
+[data-theme="dark"] input[type="date"],
+[data-theme="dark"] input[type="datetime-local"],
+[data-theme="dark"] input[type="time"],
+[data-theme="wmm"] select,
+[data-theme="wmm"] input[type="date"],
+[data-theme="wmm"] input[type="datetime-local"],
+[data-theme="wmm"] input[type="time"] {
+  color-scheme: dark;
+}
+
+/* ── Accessible focus ring (fallback) ──────────────────────────
+   Ported from wmm-tasks. :where() keeps this at ZERO specificity, so it
+   only applies where nothing more specific already does — @web-my-money/
+   primitives' own focus-visible:ring-* utilities (real specificity) always
+   win over this rule; it exists purely as a safety net for apps that don't
+   use primitives and hand-roll their own interactive elements. Triggers
+   only on :focus-visible (keyboard/AT), never on a mouse click. */
+:where(button, a, [role="button"], input, select, textarea):focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 1px;
+}
+
+/* ── Text gradient utilities ─────────────────────────────────── */
+/* Usage: class="text-transparent bg-clip-text" style="backgroundImage:var(--text-gradient-primary)" */
+/* Var-driven so they auto-follow whatever theme (and client brand) is active. */
+:root, [data-theme="light"], [data-theme="dark"], [data-theme="wmm"] {
+  --text-gradient-primary:   linear-gradient(90deg, var(--primary), var(--accent));
+  --text-gradient-brand:     linear-gradient(90deg, var(--accent), var(--primary));
+  --text-gradient-subtle:    linear-gradient(90deg, var(--foreground), color-mix(in srgb, var(--foreground) 58%, transparent));
+  --text-gradient-reversed:  linear-gradient(90deg, var(--accent), var(--primary));
+}
+
+/* ── Mask / fade edges ───────────────────────────────────────── */
+/* Usage: style={{ WebkitMaskImage: "var(--mask-fade-bottom)" }} */
+:root {
+  --mask-fade-bottom:  linear-gradient(to bottom, black 60%, transparent 100%);
+  --mask-fade-top:     linear-gradient(to top, black 60%, transparent 100%);
+  --mask-fade-x:       linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
+  --mask-fade-sides:   linear-gradient(to right, transparent, black 12%, black 88%, transparent);
+  --mask-fade-center:  radial-gradient(ellipse at center, black 50%, transparent 100%);
+}
+
+/* ── Grid / texture backgrounds ─────────────────────────────── */
+/* Usage: style={{ backgroundImage: "var(--grid-hero)" }} */
+:root, [data-theme="light"] {
+  --grid-dot:        radial-gradient(circle, oklch(0.5 0 0 / 12%) 1px, transparent 1px);
+  --grid-dot-size:   24px 24px;
+  --grid-line:       linear-gradient(var(--border) 1px, transparent 1px),
+                     linear-gradient(90deg, var(--border) 1px, transparent 1px);
+  --grid-line-size:  40px 40px;
+}
+[data-theme="dark"], [data-theme="wmm"] {
+  --grid-dot:        radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
+  --grid-dot-size:   24px 24px;
+  --grid-line:       linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
+                     linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
+  --grid-line-size:  40px 40px;
+}
+
+/* ── Keyframes ───────────────────────────────────────────────── */
+@keyframes wmm-pulse-glow {
+  0%, 100% { opacity: 0.6; transform: scale(1); }
+  50%       { opacity: 1;   transform: scale(1.04); }
+}
+@keyframes wmm-fade-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes wmm-shimmer {
+  from { background-position: -200% center; }
+  to   { background-position:  200% center; }
+}
+@keyframes wmm-spin-slow {
+  to { transform: rotate(360deg); }
+}
+
+/* Utility references (read-only — apply these animation names in component styles) */
+:root {
+  --animate-pulse-glow: wmm-pulse-glow 2.4s ease-in-out infinite;
+  --animate-fade-up:    wmm-fade-up var(--duration-slow) var(--ease-spring) both;
+  --animate-shimmer:    wmm-shimmer 2.5s linear infinite;
+  --animate-spin-slow:  wmm-spin-slow 8s linear infinite;
+}
+
+/* ── FX keyframes (dynamic backgrounds + effects) ───────────── */
+@keyframes wmm-aurora-drift {
+  0%   { transform: translate3d(-8%, -6%, 0) scale(1);   }
+  33%  { transform: translate3d(6%, 4%, 0)  scale(1.15); }
+  66%  { transform: translate3d(-4%, 8%, 0) scale(0.95); }
+  100% { transform: translate3d(-8%, -6%, 0) scale(1);   }
+}
+@keyframes wmm-aurora-drift-2 {
+  0%   { transform: translate3d(6%, 8%, 0)  scale(1.1);  }
+  50%  { transform: translate3d(-6%, -4%, 0) scale(0.9); }
+  100% { transform: translate3d(6%, 8%, 0)  scale(1.1);  }
+}
+@keyframes wmm-mesh-pan {
+  0%   { background-position: 0% 50%;   }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%;   }
+}
+@keyframes wmm-border-spin {
+  to { transform: translate(-50%, -50%) rotate(360deg); }
+}
+@keyframes wmm-float {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-10px); }
+}
+
+/* ── Component animations ───────────────────────────────────── */
+/* Accordion panel — smooth height via Base UI's --accordion-panel-height var.
+   Applied through the .wmm-accordion-panel class set by @web-my-money/primitives. */
+.wmm-accordion-panel {
+  overflow: hidden;
+  height: var(--accordion-panel-height);
+  transition: height var(--duration, 200ms) var(--ease-spring, ease-out);
+}
+.wmm-accordion-panel[data-starting-style],
+.wmm-accordion-panel[data-ending-style] {
+  height: 0;
+}
+
+/* Collapsible panel — same smooth-height pattern via Base UI's var. */
+.wmm-collapsible-panel {
+  overflow: hidden;
+  height: var(--collapsible-panel-height);
+  transition: height var(--duration, 200ms) var(--ease-spring, ease-out);
+}
+.wmm-collapsible-panel[data-starting-style],
+.wmm-collapsible-panel[data-ending-style] {
+  height: 0;
+}
+
+/* Dialog / Sheet overlay + content — fade (+ scale for Dialog, directional slide
+   for Sheet) via Base UI's [data-starting-style]/[data-ending-style] transition
+   states. NOTE: tailwindcss-animate is NOT installed in this repo — Dialog's
+   className still carries harmless `data-open:animate-in fade-in-0 zoom-in-95`
+   utility names from before this was noticed; they compile to nothing (real
+   state attrs, fake utility names) and are superseded by the rules below, which
+   are the actual working animation. */
+[data-slot="dialog-overlay"],
+[data-slot="sheet-overlay"] {
+  transition: opacity var(--duration, 150ms) var(--ease-smooth, ease-out);
+}
+[data-slot="dialog-overlay"][data-starting-style],
+[data-slot="dialog-overlay"][data-ending-style],
+[data-slot="sheet-overlay"][data-starting-style],
+[data-slot="sheet-overlay"][data-ending-style] {
+  opacity: 0;
+}
+
+[data-slot="dialog-content"] {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity var(--duration, 150ms) var(--ease-spring, ease-out),
+              transform var(--duration, 150ms) var(--ease-spring, ease-out);
+}
+[data-slot="dialog-content"][data-starting-style],
+[data-slot="dialog-content"][data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
+[data-slot="sheet-content"] {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: opacity var(--duration, 200ms) var(--ease-spring, ease-out),
+              transform var(--duration, 200ms) var(--ease-spring, ease-out);
+}
+[data-slot="sheet-content"][data-starting-style],
+[data-slot="sheet-content"][data-ending-style] { opacity: 0; }
+[data-slot="sheet-content"][data-side="bottom"][data-starting-style],
+[data-slot="sheet-content"][data-side="bottom"][data-ending-style] { transform: translateY(100%); }
+[data-slot="sheet-content"][data-side="top"][data-starting-style],
+[data-slot="sheet-content"][data-side="top"][data-ending-style] { transform: translateY(-100%); }
+[data-slot="sheet-content"][data-side="right"][data-starting-style],
+[data-slot="sheet-content"][data-side="right"][data-ending-style] { transform: translateX(100%); }
+[data-slot="sheet-content"][data-side="left"][data-starting-style],
+[data-slot="sheet-content"][data-side="left"][data-ending-style] { transform: translateX(-100%); }
+
+/* SlideOver content — subtle rise + fade (mobile full-bleed, desktop a
+   centered large panel). Shares dialog-overlay's fade for the backdrop. */
+[data-slot="slide-over-content"] {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity var(--duration, 180ms) var(--ease-spring, ease-out),
+              transform var(--duration, 180ms) var(--ease-spring, ease-out);
+}
+[data-slot="slide-over-content"][data-starting-style],
+[data-slot="slide-over-content"][data-ending-style] {
+  opacity: 0;
+  transform: translateY(12px);
+}
+
+/* Respect reduced-motion globally for FX animations */
+@media (prefers-reduced-motion: reduce) {
+  [data-wmm-fx] { animation: none !important; }
+  .wmm-accordion-panel,
+  .wmm-collapsible-panel,
+  [data-slot="dialog-overlay"],
+  [data-slot="dialog-content"],
+  [data-slot="sheet-overlay"],
+  [data-slot="sheet-content"] { transition: none; }
+}