@wealthx/shadcn 1.0.2 → 1.2.0

package/src/styles/globals.css

@@ -11,17 +11,23 @@
  * (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("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 flex-wrap gap-x-4 gap-y-1.5 mt-3");
 
 @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");
+
+/* Toggle / ToggleGroup pressed-state safelist — data-pressed is set by @base-ui/react/toggle */
+@source inline("data-pressed:bg-primary/10 data-pressed:inset-ring data-pressed:inset-ring-primary data-pressed:text-foreground data-pressed:hover:bg-primary/10 data-pressed:hover:text-foreground");
 @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");
 
+/* Button typography tokens — custom utility classes that may not be picked up by glob scan */
+@source inline("text-button text-button-xs");
+
 /* 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");
 
@@ -63,17 +69,44 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
 
-  /* === WealthX additions: brand secondary (tenant-driven navy) === */
+  /* === WealthX additions: brand colors (tenant-driven) === */
+  --color-brand-primary: var(--primary);
   --color-brand-secondary: var(--brand-secondary);
   --color-brand-secondary-foreground: var(--brand-secondary-foreground);
 
+  /* === WealthX additions: text semantic aliases === */
+  --color-text-secondary: var(--muted-foreground);
+  --color-text-disabled: color-mix(
+    in srgb,
+    var(--muted-foreground) 50%,
+    transparent
+  );
+
+  /* === WealthX additions: chart tokens === */
+  --chart-grid: color-mix(in srgb, var(--border) 60%, transparent);
+
   /* === WealthX additions: state colors (not in shadcn defaults) === */
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-warning-text: var(--warning-text);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+  --color-success-text: var(--success-text);
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
+  --color-info-text: var(--info-text);
+  --color-destructive-text: var(--destructive-text);
+
+  /* === Pipeline stage palette — defined in ThemeProvider, fallback to defaults here === */
+  /* Real values are injected by ThemeProvider via useThemeVars() / inline style.        */
+  /* Do NOT use these :root fallbacks for production — they won't react to tenant theme. */
+  --color-stage-1: oklch(0.894 0.208 163);
+  --color-stage-2: oklch(0.894 0.208 163 / 80%);
+  --color-stage-3: oklch(0.894 0.208 163 / 60%);
+  --color-stage-4: oklch(0.894 0.208 163 / 40%);
+  --color-stage-5: oklch(0.894 0.208 163 / 20%);
+  /* Auto foreground for stage-colored backgrounds (WCAG contrast of primary) */
+  --color-stage-fg: var(--primary-foreground);
 
   /* === Chart colors (WealthX series) === */
   --color-chart-1: var(--chart-1);
@@ -99,19 +132,29 @@
   --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";
+  --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); }
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--accordion-panel-height);
+    }
   }
   @keyframes accordion-up {
-    from { height: var(--accordion-panel-height); }
-    to   { height: 0; }
+    from {
+      height: var(--accordion-panel-height);
+    }
+    to {
+      height: 0;
+    }
   }
 }
 
@@ -122,50 +165,104 @@
  * ========================================================================== */
 :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;
+  --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;
+  --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;
+  --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;
+  --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;
+
+  /* Button */
+  --typography-button-default-size: 0.875rem;
+  --typography-button-default-leading: 1.25rem;
+  --typography-button-default-weight: 500;
+  --typography-button-xs-size: 0.75rem;
+  --typography-button-xs-leading: 1.25rem;
+  --typography-button-xs-weight: 500;
 
   /* 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;
+  --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;
+    --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-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;
   }
 }
 
@@ -176,32 +273,140 @@
  * ========================================================================== */
 @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); }
+  .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); }
+  .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); }
+  .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); }
+  .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);
+  }
+
+  /* Button */
+  .text-button {
+    font-size: var(--typography-button-default-size);
+    line-height: var(--typography-button-default-leading);
+    font-weight: var(--typography-button-default-weight);
+    font-family: var(--font-sans);
+  }
+  .text-button-xs {
+    font-size: var(--typography-button-xs-size);
+    line-height: var(--typography-button-xs-leading);
+    font-weight: var(--typography-button-xs-weight);
+    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); }
+  .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);
+  }
 }
 
 /* ==========================================================================
@@ -221,74 +426,96 @@
   --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 */
+  --background: oklch(1 0 0); /* #FFFFFF — palette/background/default */
+  --foreground: oklch(0.152 0.02 235); /* #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 */
+  --card: oklch(1 0 0); /* #FFFFFF */
+  --card-foreground: oklch(0.152 0.02 235); /* #040D13 */
 
   /* Popover — from color/background/elevated */
-  --popover: oklch(1.000 0 0);                    /* #FFFFFF */
-  --popover-foreground: oklch(0.152 0.020 235.0); /* #040D13 */
+  --popover: oklch(1 0 0); /* #FFFFFF */
+  --popover-foreground: oklch(0.152 0.02 235); /* #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) */
+  --primary: oklch(0.894 0.208 163); /* #33FF99 — palette/primary/main */
+  --primary-foreground: oklch(
+    0.152 0.02 235
+  ); /* #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 */
+  --secondary: oklch(
+    0.977 0.004 236.5
+  ); /* #F5F8FA — palette/background/paper */
+  --secondary-foreground: oklch(0.152 0.02 235); /* #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 */
+  --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 */
+  --accent: oklch(0.936 0.003 247.9); /* #E8EAEC — color/background/tertiary */
+  --accent-foreground: oklch(0.152 0.02 235); /* #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 */
+  --destructive: oklch(0.643 0.215 28.8); /* #F44336 — palette/error/main */
+  --destructive-foreground: oklch(1 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) */
+  --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
+  ); /* #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 */
+  --warning: oklch(0.77 0.174 64.1); /* #FF9800 — palette/warning/main */
+  --warning-foreground: oklch(1 0 0); /* #FFFFFF */
+  --warning-text: oklch(
+    0.44 0.14 58
+  ); /* ~#7A5200 — darkened for text on light bg (4.5:1 on white) */
+  --success: oklch(0.673 0.162 144.2); /* #4CAF50 — palette/success/main */
+  --success-foreground: oklch(1 0 0); /* #FFFFFF */
+  --success-text: oklch(
+    0.4 0.12 145
+  ); /* ~#1B5E20 — darkened for text on light bg */
+  --info: oklch(0.658 0.169 248.8); /* #2196F3 — palette/info/main */
+  --info-foreground: oklch(1 0 0); /* #FFFFFF */
+  --info-text: oklch(
+    0.4 0.13 250
+  ); /* ~#0D47A1 — darkened for text on light bg */
+  --destructive-text: oklch(
+    0.44 0.2 28.8
+  ); /* ~#8B0000 — darkened for text on light bg */
 
   /* 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 */
+  --chart-1: oklch(0.59 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.16 94.6); /* #EECA34 — series/yellow */
+  --chart-4: oklch(0.702 0.192 39); /* #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 */
+  --brand-secondary: oklch(
+    0.238 0.023 246.1
+  ); /* #162029 — palette/secondary/main */
+  --brand-secondary-foreground: oklch(1 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 */
+  --sidebar: oklch(0.977 0.004 236.5); /* #F5F8FA */
+  --sidebar-foreground: oklch(0.152 0.02 235); /* #040D13 */
+  --sidebar-primary: oklch(0.894 0.208 163); /* #33FF99 — tenant primary */
+  --sidebar-primary-foreground: oklch(0.152 0.02 235); /* #040D13 */
+  --sidebar-accent: oklch(0.936 0.003 247.9); /* #E8EAEC */
+  --sidebar-accent-foreground: oklch(0.152 0.02 235); /* #040D13 */
+  --sidebar-border: oklch(0.936 0.003 247.9); /* #E8EAEC */
+  --sidebar-ring: oklch(0.465 0.032 241.8); /* #4A5C6A */
 }
 
 /* ==========================================================================
@@ -298,11 +525,11 @@
  * ========================================================================== */
 .dark {
   /* Core surfaces */
-  --background: oklch(0.188 0.013 248.5);     /* #0F1419 — dark navy */
-  --foreground: oklch(0.977 0.004 236.5);     /* #F5F8FA — light text */
+  --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: oklch(0.238 0.023 246.1); /* #162029 — secondary as dark card */
   --card-foreground: oklch(0.977 0.004 236.5);
 
   /* Popover */
@@ -310,57 +537,69 @@
   --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 */
+  --primary: oklch(0.894 0.208 163); /* #33FF99 — same green works on dark */
+  --primary-foreground: oklch(0.152 0.02 235); /* #040D13 */
 
   /* Secondary */
-  --secondary: oklch(0.278 0.023 241.1);      /* #1E2A33 */
+  --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 */
+  --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: oklch(0.314 0.03 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);
+  --destructive: oklch(0.712 0.181 22.8); /* #FF6B6B — brighter red for dark */
+  --destructive-foreground: oklch(0.152 0.02 235);
 
   /* 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 */
+  --border: oklch(0.314 0.03 246.9); /* #253340 */
+  --input: oklch(0.314 0.03 246.9);
+  --ring: oklch(0.894 0.208 163); /* #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);
+  --warning: oklch(0.829 0.145 73.5); /* #FFB74D */
+  --warning-foreground: oklch(0.152 0.02 235);
+  --warning-text: oklch(
+    0.829 0.145 73.5
+  ); /* dark mode: use the bright token directly — bg is dark */
+  --success: oklch(0.766 0.118 145.3); /* #81C784 */
+  --success-foreground: oklch(0.152 0.02 235);
+  --success-text: oklch(0.766 0.118 145.3);
+  --info: oklch(0.748 0.123 244.7); /* #64B5F6 */
+  --info-foreground: oklch(0.152 0.02 235);
+  --info-text: oklch(0.748 0.123 244.7);
+  --destructive-text: oklch(0.704 0.191 27.5); /* lighter red for dark bg */
 
   /* Chart series — same in dark */
-  --chart-1: oklch(0.590 0.217 261.8);
+  --chart-1: oklch(0.59 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-3: oklch(0.846 0.16 94.6);
+  --chart-4: oklch(0.702 0.192 39);
   --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 */
+  --brand-secondary: oklch(
+    0.314 0.03 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: 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-primary: oklch(0.894 0.208 163);
+  --sidebar-primary-foreground: oklch(0.152 0.02 235);
+  --sidebar-accent: oklch(0.314 0.03 246.9);
   --sidebar-accent-foreground: oklch(0.977 0.004 236.5);
-  --sidebar-border: oklch(0.314 0.030 246.9);
+  --sidebar-border: oklch(0.314 0.03 246.9);
   --sidebar-ring: oklch(0.465 0.032 241.8);
 }
 
@@ -383,7 +622,15 @@ textarea::selection {
  * 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; }
+[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;
+}