@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap");
@import "tailwindcss";
@import "tw-animate-css";

/* 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 flex-wrap gap-x-4 gap-y-1.5 mt-3 text-success-text text-warning-text text-destructive-text text-info-text");

@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-sm sm:max-w-md sm:max-w-lg sm:max-w-xl sm:max-w-2xl sm:max-w-3xl sm:max-w-4xl sm:max-w-full border-t pt-4 justify-end gap-1.5 aria-expanded:border-ring aria-expanded:ring-2 aria-expanded:ring-ring/20");

@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");

@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");
@source inline("bg-success/20 bg-warning/20 bg-destructive/20 bg-success bg-warning");

@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 {
  /* === 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);

  /* Primary shade palette — generated by ThemeProvider, fallbacks here for static CSS */
  --color-primary-50: var(--primary-50);
  --color-primary-100: var(--primary-100);
  --color-primary-200: var(--primary-200);
  --color-primary-300: var(--primary-300);
  --color-primary-400: var(--primary-400);
  --color-primary-500: var(--primary-500);
  --color-primary-600: var(--primary-600);
  --color-primary-700: var(--primary-700);
  --color-primary-800: var(--primary-800);
  --color-primary-900: var(--primary-900);
  --color-primary-950: var(--primary-950);
  --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 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 — maps to primary shades, defined in ThemeProvider === */
  /* Real values are injected by ThemeProvider via useThemeVars() / inline style.    */
  /* Do NOT use these :root fallbacks for production — they won't react to tenant.   */
  --color-stage-1: var(--primary-600);
  --color-stage-2: var(--primary-400);
  --color-stage-3: var(--primary-300);
  --color-stage-4: var(--primary-200);
  --color-stage-5: var(--primary-100);
  /* 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);
  --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;

  /* === WealthX additions: semantic spacing scale ===
   * Named entries in Tailwind's --spacing-* namespace, available across the whole
   * spacing utility surface: gap-text-pair, space-y-text-pair, mt-field, p-section, …
   * Tailwind emits only the utilities it finds in source, so an unused one is absent
   * from the compiled CSS by design.
   * Values chosen from the audit of 58 existing text-pair instances (branch feat/spacing-scale).
   * Use these for the RELATIONSHIP between elements; the numeric scale (gap-2, mt-4)
   * stays available for genuinely one-off layout. */
  --spacing-text-pair: 0.25rem; /* heading → its own sub-line / caption */
  --spacing-field: 0.5rem; /* label → its input */
  --spacing-stack: 1rem; /* sibling blocks within a section */
  --spacing-section: 1.5rem; /* between sections */

  /* === 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: 1.875rem;
  --typography-h1-leading: 2.25rem;
  --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.25rem;
  --typography-h4-leading: 1.625rem;
  --typography-h4-weight: 600;
  --typography-h5-size: 1.125rem;
  --typography-h5-leading: 1.5rem;
  --typography-h5-weight: 600;
  --typography-h6-size: 0.9375rem;
  --typography-h6-leading: 1.25rem;
  --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.9375rem;
  --typography-label-medium-leading: 1.25rem;
  --typography-label-medium-weight: 600;
  --typography-label-small-size: 0.8125rem;
  --typography-label-small-leading: 1.125rem;
  --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: 600;
  --typography-button-xs-size: 0.75rem;
  --typography-button-xs-leading: 1.25rem;
  --typography-button-xs-weight: 600;

  /* Utility */
  --typography-caption-size: 0.8125rem;
  --typography-caption-leading: 1.125rem;
  --typography-caption-weight: 500;
  --typography-overline-size: 0.75rem;
  --typography-overline-leading: 1rem;
  --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.625rem;
    --typography-h1-leading: 2rem;
    --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);
  }

  /* 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);
  }
}

/* ==========================================================================
 * 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 {
  --radius: 0; /* WealthX: sharp corners — no border radius */

  /* Core surfaces — from palette/background/* */
  --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 0 0); /* #FFFFFF */
  --card-foreground: oklch(0.152 0.02 235); /* #040D13 */

  /* Popover — from color/background/elevated */
  --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.
   * Shade palette (50–950) generated by generatePrimaryShades() in ThemeProvider. */
  --primary: oklch(0.894 0.208 163); /* #33FF99 — palette/primary/main */

  /* Primary shade palette — static fallbacks for WealthX default green.
   * ThemeProvider overrides these at runtime for each tenant. */
  --primary-50: oklch(0.971 0.021 163);
  --primary-100: oklch(0.944 0.042 163);
  --primary-200: oklch(0.887 0.083 163);
  --primary-300: oklch(0.808 0.125 163);
  --primary-400: oklch(0.72 0.156 163);
  --primary-500: oklch(0.646 0.156 163);
  --primary-600: oklch(0.57 0.146 163);
  --primary-700: oklch(0.48 0.125 163);
  --primary-800: oklch(0.39 0.104 163);
  --primary-900: oklch(0.31 0.073 163);
  --primary-950: oklch(0.24 0.052 163);
  --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.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 */

  /* 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.02 235); /* #040D13 */

  /* Destructive — error state */
  --destructive: oklch(
    0.48 0.215 28
  ); /* #C62828 — darkened for 4.5:1 with white */
  --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
  ); /* #33FF99 — primary (focus ring uses brand color) */

  /* WealthX custom: state colors
   * Base colors are darkened to achieve ≥4.5:1 contrast with white foreground.
   * *-text tokens are for colored text on light/white surfaces (not affected). */
  --warning: oklch(0.565 0.18 67); /* #B45309 — darkened for 4.5:1 with white */
  --warning-foreground: oklch(1 0 0); /* #FFFFFF */
  --warning-text: oklch(
    0.44 0.14 58
  ); /* ~#7A5200 — colored text on light bg (4.5:1 on white) */
  --success: oklch(
    0.485 0.145 145
  ); /* #2E7D32 — darkened for 4.5:1 with white */
  --success-foreground: oklch(1 0 0); /* #FFFFFF */
  --success-text: oklch(0.4 0.12 145); /* ~#1B5E20 — colored text on light bg */
  --info: oklch(0.465 0.19 252); /* #1565C0 — darkened for 4.5:1 with white */
  --info-foreground: oklch(1 0 0); /* #FFFFFF */
  --info-text: oklch(0.4 0.13 250); /* ~#0D47A1 — colored text on light bg */
  --destructive-text: oklch(
    0.44 0.2 28.8
  ); /* ~#8B0000 — colored text on light bg */

  /* Chart series — WealthX Charts collection */
  --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 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.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 */
}

/* ==========================================================================
 * 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 {
  /* 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); /* #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-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.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.02 235);

  /* Borders */
  --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.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.59 0.217 261.8);
  --chart-2: oklch(0.747 0.086 204.1);
  --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.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-foreground: oklch(0.977 0.004 236.5);
  --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.03 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;
}

/* DrawerFooter: stretch buttons to fill full row for bottom/top drawers */
[data-vaul-drawer-direction="bottom"] [data-slot="drawer-footer"] > *,
[data-vaul-drawer-direction="top"] [data-slot="drawer-footer"] > * {
  flex: 1 1 0%;
}