@wealthx/shadcn 0.0.2 → 1.0.0

package/src/styles/globals.css

@@ -1,119 +1,389 @@
-@import "tailwindcss/theme.css";
-@import "tailwindcss/utilities.css";
+@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap");
+@import "tailwindcss";
 @import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "@fontsource-variable/figtree";
+
+/* Scan shadcn component files + storybook stories for Tailwind classes */
+@source "../components/**/*.tsx";
+@source "../../../../apps/docs/stories/**/*.tsx";
+
+/*
+ * Safelist: force-generate variant classes that @source glob scan may miss
+ * (e.g. when packages/shadcn is outside the Vite root apps/docs).
+ * These cover all state-dependent classes used in Checkbox, Button, etc.
+ */
+@source inline("h-2 h-10 h-12 h-16 h-20 h-24 h-28 h-32 h-36 h-40 h-44 h-48 size-10 size-12 size-14 size-16 rounded-full w-4/5 shrink-0 bg-muted transition-all");
+
+@source inline("has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 border-border border-destructive/40 bg-destructive/10 border-warning/40 bg-warning/10 text-warning border-success/40 bg-success/10 text-success border-info/40 bg-info/10 text-info *:data-[slot=alert-description]:text-warning/90 *:data-[slot=alert-description]:text-success/90 *:data-[slot=alert-description]:text-info/90 *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-destructive [&>svg]:text-warning [&>svg]:text-success [&>svg]:text-info");
+
+@source inline("focus-visible:border-primary focus-visible:ring-primary/20 focus:bg-primary/5 focus:text-foreground data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 select-none scroll-my-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-disabled:pointer-events-none data-disabled:opacity-50 data-selected:bg-primary/10 data-active:bg-primary/10 data-active:text-foreground data-active:shadow-sm data-active:bg-transparent data-active:shadow-none data-active:after:opacity-100 after:bg-primary data-popup-open:border-primary data-popup-open:ring-[3px] data-popup-open:ring-primary/20 data-highlighted:bg-primary/5 data-highlighted:text-foreground px-1.5");
+@source inline("bg-foreground/50 hover:bg-foreground/5 focus:ring-border focus:ring-2 focus:ring-offset-0 fixed inset-0 translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-2rem)] sm:max-w-lg border-t pt-4 justify-end gap-1.5");
+
+@source inline("data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20");
+
+@source inline("h-(--accordion-panel-height) data-starting-style:h-0 data-ending-style:h-0 focus-visible:ring-foreground/30 [&[data-panel-open]>svg]:rotate-180");
+
+/* Animation safelist — all data-[open]/data-[ending-style] animation classes used by base-ui components */
+@source inline("animate-in animate-out animate-pulse animate-caret-blink fade-in-0 fade-out-0 zoom-in-95 data-open:slide-in-from-bottom data-open:slide-in-from-left data-open:slide-in-from-right data-open:slide-in-from-top data-ending-style:slide-out-to-bottom data-ending-style:slide-out-to-left data-ending-style:slide-out-to-right data-ending-style:slide-out-to-top data-open:duration-500 data-ending-style:duration-300 data-open:bg-accent data-open:text-accent-foreground");
+
+@source inline("focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:bg-input/30 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-checked:bg-primary aria-invalid:data-checked:border-destructive aria-invalid:data-checked:bg-destructive aria-invalid:data-checked:text-destructive-foreground aria-invalid:data-indeterminate:border-destructive aria-invalid:data-indeterminate:bg-destructive aria-invalid:data-indeterminate:text-destructive-foreground group-data-indeterminate:hidden group-data-indeterminate:block bg-primary/5 bg-destructive/5 border-primary border-destructive peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-destructive text-muted-foreground disabled:pointer-events-none data-open:animate-in data-ending-style:animate-out data-open:fade-in-0 data-ending-style:fade-out-0 data-open:zoom-in-95 data-ending-style:zoom-out-95 animate-spin data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-unchecked:bg-input dark:data-unchecked:bg-input/80 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground group/switch");
 
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * WealthX Design System — Token Foundation
+ * Mapped from WealthX Figma (leyTdeKX7iRKasVXbkpYMJ) → shadcn structure
+ *
+ * IMPORTANT: --primary and --primary-foreground are tenant-driven (white-label).
+ * They MUST be overridden at runtime via ThemeProvider for each tenant.
+ * Default values below use WealthX brand green (#33FF99).
+ *
+ * shadcn structure preserved — only :root/:dark values changed.
+ * Custom additions: --warning, --success, --info (not in shadcn defaults).
+ */
+
 @theme inline {
-    --font-heading: var(--font-sans);
-    --font-sans: 'Figtree Variable', sans-serif;
-    --color-sidebar-ring: var(--shadcn-sidebar-ring);
-    --color-sidebar-border: var(--shadcn-sidebar-border);
-    --color-sidebar-accent-foreground: var(--shadcn-sidebar-accent-foreground);
-    --color-sidebar-accent: var(--shadcn-sidebar-accent);
-    --color-sidebar-primary-foreground: var(--shadcn-sidebar-primary-foreground);
-    --color-sidebar-primary: var(--shadcn-sidebar-primary);
-    --color-sidebar-foreground: var(--shadcn-sidebar-foreground);
-    --color-sidebar: var(--shadcn-sidebar);
-    --color-chart-5: var(--shadcn-chart-5);
-    --color-chart-4: var(--shadcn-chart-4);
-    --color-chart-3: var(--shadcn-chart-3);
-    --color-chart-2: var(--shadcn-chart-2);
-    --color-chart-1: var(--shadcn-chart-1);
-    --color-ring: var(--shadcn-ring);
-    --color-input: var(--shadcn-input);
-    --color-border: var(--shadcn-border);
-    --color-destructive: var(--shadcn-destructive);
-    --color-accent-foreground: var(--shadcn-accent-foreground);
-    --color-accent: var(--shadcn-accent);
-    --color-muted-foreground: var(--shadcn-muted-foreground);
-    --color-muted: var(--shadcn-muted);
-    --color-secondary-foreground: var(--shadcn-secondary-foreground);
-    --color-secondary: var(--shadcn-secondary);
-    --color-primary-foreground: var(--shadcn-primary-foreground);
-    --color-primary: var(--shadcn-primary);
-    --color-popover-foreground: var(--shadcn-popover-foreground);
-    --color-popover: var(--shadcn-popover);
-    --color-card-foreground: var(--shadcn-card-foreground);
-    --color-card: var(--shadcn-card);
-    --color-foreground: var(--shadcn-foreground);
-    --color-background: var(--shadcn-background);
-    --radius-sm: calc(var(--shadcn-radius) * 0.6);
-    --radius-md: calc(var(--shadcn-radius) * 0.8);
-    --radius-lg: var(--shadcn-radius);
-    --radius-xl: calc(var(--shadcn-radius) * 1.4);
-    --radius-2xl: calc(var(--shadcn-radius) * 1.8);
-    --radius-3xl: calc(var(--shadcn-radius) * 2.2);
-    --radius-4xl: calc(var(--shadcn-radius) * 2.6);
+  /* === shadcn core semantic colors === */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* === WealthX additions: brand secondary (tenant-driven navy) === */
+  --color-brand-secondary: var(--brand-secondary);
+  --color-brand-secondary-foreground: var(--brand-secondary-foreground);
+
+  /* === WealthX additions: state colors (not in shadcn defaults) === */
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
+  /* === Chart colors (WealthX series) === */
+  --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);
+
+  /* === Sidebar === */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* === Border radius — WealthX: sharp corners (all 0) === */
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+
+  /* === Font family === */
+  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  /* === Accordion animations === */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from { height: 0; }
+    to   { height: var(--accordion-panel-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--accordion-panel-height); }
+    to   { height: 0; }
+  }
+}
+
+/* ==========================================================================
+ * TYPOGRAPHY — CSS custom properties + responsive overrides
+ * Spec: packages/shadcn/src/lib/typography.ts
+ * Usage: .text-display-large, .text-h1, .text-body-medium, .text-caption, etc.
+ * ========================================================================== */
+:root {
+  /* Display */
+  --typography-display-large-size: 4rem;        --typography-display-large-leading: 4.5rem;    --typography-display-large-weight: 700;  --typography-display-large-tracking: -0.03125rem;
+  --typography-display-medium-size: 3rem;       --typography-display-medium-leading: 3.5rem;   --typography-display-medium-weight: 700;
+  --typography-display-small-size: 2.125rem;    --typography-display-small-leading: 2.625rem;  --typography-display-small-weight: 600;
+
+  /* Headings */
+  --typography-h1-size: 2rem;      --typography-h1-leading: 2.5rem;    --typography-h1-weight: 700;
+  --typography-h2-size: 1.75rem;   --typography-h2-leading: 2.25rem;   --typography-h2-weight: 600;
+  --typography-h3-size: 1.5rem;    --typography-h3-leading: 2rem;      --typography-h3-weight: 600;
+  --typography-h4-size: 1.3125rem; --typography-h4-leading: 1.75rem;   --typography-h4-weight: 600;
+  --typography-h5-size: 1.125rem;  --typography-h5-leading: 1.5rem;    --typography-h5-weight: 600;
+  --typography-h6-size: 1rem;      --typography-h6-leading: 1.375rem;  --typography-h6-weight: 600;
+
+  /* Body */
+  --typography-body-large-size: 1.125rem;   --typography-body-large-leading: 1.75rem;   --typography-body-large-weight: 400;
+  --typography-body-medium-size: 1rem;      --typography-body-medium-leading: 1.5rem;   --typography-body-medium-weight: 400;
+  --typography-body-small-size: 0.875rem;   --typography-body-small-leading: 1.25rem;   --typography-body-small-weight: 400;
+
+  /* Labels */
+  --typography-label-large-size: 1rem;      --typography-label-large-leading: 1.25rem;   --typography-label-large-weight: 600;
+  --typography-label-medium-size: 0.875rem; --typography-label-medium-leading: 1.125rem; --typography-label-medium-weight: 600;
+  --typography-label-small-size: 0.75rem;   --typography-label-small-leading: 1rem;      --typography-label-small-weight: 600; --typography-label-small-tracking: 0.03125rem;
+
+  /* Utility */
+  --typography-caption-size: 0.75rem;   --typography-caption-leading: 1rem;      --typography-caption-weight: 400;
+  --typography-overline-size: 0.625rem; --typography-overline-leading: 0.875rem; --typography-overline-weight: 600; --typography-overline-tracking: 0.09375rem;
+  --typography-code-size: 0.875rem;     --typography-code-leading: 1.25rem;     --typography-code-weight: 400;
+}
+
+/* Tablet — ≤1024px */
+@media (max-width: 1024px) {
+  :root {
+    --typography-display-large-size: 3.6rem;     --typography-display-large-leading: 4.05rem;
+    --typography-display-medium-size: 2.7rem;    --typography-display-medium-leading: 3.15rem;
+    --typography-display-small-size: 1.9125rem;  --typography-display-small-leading: 2.3625rem;
+  }
+}
+
+/* Mobile — ≤768px */
+@media (max-width: 768px) {
+  :root {
+    --typography-display-large-size: 2.5rem;  --typography-display-large-leading: 2.8125rem;
+    --typography-display-medium-size: 2rem;   --typography-display-medium-leading: 2.334rem;
+    --typography-h1-size: 1.75rem;            --typography-h1-leading: 2.1875rem;
+    --typography-h2-size: 1.5rem;             --typography-h2-leading: 1.93rem;
+  }
+}
+
+/* ==========================================================================
+ * TYPOGRAPHY — Utility classes (@layer utilities)
+ * Compose font-size + line-height + font-weight from CSS vars above.
+ * Breakpoint responsiveness is handled automatically via :root media queries.
+ * ========================================================================== */
+@layer utilities {
+  /* Display */
+  .text-display-large  { font-size: var(--typography-display-large-size);  line-height: var(--typography-display-large-leading);  font-weight: var(--typography-display-large-weight);  letter-spacing: var(--typography-display-large-tracking, normal); font-family: var(--font-sans); }
+  .text-display-medium { font-size: var(--typography-display-medium-size); line-height: var(--typography-display-medium-leading); font-weight: var(--typography-display-medium-weight); font-family: var(--font-sans); }
+  .text-display-small  { font-size: var(--typography-display-small-size);  line-height: var(--typography-display-small-leading);  font-weight: var(--typography-display-small-weight);  font-family: var(--font-sans); }
+
+  /* Headings */
+  .text-h1 { font-size: var(--typography-h1-size); line-height: var(--typography-h1-leading); font-weight: var(--typography-h1-weight); font-family: var(--font-sans); }
+  .text-h2 { font-size: var(--typography-h2-size); line-height: var(--typography-h2-leading); font-weight: var(--typography-h2-weight); font-family: var(--font-sans); }
+  .text-h3 { font-size: var(--typography-h3-size); line-height: var(--typography-h3-leading); font-weight: var(--typography-h3-weight); font-family: var(--font-sans); }
+  .text-h4 { font-size: var(--typography-h4-size); line-height: var(--typography-h4-leading); font-weight: var(--typography-h4-weight); font-family: var(--font-sans); }
+  .text-h5 { font-size: var(--typography-h5-size); line-height: var(--typography-h5-leading); font-weight: var(--typography-h5-weight); font-family: var(--font-sans); }
+  .text-h6 { font-size: var(--typography-h6-size); line-height: var(--typography-h6-leading); font-weight: var(--typography-h6-weight); font-family: var(--font-sans); }
+
+  /* Body */
+  .text-body-large  { font-size: var(--typography-body-large-size);  line-height: var(--typography-body-large-leading);  font-weight: var(--typography-body-large-weight);  font-family: var(--font-sans); }
+  .text-body-medium { font-size: var(--typography-body-medium-size); line-height: var(--typography-body-medium-leading); font-weight: var(--typography-body-medium-weight); font-family: var(--font-sans); }
+  .text-body-small  { font-size: var(--typography-body-small-size);  line-height: var(--typography-body-small-leading);  font-weight: var(--typography-body-small-weight);  font-family: var(--font-sans); }
+
+  /* Labels */
+  .text-label-large  { font-size: var(--typography-label-large-size);  line-height: var(--typography-label-large-leading);  font-weight: var(--typography-label-large-weight);  font-family: var(--font-sans); }
+  .text-label-medium { font-size: var(--typography-label-medium-size); line-height: var(--typography-label-medium-leading); font-weight: var(--typography-label-medium-weight); font-family: var(--font-sans); }
+  .text-label-small  { font-size: var(--typography-label-small-size);  line-height: var(--typography-label-small-leading);  font-weight: var(--typography-label-small-weight);  letter-spacing: var(--typography-label-small-tracking); font-family: var(--font-sans); }
+
+  /* Utility */
+  .text-caption  { font-size: var(--typography-caption-size);  line-height: var(--typography-caption-leading);  font-weight: var(--typography-caption-weight);  font-family: var(--font-sans); }
+  .text-overline { font-size: var(--typography-overline-size); line-height: var(--typography-overline-leading); font-weight: var(--typography-overline-weight); letter-spacing: var(--typography-overline-tracking); text-transform: uppercase; font-family: var(--font-sans); }
+  .text-code     { font-size: var(--typography-code-size);     line-height: var(--typography-code-leading);     font-weight: var(--typography-code-weight);     font-family: var(--font-mono, ui-monospace, monospace); }
+}
+
+/* ==========================================================================
+ * BASE — default border color so bare `border` class uses the border token
+ * ========================================================================== */
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
 }
 
+/* ==========================================================================
+ * LIGHT MODE — WealthX Foundation tokens
+ * Source: Figma collection "Foundation" (Light mode)
+ * ========================================================================== */
 :root {
-    --shadcn-background: oklch(1 0 0);
-    --shadcn-foreground: oklch(0.145 0 0);
-    --shadcn-card: oklch(1 0 0);
-    --shadcn-card-foreground: oklch(0.145 0 0);
-    --shadcn-popover: oklch(1 0 0);
-    --shadcn-popover-foreground: oklch(0.145 0 0);
-    --shadcn-primary: oklch(0.532 0.157 131.589);
-    --shadcn-primary-foreground: oklch(0.986 0.031 120.757);
-    --shadcn-secondary: oklch(0.967 0.001 286.375);
-    --shadcn-secondary-foreground: oklch(0.21 0.006 285.885);
-    --shadcn-muted: oklch(0.97 0 0);
-    --shadcn-muted-foreground: oklch(0.556 0 0);
-    --shadcn-accent: oklch(0.97 0 0);
-    --shadcn-accent-foreground: oklch(0.205 0 0);
-    --shadcn-destructive: oklch(0.577 0.245 27.325);
-    --shadcn-border: oklch(0.922 0 0);
-    --shadcn-input: oklch(0.922 0 0);
-    --shadcn-ring: oklch(0.708 0 0);
-    --shadcn-chart-1: oklch(0.871 0.15 154.449);
-    --shadcn-chart-2: oklch(0.723 0.219 149.579);
-    --shadcn-chart-3: oklch(0.627 0.194 149.214);
-    --shadcn-chart-4: oklch(0.527 0.154 150.069);
-    --shadcn-chart-5: oklch(0.448 0.119 151.328);
-    --shadcn-radius: 0;
-    --shadcn-sidebar: oklch(0.985 0 0);
-    --shadcn-sidebar-foreground: oklch(0.145 0 0);
-    --shadcn-sidebar-primary: oklch(0.648 0.2 131.684);
-    --shadcn-sidebar-primary-foreground: oklch(0.986 0.031 120.757);
-    --shadcn-sidebar-accent: oklch(0.97 0 0);
-    --shadcn-sidebar-accent-foreground: oklch(0.205 0 0);
-    --shadcn-sidebar-border: oklch(0.922 0 0);
-    --shadcn-sidebar-ring: oklch(0.708 0 0);
+  --radius: 0; /* WealthX: sharp corners — no border radius */
+
+  /* Core surfaces — from palette/background/* */
+  --background: oklch(1.000 0 0);              /* #FFFFFF — palette/background/default */
+  --foreground: oklch(0.152 0.020 235.0);      /* #040D13 — palette/text/primary */
+
+  /* Card — from color/background/elevated */
+  --card: oklch(1.000 0 0);                    /* #FFFFFF */
+  --card-foreground: oklch(0.152 0.020 235.0); /* #040D13 */
+
+  /* Popover — from color/background/elevated */
+  --popover: oklch(1.000 0 0);                    /* #FFFFFF */
+  --popover-foreground: oklch(0.152 0.020 235.0); /* #040D13 */
+
+  /* Primary — TENANT-DRIVEN (white-label)
+   * Default: WealthX green #33FF99
+   * Override at runtime via ThemeProvider for each tenant */
+  --primary: oklch(0.894 0.208 163.0);            /* #33FF99 — palette/primary/main */
+  --primary-foreground: oklch(0.152 0.020 235.0);  /* #040D13 — contrastText for bright primary (button text readability) */
+
+  /* Secondary — maps to WealthX paper/subtle background */
+  --secondary: oklch(0.977 0.004 236.5);       /* #F5F8FA — palette/background/paper */
+  --secondary-foreground: oklch(0.152 0.020 235.0); /* #040D13 */
+
+  /* Muted — secondary text and disabled states */
+  --muted: oklch(0.977 0.004 236.5);           /* #F5F8FA — palette/background/paper */
+  --muted-foreground: oklch(0.465 0.032 241.8); /* #4A5C6A — palette/text/secondary */
+
+  /* Accent — tertiary surface for hover/active states */
+  --accent: oklch(0.936 0.003 247.9);          /* #E8EAEC — color/background/tertiary */
+  --accent-foreground: oklch(0.152 0.020 235.0); /* #040D13 */
+
+  /* Destructive — error state */
+  --destructive: oklch(0.643 0.215 28.8);      /* #F44336 — palette/error/main */
+  --destructive-foreground: oklch(1.000 0 0);   /* #FFFFFF — light text on red */
+
+  /* Borders */
+  --border: oklch(0.936 0.003 247.9);          /* #E8EAEC — color/border/default */
+  --input: oklch(0.936 0.003 247.9);           /* #E8EAEC — same as border */
+  --ring: oklch(0.894 0.208 163.0);            /* #33FF99 — primary (focus ring uses brand color) */
+
+  /* WealthX custom: state colors */
+  --warning: oklch(0.770 0.174 64.1);          /* #FF9800 — palette/warning/main */
+  --warning-foreground: oklch(1.000 0 0);      /* #FFFFFF */
+  --success: oklch(0.673 0.162 144.2);         /* #4CAF50 — palette/success/main */
+  --success-foreground: oklch(1.000 0 0);      /* #FFFFFF */
+  --info: oklch(0.658 0.169 248.8);            /* #2196F3 — palette/info/main */
+  --info-foreground: oklch(1.000 0 0);         /* #FFFFFF */
+
+  /* Chart series — WealthX Charts collection */
+  --chart-1: oklch(0.590 0.217 261.8);         /* #2B72FB — series/blue */
+  --chart-2: oklch(0.747 0.086 204.1);         /* #64BDC6 — series/teal */
+  --chart-3: oklch(0.846 0.160 94.6);          /* #EECA34 — series/yellow */
+  --chart-4: oklch(0.702 0.192 39.0);          /* #FE6A35 — series/orange */
+  --chart-5: oklch(0.661 0.213 27.5);          /* #FA4B42 — series/red */
+
+  /* Brand secondary — WealthX dark navy #162029 (tenant-driven via ThemeProvider)
+   * NOTE: --secondary is reserved by shadcn for surface/paper (#F5F8FA).
+   * --brand-secondary holds the WealthX brand navy used by the Secondary button variant. */
+  --brand-secondary: oklch(0.238 0.023 246.1);           /* #162029 — palette/secondary/main */
+  --brand-secondary-foreground: oklch(1.000 0 0);        /* #FFFFFF — white on dark navy */
+
+  /* Sidebar — uses paper/secondary background */
+  --sidebar: oklch(0.977 0.004 236.5);             /* #F5F8FA */
+  --sidebar-foreground: oklch(0.152 0.020 235.0);  /* #040D13 */
+  --sidebar-primary: oklch(0.894 0.208 163.0);     /* #33FF99 — tenant primary */
+  --sidebar-primary-foreground: oklch(0.152 0.020 235.0); /* #040D13 */
+  --sidebar-accent: oklch(0.936 0.003 247.9);      /* #E8EAEC */
+  --sidebar-accent-foreground: oklch(0.152 0.020 235.0); /* #040D13 */
+  --sidebar-border: oklch(0.936 0.003 247.9);      /* #E8EAEC */
+  --sidebar-ring: oklch(0.465 0.032 241.8);        /* #4A5C6A */
 }
 
+/* ==========================================================================
+ * DARK MODE — WealthX inverted (based on secondary palette #162029)
+ * Note: WealthX Figma currently only has Light mode.
+ * Dark values derived from WealthX's secondary color (#162029) as base.
+ * ========================================================================== */
 .dark {
-    --shadcn-background: oklch(0.145 0 0);
-    --shadcn-foreground: oklch(0.985 0 0);
-    --shadcn-card: oklch(0.205 0 0);
-    --shadcn-card-foreground: oklch(0.985 0 0);
-    --shadcn-popover: oklch(0.205 0 0);
-    --shadcn-popover-foreground: oklch(0.985 0 0);
-    --shadcn-primary: oklch(0.453 0.124 130.933);
-    --shadcn-primary-foreground: oklch(0.986 0.031 120.757);
-    --shadcn-secondary: oklch(0.274 0.006 286.033);
-    --shadcn-secondary-foreground: oklch(0.985 0 0);
-    --shadcn-muted: oklch(0.269 0 0);
-    --shadcn-muted-foreground: oklch(0.708 0 0);
-    --shadcn-accent: oklch(0.269 0 0);
-    --shadcn-accent-foreground: oklch(0.985 0 0);
-    --shadcn-destructive: oklch(0.704 0.191 22.216);
-    --shadcn-border: oklch(1 0 0 / 10%);
-    --shadcn-input: oklch(1 0 0 / 15%);
-    --shadcn-ring: oklch(0.556 0 0);
-    --shadcn-chart-1: oklch(0.871 0.15 154.449);
-    --shadcn-chart-2: oklch(0.723 0.219 149.579);
-    --shadcn-chart-3: oklch(0.627 0.194 149.214);
-    --shadcn-chart-4: oklch(0.527 0.154 150.069);
-    --shadcn-chart-5: oklch(0.448 0.119 151.328);
-    --shadcn-sidebar: oklch(0.205 0 0);
-    --shadcn-sidebar-foreground: oklch(0.985 0 0);
-    --shadcn-sidebar-primary: oklch(0.768 0.233 130.85);
-    --shadcn-sidebar-primary-foreground: oklch(0.986 0.031 120.757);
-    --shadcn-sidebar-accent: oklch(0.269 0 0);
-    --shadcn-sidebar-accent-foreground: oklch(0.985 0 0);
-    --shadcn-sidebar-border: oklch(1 0 0 / 10%);
-    --shadcn-sidebar-ring: oklch(0.556 0 0);
+  /* Core surfaces */
+  --background: oklch(0.188 0.013 248.5);     /* #0F1419 — dark navy */
+  --foreground: oklch(0.977 0.004 236.5);     /* #F5F8FA — light text */
+
+  /* Card */
+  --card: oklch(0.238 0.023 246.1);           /* #162029 — secondary as dark card */
+  --card-foreground: oklch(0.977 0.004 236.5);
+
+  /* Popover */
+  --popover: oklch(0.238 0.023 246.1);
+  --popover-foreground: oklch(0.977 0.004 236.5);
+
+  /* Primary — stays same hue, slightly brighter in dark mode */
+  --primary: oklch(0.894 0.208 163.0);        /* #33FF99 — same green works on dark */
+  --primary-foreground: oklch(0.152 0.020 235.0); /* #040D13 */
+
+  /* Secondary */
+  --secondary: oklch(0.278 0.023 241.1);      /* #1E2A33 */
+  --secondary-foreground: oklch(0.977 0.004 236.5);
+
+  /* Muted */
+  --muted: oklch(0.278 0.023 241.1);          /* #1E2A33 */
+  --muted-foreground: oklch(0.732 0.021 245.7); /* #9EAAB5 — palette/text/disabled */
+
+  /* Accent */
+  --accent: oklch(0.314 0.030 246.9);         /* #253340 */
+  --accent-foreground: oklch(0.977 0.004 236.5);
+
+  /* Destructive */
+  --destructive: oklch(0.712 0.181 22.8);     /* #FF6B6B — brighter red for dark */
+  --destructive-foreground: oklch(0.152 0.020 235.0);
+
+  /* Borders */
+  --border: oklch(0.314 0.030 246.9);         /* #253340 */
+  --input: oklch(0.314 0.030 246.9);
+  --ring: oklch(0.894 0.208 163.0);           /* #33FF99 */
+
+  /* State colors — brighter variants for dark mode */
+  --warning: oklch(0.829 0.145 73.5);         /* #FFB74D */
+  --warning-foreground: oklch(0.152 0.020 235.0);
+  --success: oklch(0.766 0.118 145.3);        /* #81C784 */
+  --success-foreground: oklch(0.152 0.020 235.0);
+  --info: oklch(0.748 0.123 244.7);           /* #64B5F6 */
+  --info-foreground: oklch(0.152 0.020 235.0);
+
+  /* Chart series — same in dark */
+  --chart-1: oklch(0.590 0.217 261.8);
+  --chart-2: oklch(0.747 0.086 204.1);
+  --chart-3: oklch(0.846 0.160 94.6);
+  --chart-4: oklch(0.702 0.192 39.0);
+  --chart-5: oklch(0.661 0.213 27.5);
+
+  /* Brand secondary — brighter/lighter in dark mode for legibility */
+  --brand-secondary: oklch(0.314 0.030 246.9);           /* #253340 — slightly lighter navy */
+  --brand-secondary-foreground: oklch(0.977 0.004 236.5); /* #F5F8FA — near-white on dark */
+
+  /* Sidebar */
+  --sidebar: oklch(0.238 0.023 246.1);        /* #162029 */
+  --sidebar-foreground: oklch(0.977 0.004 236.5);
+  --sidebar-primary: oklch(0.894 0.208 163.0);
+  --sidebar-primary-foreground: oklch(0.152 0.020 235.0);
+  --sidebar-accent: oklch(0.314 0.030 246.9);
+  --sidebar-accent-foreground: oklch(0.977 0.004 236.5);
+  --sidebar-border: oklch(0.314 0.030 246.9);
+  --sidebar-ring: oklch(0.465 0.032 241.8);
+}
+
+/*
+ * Text selection highlight — primary at 25% opacity (subtle tint).
+ * ::selection covers regular text nodes.
+ * input::selection covers native input field selection (Chrome/Firefox).
+ * color-mix() respects tenant primary overrides (white-label friendly).
+ */
+::selection,
+input::selection,
+textarea::selection {
+  background-color: color-mix(in oklch, var(--primary) 25%, transparent);
+  color: inherit;
 }
+
+/*
+ * Sonner toast — left accent strip per status type.
+ * Uses data-type attribute set by the Sonner library.
+ * Inset box-shadow avoids corner artifacts from mixing 4px left + 1px other borders.
+ * !important required to override Sonner's own styles.
+ */
+[data-sonner-toast][data-type="success"] { box-shadow: inset 4px 0 0 var(--success) !important; }
+[data-sonner-toast][data-type="error"]   { box-shadow: inset 4px 0 0 var(--destructive) !important; }
+[data-sonner-toast][data-type="warning"] { box-shadow: inset 4px 0 0 var(--warning) !important; }
+[data-sonner-toast][data-type="info"]    { box-shadow: inset 4px 0 0 var(--info) !important; }