@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

package/src/styles/theme.css

@@ -1,381 +1,392 @@
 @theme {
-  /* Primary color palette - full 50-950 range */
-  --color-primary-50: oklch(0.962 0.018 272.314);
-  --color-primary-100: oklch(0.93 0.034 272.788);
-  --color-primary-200: oklch(0.87 0.065 274.039);
-  --color-primary-300: oklch(0.785 0.115 274.713);
-  --color-primary-400: oklch(0.673 0.182 276.935);
-  --color-primary-500: oklch(0.585 0.233 277.117);
-  --color-primary-600: oklch(0.511 0.262 276.966);
-  --color-primary-700: oklch(0.457 0.24 277.023);
-  --color-primary-800: oklch(0.398 0.195 277.366);
-  --color-primary-900: oklch(0.359 0.144 278.697);
-  --color-primary-950: oklch(0.257 0.09 281.288);
-
-  --color-primary: var(--color-primary-600);
-  --color-primary-contrast: var(--color-neutral-50);
-
-  /* Secondary color palette - Tailwind v4 gray */
-  --color-secondary-50: oklch(0.984 0.003 247.858);
-  --color-secondary-100: oklch(0.968 0.007 247.896);
-  --color-secondary-200: oklch(0.929 0.013 255.508);
-  --color-secondary-300: oklch(0.869 0.022 252.894);
-  --color-secondary-400: oklch(0.704 0.04 256.788);
-  --color-secondary-500: oklch(0.554 0.046 257.417);
-  --color-secondary-600: oklch(0.446 0.043 257.281);
-  --color-secondary-700: oklch(0.372 0.044 257.287);
-  --color-secondary-800: oklch(0.279 0.041 260.031);
-  --color-secondary-900: oklch(0.208 0.042 265.755);
-  --color-secondary-950: oklch(0.129 0.042 264.695);
-
-  --color-secondary: var(--color-secondary-600);
-  --color-secondary-contrast: var(--color-neutral-50);
-
-  /* Danger/Error color palette - full 50-950 range */
-  --color-danger-50: oklch(0.971 0.013 17.38);
-  --color-danger-100: oklch(0.936 0.032 17.717);
-  --color-danger-200: oklch(0.885 0.062 18.334);
-  --color-danger-300: oklch(0.808 0.114 19.571);
-  --color-danger-400: oklch(0.704 0.191 22.216);
-  --color-danger-500: oklch(0.637 0.237 25.331);
-  --color-danger-600: oklch(0.577 0.245 27.325);
-  --color-danger-700: oklch(0.505 0.213 27.518);
-  --color-danger-800: oklch(0.444 0.177 26.899);
-  --color-danger-900: oklch(0.396 0.141 25.723);
-  --color-danger-950: oklch(0.258 0.092 26.042);
-
-  --color-danger: var(--color-danger-600);
-  --color-danger-contrast: var(--color-neutral-50);
-
-  /* Success color palette - Tailwind v4 teal */
-  --color-success-50: oklch(0.984 0.014 180.72);
-  --color-success-100: oklch(0.953 0.051 180.801);
-  --color-success-200: oklch(0.91 0.096 180.426);
-  --color-success-300: oklch(0.855 0.138 181.071);
-  --color-success-400: oklch(0.777 0.152 181.912);
-  --color-success-500: oklch(0.704 0.14 182.503);
-  --color-success-600: oklch(0.6 0.118 184.704);
-  --color-success-700: oklch(0.511 0.096 186.391);
-  --color-success-800: oklch(0.437 0.078 188.216);
-  --color-success-900: oklch(0.386 0.063 188.416);
-  --color-success-950: oklch(0.277 0.046 192.524);
-
-  --color-success: var(--color-success-600);
-  --color-success-contrast: var(--color-neutral-50);
-
-  /* Warning color palette - full 50-950 range */
-  --color-warning-50: oklch(0.987 0.022 95.277);
-  --color-warning-100: oklch(0.962 0.059 95.617);
-  --color-warning-200: oklch(0.924 0.12 95.746);
-  --color-warning-300: oklch(0.879 0.169 91.605);
-  --color-warning-400: oklch(0.828 0.189 84.429);
-  --color-warning-500: oklch(0.769 0.188 70.08);
-  --color-warning-600: oklch(0.666 0.179 58.318);
-  --color-warning-700: oklch(0.555 0.163 48.998);
-  --color-warning-800: oklch(0.473 0.137 46.201);
-  --color-warning-900: oklch(0.414 0.112 45.904);
-  --color-warning-950: oklch(0.279 0.077 45.635);
-
-  --color-warning: var(--color-warning-600);
-  --color-warning-contrast: var(--color-neutral-50);
-
-  /* text color */
-  --color-text-primary: var(--color-neutral-950);
-  --color-text-secondary: var(--color-neutral-700);
-  --color-text-placeholder: var(--color-neutral-400);
-  --color-text-muted: var(--color-neutral-500);
-  --color-text-disabled: var(--color-neutral-400);
-  --color-text-inverse: var(--color-neutral-50);
-
-  /* generic colors */
-  --color-border: oklch(93% 0 0);
-  --color-border-secondary: oklch(87% 0 0);
-  /* Surface elevation ladder: surface-sunken < background (floor) < surface < surface-raised < surface-overlay.
-     In light mode raised surfaces are ~white (elevation via shadow + border); sunken is recessed below the floor. */
-  --color-surface-sunken: oklch(94% 0 0);
-  --color-surface: oklch(100% 0 0);
-  --color-surface-raised: oklch(100% 0 0);
-  --color-surface-overlay: oklch(100% 0 0);
-  /* Interaction fill (the one tokenized state): translucent tint so it composites correctly
+   /* Primary color palette - full 50-950 range */
+   --color-primary-50: oklch(0.962 0.018 272.314);
+   --color-primary-100: oklch(0.93 0.034 272.788);
+   --color-primary-200: oklch(0.87 0.065 274.039);
+   --color-primary-300: oklch(0.785 0.115 274.713);
+   --color-primary-400: oklch(0.673 0.182 276.935);
+   --color-primary-500: oklch(0.585 0.233 277.117);
+   --color-primary-600: oklch(0.511 0.262 276.966);
+   --color-primary-700: oklch(0.457 0.24 277.023);
+   --color-primary-800: oklch(0.398 0.195 277.366);
+   --color-primary-900: oklch(0.359 0.144 278.697);
+   --color-primary-950: oklch(0.257 0.09 281.288);
+
+   --color-primary: var(--color-primary-600);
+   --color-primary-contrast: var(--color-neutral-50);
+
+   /* Secondary color palette - Tailwind v4 gray */
+   --color-secondary-50: oklch(0.984 0.003 247.858);
+   --color-secondary-100: oklch(0.968 0.007 247.896);
+   --color-secondary-200: oklch(0.929 0.013 255.508);
+   --color-secondary-300: oklch(0.869 0.022 252.894);
+   --color-secondary-400: oklch(0.704 0.04 256.788);
+   --color-secondary-500: oklch(0.554 0.046 257.417);
+   --color-secondary-600: oklch(0.446 0.043 257.281);
+   --color-secondary-700: oklch(0.372 0.044 257.287);
+   --color-secondary-800: oklch(0.279 0.041 260.031);
+   --color-secondary-900: oklch(0.208 0.042 265.755);
+   --color-secondary-950: oklch(0.129 0.042 264.695);
+
+   --color-secondary: var(--color-secondary-600);
+   --color-secondary-contrast: var(--color-neutral-50);
+
+   /* Danger/Error color palette - full 50-950 range */
+   --color-danger-50: oklch(0.971 0.013 17.38);
+   --color-danger-100: oklch(0.936 0.032 17.717);
+   --color-danger-200: oklch(0.885 0.062 18.334);
+   --color-danger-300: oklch(0.808 0.114 19.571);
+   --color-danger-400: oklch(0.704 0.191 22.216);
+   --color-danger-500: oklch(0.637 0.237 25.331);
+   --color-danger-600: oklch(0.577 0.245 27.325);
+   --color-danger-700: oklch(0.505 0.213 27.518);
+   --color-danger-800: oklch(0.444 0.177 26.899);
+   --color-danger-900: oklch(0.396 0.141 25.723);
+   --color-danger-950: oklch(0.258 0.092 26.042);
+
+   --color-danger: var(--color-danger-600);
+   --color-danger-contrast: var(--color-neutral-50);
+
+   /* Success color palette - Tailwind v4 teal */
+   --color-success-50: oklch(0.984 0.014 180.72);
+   --color-success-100: oklch(0.953 0.051 180.801);
+   --color-success-200: oklch(0.91 0.096 180.426);
+   --color-success-300: oklch(0.855 0.138 181.071);
+   --color-success-400: oklch(0.777 0.152 181.912);
+   --color-success-500: oklch(0.704 0.14 182.503);
+   --color-success-600: oklch(0.6 0.118 184.704);
+   --color-success-700: oklch(0.511 0.096 186.391);
+   --color-success-800: oklch(0.437 0.078 188.216);
+   --color-success-900: oklch(0.386 0.063 188.416);
+   --color-success-950: oklch(0.277 0.046 192.524);
+
+   --color-success: var(--color-success-500);
+   --color-success-contrast: var(--color-neutral-50);
+
+   /* Warning color palette - full 50-950 range */
+   --color-warning-50: oklch(0.987 0.022 95.277);
+   --color-warning-100: oklch(0.962 0.059 95.617);
+   --color-warning-200: oklch(0.924 0.12 95.746);
+   --color-warning-300: oklch(0.879 0.169 91.605);
+   --color-warning-400: oklch(0.828 0.189 84.429);
+   --color-warning-500: oklch(0.769 0.188 70.08);
+   --color-warning-600: oklch(0.666 0.179 58.318);
+   --color-warning-700: oklch(0.555 0.163 48.998);
+   --color-warning-800: oklch(0.473 0.137 46.201);
+   --color-warning-900: oklch(0.414 0.112 45.904);
+   --color-warning-950: oklch(0.279 0.077 45.635);
+
+   --color-warning: var(--color-warning-600);
+   --color-warning-contrast: var(--color-neutral-50);
+
+   /* text color */
+   --color-text-primary: var(--color-neutral-950);
+   --color-text-secondary: var(--color-neutral-700);
+   --color-text-placeholder: var(--color-neutral-400);
+   --color-text-muted: var(--color-neutral-500);
+   --color-text-disabled: var(--color-neutral-400);
+   --color-text-inverse: var(--color-neutral-50);
+
+   /* generic colors */
+   --color-border: oklch(93% 0 0);
+   --color-border-secondary: oklch(87% 0 0);
+   /* Interaction border (hover/focus-adjacent) — darkens in light for a clear
+     edge, mirror of --color-surface-hover but on the border axis. */
+   --color-border-hover: oklch(80% 0 0);
+   /* Surface elevation ladder — elevation reads LIGHTER (monotonic, symmetric with dark mode).
+     Light mode: a soft neutral page (background, 96.5%) with WHITE cards (surface) lifting off it.
+     raised/overlay are also white — white is the ceiling, so levels above the card separate by
+     shadow + border (and modals by a dimmed backdrop), not by luminance. sunken (95%) is the
+     recessed well that lives INSIDE white cards (inputs, code, table zebra, tracks) — 5% below the
+     card, and also below the floor. */
+   --color-surface-sunken: oklch(97.5% 0 0);
+   --color-surface: oklch(100% 0 0);
+   /* white — Card, KPI, Table, Sidebar… lift off the gray floor */
+   --color-surface-raised: oklch(100% 0 0);
+   /* white — Modal/Drawer; pop via shadow + dimmed backdrop */
+   --color-surface-overlay: oklch(100% 0 0);
+   /* white — Dropdown/Popover/Tooltip; pop via shadow */
+   /* Interaction fill (the one tokenized state): translucent tint so it composites correctly
      over ANY surface level — darkens in light, lightens in dark. For hover/active highlights. */
-  --color-surface-hover: oklch(0% 0 0 / 0.05);
-  --color-chart-track: rgba(0, 0, 0, 0.06);
-  --color-background: oklch(98.5% 0.002 247.839);
-  /* DEPRECATED (remove next major): alias of --color-surface. Use the surface ladder. */
-  --color-background-secondary: var(--color-surface);
-  /* DEPRECATED (remove next major): recessed/subtle fills. Migrate per-usage to --color-surface-sunken
+   --color-surface-hover: oklch(0% 0 0 / 0.05);
+   --color-chart-track: rgba(0, 0, 0, 0.06);
+   --color-background: oklch(94.5% 0 0);
+   /* clearly-readable light-gray page canvas — white cards lift off it */
+   /* DEPRECATED (remove next major): alias of --color-surface. Use the surface ladder. */
+   --color-background-secondary: var(--color-surface);
+   /* DEPRECATED (remove next major): recessed/subtle fills. Migrate per-usage to --color-surface-sunken
      (dark values below are inverted vs. a correct sunken token, so no blind alias). */
-  --color-background-tertiary: oklch(90% 0.002 247.839);
-  --color-background-quaternary: oklch(85% 0.002 247.839);
-  --color-background-quinary: oklch(80% 0.002 247.839);
-  --color-background-disabled: var(--color-neutral-100);
-
-  --color-neutral-50: oklch(98.5% 0 0);
-  --color-neutral-100: oklch(97% 0 0);
-  --color-neutral-200: oklch(92.2% 0 0);
-  --color-neutral-300: oklch(87% 0 0);
-  --color-neutral-400: oklch(70.8% 0 0);
-  --color-neutral-500: oklch(55.6% 0 0);
-  --color-neutral-600: oklch(43.9% 0 0);
-  --color-neutral-700: oklch(37.1% 0 0);
-  --color-neutral-800: oklch(26.9% 0 0);
-  --color-neutral-900: oklch(20.5% 0 0);
-  --color-neutral-950: oklch(14.5% 0 0);
-
-  /* Font family variables */
-  --font-family-base: var(--font-sans);
-  --font-cursive: "Birthstone", cursive;
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-
-  /* Form element variables — fixed px so they don't scale with root font-size */
-  --form-min-h-sm: 32px;
-  /* h-8 in Tailwind */
-  --form-min-h-md: 40px;
-  /* h-10 in Tailwind */
-  --form-min-h-lg: 48px;
-  /* h-12 in Tailwind */
-
-  --form-label-pb: 8px;
-  /* pb-2 in Tailwind */
-
-  --form-px-sm: 12px;
-  /* px-3 in Tailwind */
-  --form-px-md: 14px;
-  /* px-3.5 in Tailwind */
-  --form-px-lg: 16px;
-  /* px-4 in Tailwind */
-
-  --form-py-sm: 8px;
-  /* py-1 in Tailwind */
-  --form-py-md: 10px;
-  /* py-2 in Tailwind */
-  --form-py-lg: 12px;
-  /* py-3 in Tailwind */
-
-  /* ============================================
+   --color-background-tertiary: oklch(90% 0.002 247.839);
+   --color-background-quaternary: oklch(85% 0.002 247.839);
+   --color-background-quinary: oklch(80% 0.002 247.839);
+   --color-background-disabled: var(--color-neutral-100);
+
+   --color-neutral-50: oklch(98.5% 0 0);
+   --color-neutral-100: oklch(97% 0 0);
+   --color-neutral-200: oklch(92.2% 0 0);
+   --color-neutral-300: oklch(87% 0 0);
+   --color-neutral-400: oklch(70.8% 0 0);
+   --color-neutral-500: oklch(55.6% 0 0);
+   --color-neutral-600: oklch(43.9% 0 0);
+   --color-neutral-700: oklch(37.1% 0 0);
+   --color-neutral-800: oklch(26.9% 0 0);
+   --color-neutral-900: oklch(20.5% 0 0);
+   --color-neutral-950: oklch(14.5% 0 0);
+
+   /* Font family variables */
+   --font-family-base: var(--font-sans);
+   --font-cursive: "Birthstone", cursive;
+   --font-weight-light: 300;
+   --font-weight-normal: 400;
+   --font-weight-medium: 500;
+   --font-weight-semibold: 600;
+   --font-weight-bold: 700;
+   --font-weight-extrabold: 800;
+
+   /* Form element variables — fixed px so they don't scale with root font-size */
+   --form-min-h-sm: 32px;
+   /* h-8 in Tailwind */
+   --form-min-h-md: 40px;
+   /* h-10 in Tailwind */
+   --form-min-h-lg: 48px;
+   /* h-12 in Tailwind */
+
+   --form-label-pb: 8px;
+   /* pb-2 in Tailwind */
+
+   --form-px-sm: 12px;
+   /* px-3 in Tailwind */
+   --form-px-md: 14px;
+   /* px-3.5 in Tailwind */
+   --form-px-lg: 16px;
+   /* px-4 in Tailwind */
+
+   --form-py-sm: 8px;
+   /* py-1 in Tailwind */
+   --form-py-md: 10px;
+   /* py-2 in Tailwind */
+   --form-py-lg: 12px;
+   /* py-3 in Tailwind */
+
+   /* ============================================
      BORDER RADIUS SYSTEM
      Change --radius-base to adjust the entire UI.
      Individual --*-radius variables can be overridden independently.
      ============================================ */
-  --radius-base: 8px;
-  /* Base radius token */
-
-  /* Forms & Controls (1x base = 8px) */
-  --form-radius: var(--radius-base);
-
-  /* Overlays (1.5x base = 12px) */
-  --dropdown-radius: calc(var(--radius-base) * 1.5);
-  --tooltip-radius: calc(var(--radius-base) / 2);
-  --codeblock-radius: calc(var(--radius-base) * 1.5);
-  --popover-radius: calc(var(--radius-base) * 1.5);
-
-  /* Feedback surfaces */
-  --alert-radius: calc(var(--radius-base) * 1.5);
-  --toast-radius: calc(var(--radius-base) * 2);
-  --drawer-radius: calc(var(--radius-base) * 2);
-  --metric-radius: calc(var(--radius-base) * 2);
-
-  /* Surfaces (3x base = 24px) */
-  --card-radius: calc(var(--radius-base) * 1.5);
-  --modal-radius: calc(var(--radius-base) * 1.5);
-
-  /* Special shapes - not part of scale */
-  --segmented-radius: var(--form-radius);
-  --avatar-radius: 50%;
-
-  /* Focus ring styling */
-  --form-focus-ring-width: 2px;
-  --form-focus-ring-offset: -1px;
-  --form-focus-ring-opacity: 0.1;
-
-  /* Outline/border styling */
-  --form-outline-width: 1px;
-  --form-outline-focused-width: 2px;
-
-  /* Button variables - inheriting from form variables */
-  --button-radius: var(--form-radius);
-  --button-min-h-sm: var(--form-min-h-sm);
-  --button-min-h-md: var(--form-min-h-md);
-  --button-min-h-lg: var(--form-min-h-lg);
-
-  /* Button padding — fixed px */
-  --button-px-sm: 12px;
-  --button-py-sm: 0;
-  --button-px-md: 14px;
-  --button-py-md: 0;
-  --button-px-lg: 20px;
-  --button-py-lg: 0;
-
-  /* Button icon-only padding — fixed px */
-  --button-icon-p-sm: 6px;
-  --button-icon-p-md: 8px;
-  --button-icon-p-lg: 10px;
-
-  /* Button icon-only sizes */
-  --button-icon-size-sm: var(--form-min-h-sm);
-  --button-icon-size-md: var(--form-min-h-md);
-  --button-icon-size-lg: var(--form-min-h-lg);
-
-  /* Badge variables */
-  --badge-radius: 6px;
-
-  /* Segmented variables - now defined in radius system above */
-  --segmented-min-h-sm: var(--form-min-h-sm);
-  --segmented-min-h-md: var(--form-min-h-md);
-  --segmented-min-h-lg: var(--form-min-h-lg);
-
-  /* Segmented padding */
-  --segmented-px-sm: 8px;
-  --segmented-px-md: 10px;
-  --segmented-px-lg: 12px;
-
-  --segmented-py-sm: var(--form-py-sm);
-  --segmented-py-md: var(--form-py-md);
-  --segmented-py-lg: var(--form-py-lg);
-
-  /* Segmented inner offset — drives wrapper padding AND inner radius so
+   --radius-base: 12px;
+   /* Base radius token */
+
+   /* Forms & Controls (1x base = 8px) */
+   --form-radius: var(--radius-base);
+
+   /* Overlays (1.5x base = 12px) */
+   --dropdown-radius: calc(var(--radius-base) * 1.5);
+   --tooltip-radius: calc(var(--radius-base) / 1);
+   --codeblock-radius: calc(var(--radius-base) * 1.5);
+   --popover-radius: calc(var(--radius-base) * 1.5);
+
+   /* Feedback surfaces */
+   --alert-radius: calc(var(--radius-base) * 1.5);
+   --toast-radius: calc(var(--radius-base) * 2);
+   --drawer-radius: calc(var(--radius-base) * 2);
+   --metric-radius: calc(var(--radius-base) * 2);
+
+   /* Surfaces (3x base = 24px) */
+   --card-radius: calc(var(--radius-base) * 1.5);
+   --modal-radius: calc(var(--radius-base) * 1.5);
+
+   /* Special shapes - not part of scale */
+   --segmented-radius: var(--form-radius);
+   --avatar-radius: 50%;
+
+   /* Focus ring styling */
+   --form-focus-ring-width: 2px;
+   --form-focus-ring-offset: -1px;
+   --form-focus-ring-opacity: 0.1;
+
+   /* Outline/border styling */
+   --form-outline-width: 1px;
+   --form-outline-focused-width: 2px;
+
+   /* Button variables - inheriting from form variables */
+   --button-radius: var(--form-radius);
+   --button-min-h-sm: var(--form-min-h-sm);
+   --button-min-h-md: var(--form-min-h-md);
+   --button-min-h-lg: var(--form-min-h-lg);
+
+   /* Button padding — fixed px */
+   --button-px-sm: 12px;
+   --button-py-sm: 0;
+   --button-px-md: 14px;
+   --button-py-md: 0;
+   --button-px-lg: 20px;
+   --button-py-lg: 0;
+
+   /* Button icon-only padding — fixed px */
+   --button-icon-p-sm: 6px;
+   --button-icon-p-md: 8px;
+   --button-icon-p-lg: 10px;
+
+   /* Button icon-only sizes */
+   --button-icon-size-sm: var(--form-min-h-sm);
+   --button-icon-size-md: var(--form-min-h-md);
+   --button-icon-size-lg: var(--form-min-h-lg);
+
+   /* Badge variables */
+   --badge-radius: 6px;
+
+   /* Segmented variables - now defined in radius system above */
+   --segmented-min-h-sm: var(--form-min-h-sm);
+   --segmented-min-h-md: var(--form-min-h-md);
+   --segmented-min-h-lg: var(--form-min-h-lg);
+
+   /* Segmented padding */
+   --segmented-px-sm: 8px;
+   --segmented-px-md: 10px;
+   --segmented-px-lg: 12px;
+
+   --segmented-py-sm: var(--form-py-sm);
+   --segmented-py-md: var(--form-py-md);
+   --segmented-py-lg: var(--form-py-lg);
+
+   /* Segmented inner offset — drives wrapper padding AND inner radius so
      the sliding background + items stay concentric with the outer shell.
      border (1px) + padding (--segmented-padding) = total inset. */
-  --segmented-padding: 0.125rem;
-  /* 2px */
-  --segmented-inner-radius: calc(var(--segmented-radius) - var(--segmented-padding) - 1px);
-
-  /* Segmented sliding background */
-  --segmented-active-bg: #ffffff;
-  --segmented-active-shadow:
-    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-
-  /* Glass effect variables */
-  --glass-layer-padding: 0.5px;
-  --glass-layer-border-width: 0.5px;
-  --glass-layer-inner-offset: 1.5px;
-
-  /* Glass effect gradient variables */
-  --glass-gradient-outer: linear-gradient(to bottom,
-      rgba(250, 250, 250, 0.8) 0%,
-      rgba(229, 229, 229, 0.8) 30%,
-      rgba(242, 242, 242, 0.8) 70%,
-      rgba(250, 250, 250, 0.8) 100%);
-  --glass-gradient-inner: linear-gradient(to bottom,
-      rgba(242, 242, 242, 0.8) 0%,
-      rgba(250, 250, 250, 0.8) 100%);
-
-  /* Chat message variables */
-  --chat-bubble-border-sender: rgba(255, 255, 255, 0.4);
-  --chat-bubble-border-receiver: rgba(255, 255, 255, 1);
-
-  /* Avatar variables — fixed px */
-  --avatar-size-xs: 24px;
-  /* size-6 in Tailwind */
-  --avatar-size-sm: 32px;
-  /* size-8 in Tailwind */
-  --avatar-size-md: 40px;
-  /* size-10 in Tailwind */
-  --avatar-size-lg: 48px;
-  /* size-12 in Tailwind */
-  --avatar-size-xl: 64px;
-  /* size-16 in Tailwind */
-
-  /* Avatar radius - now defined in radius system above */
-
-  /* Carousel Variables */
-  --carousel-container-width: 100%;
-  /* Full width container */
-  --carousel-slide-width: 66vw;
-  /* Default slide width - can be overridden */
-  --carousel-slide-height: 44rem;
-  /* 384px = h-96 */
-  --carousel-slide-gap: 16px;
-  /* gap between slides */
-  --carousel-controls-size: 48px;
-  /* control button size */
-  --carousel-controls-offset: 16px;
-  /* distance from edge */
-
-  /* Popover variables - radius now defined in radius system above */
-  --popover-shadow:
-    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --popover-border-width: 1px;
-  --popover-backdrop-opacity: 0.5;
-  --popover-offset-sm: 8px;
-  --popover-offset-md: 8px;
-  --popover-offset-lg: 12px;
-  --popover-max-width-sm: 256px;
-  --popover-max-width-md: 384px;
-  --popover-max-width-lg: 512px;
-  --popover-padding-sm: 12px;
-  --popover-padding-md: 12px;
-  --popover-padding-lg: 16px;
-
-  /* NavItem variables */
-  --nav-item-radius: var(--radius-base);
-  --nav-item-min-h: 40px;
-  /* h-10 in Tailwind */
-
-  /* NavItem padding — fixed px */
-  --nav-item-px: 12px;
-  /* px-3 in Tailwind */
-  --nav-item-py: 10px;
-  /* py-2.5 in Tailwind */
-
-  /* Modal and Drawer */
-  --overlay-bg: rgba(0, 0, 0, 0.65);
-  --overlay-blur: 2px;
-  --color-scale-background: oklch(0% 0 0);
-  /* backdrop behind scaled content */
-  /* Modal radius - now defined in radius system above */
-
-  /* Shadow color presets for utility generation */
-  --shadow-color-primary: var(--color-primary);
-  --shadow-color-success: var(--color-success);
-  --shadow-color-warning: var(--color-warning);
-  --shadow-color-danger: var(--color-danger);
-  --shadow-color-secondary: var(--color-secondary);
-
-  /* Neumorphic tokens — light mode (multi-layer realistic) */
-  --neu-raised-shadow:
-    1px 1px 2px rgba(0, 0, 0, 0.04), 3px 3px 6px rgba(0, 0, 0, 0.06),
-    6px 6px 14px rgba(0, 0, 0, 0.08), 12px 12px 28px rgba(0, 0, 0, 0.04),
-    -1px -1px 2px rgba(255, 255, 255, 0.5),
-    -3px -3px 6px rgba(255, 255, 255, 0.5),
-    -6px -6px 14px rgba(255, 255, 255, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.04);
-  --neu-inset-shadow:
-    inset 1px 1px 2px rgba(0, 0, 0, 0.06),
-    inset 2px 2px 4px rgba(0, 0, 0, 0.06),
-    inset 4px 4px 8px rgba(0, 0, 0, 0.05),
-    inset 8px 8px 16px rgba(0, 0, 0, 0.03),
-    inset -1px -1px 2px rgba(255, 255, 255, 0.5),
-    inset -3px -3px 6px rgba(255, 255, 255, 0.4),
-    inset -6px -6px 12px rgba(255, 255, 255, 0.2),
-    0 1px 0 rgba(255, 255, 255, 0.5);
-  --neu-circle-groove-shadow:
-    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.08),
-    inset 1px 1px 3px rgba(0, 0, 0, 0.08),
-    inset 2px 2px 5px rgba(0, 0, 0, 0.04), 0.5px 0.5px 1px rgba(0, 0, 0, 0.4),
-    1px 1px 2px rgba(0, 0, 0, 0.3);
-  --neu-circle-disc-shadow:
-    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.05),
-    inset 1px 1px 3px rgba(0, 0, 0, 0.04),
-    inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.4),
-    inset -1px -1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.06),
-    0 2px 4px rgba(0, 0, 0, 0.04);
-  --neu-raised-border: linear-gradient(145deg,
-      rgba(255, 255, 255, 0.7) 0%,
-      rgba(255, 255, 255, 0.35) 30%,
-      transparent 50%,
-      rgba(0, 0, 0, 0.06) 100%);
-  --neu-inset-border: linear-gradient(180deg,
-      rgba(0, 0, 0, 0.1) 0%,
-      rgba(0, 0, 0, 0.04) 25%,
-      rgba(255, 255, 255, 0.15) 50%,
-      rgba(255, 255, 255, 0.35) 75%,
-      rgba(255, 255, 255, 0.5) 100%);
+   --segmented-padding: 0.125rem;
+   /* 2px */
+   --segmented-inner-radius: calc(var(--segmented-radius) - var(--segmented-padding) - 1px);
+
+   /* Segmented sliding background */
+   --segmented-active-bg: #ffffff;
+   --segmented-active-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+   /* Glass effect variables */
+   --glass-layer-padding: 0.5px;
+   --glass-layer-border-width: 0.5px;
+   --glass-layer-inner-offset: 1.5px;
+
+   /* Glass effect gradient variables */
+   --glass-gradient-outer: linear-gradient(to bottom,
+         rgba(250, 250, 250, 0.8) 0%,
+         rgba(229, 229, 229, 0.8) 30%,
+         rgba(242, 242, 242, 0.8) 70%,
+         rgba(250, 250, 250, 0.8) 100%);
+   --glass-gradient-inner: linear-gradient(to bottom,
+         rgba(242, 242, 242, 0.8) 0%,
+         rgba(250, 250, 250, 0.8) 100%);
+
+   /* Chat message variables */
+   --chat-bubble-border-sender: rgba(255, 255, 255, 0.4);
+   --chat-bubble-border-receiver: rgba(255, 255, 255, 1);
+
+   /* Avatar variables — fixed px */
+   --avatar-size-xs: 24px;
+   /* size-6 in Tailwind */
+   --avatar-size-sm: 32px;
+   /* size-8 in Tailwind */
+   --avatar-size-md: 40px;
+   /* size-10 in Tailwind */
+   --avatar-size-lg: 48px;
+   /* size-12 in Tailwind */
+   --avatar-size-xl: 64px;
+   /* size-16 in Tailwind */
+
+   /* Avatar radius - now defined in radius system above */
+
+   /* Carousel Variables */
+   --carousel-container-width: 100%;
+   /* Full width container */
+   --carousel-slide-width: 66vw;
+   /* Default slide width - can be overridden */
+   --carousel-slide-height: 44rem;
+   /* 384px = h-96 */
+   --carousel-slide-gap: 16px;
+   /* gap between slides */
+   --carousel-controls-size: 48px;
+   /* control button size */
+   --carousel-controls-offset: 16px;
+   /* distance from edge */
+
+   /* Popover variables - radius now defined in radius system above */
+   --popover-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+   --popover-border-width: 1px;
+   --popover-backdrop-opacity: 0.5;
+   --popover-offset-sm: 8px;
+   --popover-offset-md: 8px;
+   --popover-offset-lg: 12px;
+   --popover-max-width-sm: 256px;
+   --popover-max-width-md: 384px;
+   --popover-max-width-lg: 512px;
+   --popover-padding-sm: 12px;
+   --popover-padding-md: 12px;
+   --popover-padding-lg: 16px;
+
+   /* NavItem variables */
+   --nav-item-radius: var(--radius-base);
+   --nav-item-min-h: 40px;
+   /* h-10 in Tailwind */
+
+   /* NavItem padding — fixed px */
+   --nav-item-px: 12px;
+   /* px-3 in Tailwind */
+   --nav-item-py: 10px;
+   /* py-2.5 in Tailwind */
+
+   /* Modal and Drawer */
+   --overlay-bg: rgba(0, 0, 0, 0.65);
+   --overlay-blur: 8px;
+   --color-scale-background: oklch(0% 0 0);
+   /* backdrop behind scaled content */
+   /* Modal radius - now defined in radius system above */
+
+   /* Shadow color presets for utility generation */
+   --shadow-color-primary: var(--color-primary);
+   --shadow-color-success: var(--color-success);
+   --shadow-color-warning: var(--color-warning);
+   --shadow-color-danger: var(--color-danger);
+   --shadow-color-secondary: var(--color-secondary);
+
+   /* Neumorphic tokens — light mode (multi-layer realistic) */
+   --neu-raised-shadow:
+      1px 1px 2px rgba(0, 0, 0, 0.04), 3px 3px 6px rgba(0, 0, 0, 0.06),
+      6px 6px 14px rgba(0, 0, 0, 0.08), 12px 12px 28px rgba(0, 0, 0, 0.04),
+      -1px -1px 2px rgba(255, 255, 255, 0.5),
+      -3px -3px 6px rgba(255, 255, 255, 0.5),
+      -6px -6px 14px rgba(255, 255, 255, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.04);
+   --neu-inset-shadow:
+      inset 1px 1px 2px rgba(0, 0, 0, 0.06),
+      inset 2px 2px 4px rgba(0, 0, 0, 0.06),
+      inset 4px 4px 8px rgba(0, 0, 0, 0.05),
+      inset 8px 8px 16px rgba(0, 0, 0, 0.03),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.5),
+      inset -3px -3px 6px rgba(255, 255, 255, 0.4),
+      inset -6px -6px 12px rgba(255, 255, 255, 0.2),
+      0 1px 0 rgba(255, 255, 255, 0.5);
+   --neu-circle-groove-shadow:
+      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.08),
+      inset 1px 1px 3px rgba(0, 0, 0, 0.08),
+      inset 2px 2px 5px rgba(0, 0, 0, 0.04), 0.5px 0.5px 1px rgba(0, 0, 0, 0.4),
+      1px 1px 2px rgba(0, 0, 0, 0.3);
+   --neu-circle-disc-shadow:
+      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.05),
+      inset 1px 1px 3px rgba(0, 0, 0, 0.04),
+      inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.4),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.06),
+      0 2px 4px rgba(0, 0, 0, 0.04);
+   --neu-raised-border: linear-gradient(145deg,
+         rgba(255, 255, 255, 0.7) 0%,
+         rgba(255, 255, 255, 0.35) 30%,
+         transparent 50%,
+         rgba(0, 0, 0, 0.06) 100%);
+   --neu-inset-border: linear-gradient(180deg,
+         rgba(0, 0, 0, 0.1) 0%,
+         rgba(0, 0, 0, 0.04) 25%,
+         rgba(255, 255, 255, 0.15) 50%,
+         rgba(255, 255, 255, 0.35) 75%,
+         rgba(255, 255, 255, 0.5) 100%);
 }
 
 /* ============================================
@@ -390,109 +401,331 @@
    Tailwind's generated theme styles.
    ============================================ */
 @layer theme {
-  .dark {
-    /* Text colors - inverted for dark backgrounds */
-
-    --color-text-primary: var(--color-neutral-50);
-    --color-text-secondary: var(--color-neutral-400);
-    --color-text-placeholder: var(--color-neutral-600);
-    --color-text-muted: var(--color-neutral-600);
-    --color-text-disabled: var(--color-neutral-400);
-    --color-text-inverse: var(--color-neutral-950);
-
-    /* Base theme colors */
-    --color-primary: var(--color-primary-600);
-    --color-success: var(--color-success-400);
-    --color-warning: var(--color-warning-400);
-    --color-danger: var(--color-danger-400);
-    --color-secondary: var(--color-secondary-400);
-
-    /* Contrast colors for filled variants on semantic backgrounds */
-    --color-primary-contrast: var(--color-neutral-50);
-    --color-danger-contrast: var(--color-neutral-50);
-    --color-success-contrast: var(--color-neutral-50);
-    --color-warning-contrast: var(--color-neutral-50);
-    --color-secondary-contrast: var(--color-neutral-50);
-
-    /* Background colors - dark equivalents */
-    /* Surface elevation ladder: sunken sits below the floor; surface levels ascend so each reads as raised. */
-    --color-surface-sunken: oklch(13% 0 0);
-    --color-surface: oklch(18% 0 0);
-    --color-surface-raised: oklch(22% 0 0);
-    --color-surface-overlay: oklch(25% 0 0);
-    --color-surface-hover: oklch(100% 0 0 / 0.07);
-    --color-background: oklch(14.5% 0 0);
-    /* DEPRECATED (remove next major): alias of --color-surface. */
-    --color-background-secondary: var(--color-surface);
-    /* DEPRECATED (remove next major): migrate per-usage to --color-surface-sunken / surface ladder. */
-    --color-background-tertiary: oklch(22% 0 0);
-    --color-background-quaternary: oklch(26% 0 0);
-    --color-background-quinary: oklch(30% 0 0);
-    --color-background-disabled: var(--color-neutral-800);
-
-    /* Scale backdrop */
-    --color-scale-background: oklch(8% 0 0);
-
-    /* Border - darker for dark mode */
-    --color-border: oklch(30% 0 0 / 0.8);
-    --color-border-secondary: oklch(35% 0 0 / 0.8);
-    --color-chart-track: rgba(255, 255, 255, 0.05);
-
-    /* Glass effect gradients - dark mode */
-    --glass-gradient-outer: linear-gradient(135deg,
-        var(--color-background-tertiary) 0%,
-        var(--color-background-secondary) 30%,
-        var(--color-background) 70%,
-        var(--color-background-tertiary) 100%);
-    --glass-gradient-inner: linear-gradient(to bottom,
-        var(--color-background-secondary) 0%,
-        var(--color-background) 100%);
-
-    /* Scrollbar - dark mode */
-    --ui-scrollbar-thumb-rest: rgba(75, 85, 99, 0.3);
-    --ui-scrollbar-thumb-active: rgb(75 85 99);
-    --ui-scrollbar-track-rest: transparent;
-    --ui-scrollbar-track-active: rgba(55, 65, 81, 0.1);
-
-    /* Neumorphic tokens — dark mode (multi-layer realistic) */
-    --neu-raised-shadow:
-      1px 1px 2px rgba(0, 0, 0, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.25),
-      6px 6px 14px rgba(0, 0, 0, 0.2), 12px 12px 28px rgba(0, 0, 0, 0.1),
-      -1px -1px 2px rgba(255, 255, 255, 0.02),
-      -3px -3px 6px rgba(255, 255, 255, 0.015),
-      -6px -6px 14px rgba(255, 255, 255, 0.01),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04),
-      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-    --neu-inset-shadow:
-      inset 1px 1px 2px rgba(0, 0, 0, 0.3),
-      inset 2px 2px 4px rgba(0, 0, 0, 0.25),
-      inset 4px 4px 8px rgba(0, 0, 0, 0.2),
-      inset 8px 8px 16px rgba(0, 0, 0, 0.1),
-      inset -1px -1px 2px rgba(255, 255, 255, 0.02),
-      inset -3px -3px 6px rgba(255, 255, 255, 0.015),
-      0 1px 0 rgba(255, 255, 255, 0.04);
-    --neu-circle-groove-shadow:
-      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.4),
-      inset 1px 1px 2px rgba(0, 0, 0, 0.35),
-      inset 2px 2px 5px rgba(0, 0, 0, 0.2),
-      0.5px 0.5px 1px rgba(255, 255, 255, 0.04),
-      1px 1px 2px rgba(255, 255, 255, 0.03);
-    --neu-circle-disc-shadow:
-      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),
-      inset 1px 1px 3px rgba(0, 0, 0, 0.15),
-      inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.04),
-      inset -1px -1px 2px rgba(255, 255, 255, 0.03),
-      0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
-    --neu-raised-border: linear-gradient(145deg,
-        rgba(255, 255, 255, 0.2) 0%,
-        rgba(255, 255, 255, 0.08) 30%,
-        transparent 50%,
-        rgba(0, 0, 0, 0.12) 100%);
-    --neu-inset-border: linear-gradient(180deg,
-        rgba(0, 0, 0, 0.4) 0%,
-        rgba(0, 0, 0, 0.15) 25%,
-        rgba(255, 255, 255, 0.03) 50%,
-        rgba(255, 255, 255, 0.08) 75%,
-        rgba(255, 255, 255, 0.12) 100%);
-  }
+
+   /* Scrollbar - light mode defaults.
+     These MUST live in @layer theme (not @layer base) alongside the .dark
+     override below. The layer order is `theme, base, ...`, so values in
+     @layer base win over @layer theme — if these defaults sat in base, the
+     .dark override here would never apply and the scrollbar would render with
+     the light (bright) thumb in dark mode. Keeping both in @layer theme means
+     the .dark block (later source order, equal specificity) wins. */
+   :root {
+      /* Tell the UA which palette to paint native chrome (scrollbars, form
+       controls, etc.). Our custom `::-webkit-scrollbar` track/thumb are mostly
+       transparent, so without this the browser composites its *default light*
+       scrollbar underneath — in dark mode the visible (active) track then reads
+       as an opaque white bar showing through the faint dark tint. `.dark` flips
+       this to `dark` below so the UA scrollbar matches the surface. */
+      color-scheme: light;
+      --ui-scrollbar-size: 4px;
+      --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.3);
+      --ui-scrollbar-thumb-active: rgb(209 213 219);
+      --ui-scrollbar-track-rest: transparent;
+      --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
+   }
+
+   /* Realistic layered elevation shadows — light mode (source of truth).
+     Consumed by `@utility shadow-real-*` / `shadow-inner-real-*` in global.scss.
+     Tokenized here (NOT inline in the utility) so the `.dark` block below can
+     swap them — faint multi-layer black reads on light surfaces but is invisible
+     on the near-black dark floor, so dark gets a depth-pool + top-rim treatment.
+     🔴 Named --elevation-* on purpose, NOT --shadow-*: a `--shadow-*` theme
+     property makes Tailwind v4 auto-generate a colliding `shadow-*` utility. */
+   :root {
+      --elevation-real-sm:
+         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         0.1px 3.6px 3.2px -4.1px rgba(0, 0, 0, 0.08);
+      --elevation-real-md:
+         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         0.1px 3.7px 3.3px -2px rgba(0, 0, 0, 0.09),
+         0.4px 18.2px 16.2px -4.1px rgba(0, 0, 0, 0.06);
+      --elevation-real-lg:
+         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         0.1px 3.6px 3.2px -0.8px rgba(0, 0, 0, 0.06),
+         0.2px 9.5px 8.5px -1.6px rgba(0, 0, 0, 0.06),
+         0.5px 22.6px 20.2px -2.4px rgba(0, 0, 0, 0.05),
+         1.1px 47.3px 42.2px -3.2px rgba(0, 0, 0, 0.04),
+         2.1px 87.7px 78.3px -4.1px rgba(0, 0, 0, 0.03);
+      --elevation-real-xl:
+         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         0.2px 4.8px 4.3px -0.5px rgba(0, 0, 0, 0.06),
+         0.4px 11.2px 10px -1px rgba(0, 0, 0, 0.06),
+         0.7px 21.3px 19px -1.5px rgba(0, 0, 0, 0.05),
+         1.2px 38.4px 34.3px -2px rgba(0, 0, 0, 0.05),
+         2px 64.6px 57.7px -2.5px rgba(0, 0, 0, 0.04),
+         3.1px 102.1px 91.2px -3px rgba(0, 0, 0, 0.03),
+         4.7px 154.3px 137.8px -3.5px rgba(0, 0, 0, 0.03),
+         6.8px 222.5px 198.7px -4.1px rgba(0, 0, 0, 0.02);
+      --elevation-real-2xl:
+         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         0.3px 6.2px 5.5px -0.3px rgba(0, 0, 0, 0.06),
+         0.6px 14.8px 13.2px -0.6px rgba(0, 0, 0, 0.06),
+         1px 27.1px 24.2px -0.9px rgba(0, 0, 0, 0.06),
+         1.6px 45.2px 40.4px -1.2px rgba(0, 0, 0, 0.05),
+         2.5px 70.3px 62.8px -1.5px rgba(0, 0, 0, 0.05),
+         3.7px 104.2px 93.1px -1.8px rgba(0, 0, 0, 0.04),
+         5.4px 148.9px 133px -2.1px rgba(0, 0, 0, 0.04),
+         7.6px 207.4px 185.3px -2.4px rgba(0, 0, 0, 0.03),
+         10.4px 283.8px 253.5px -2.7px rgba(0, 0, 0, 0.03),
+         14px 381.6px 340.9px -3px rgba(0, 0, 0, 0.02),
+         18.4px 503.7px 450px -3.3px rgba(0, 0, 0, 0.02);
+      --elevation-real-3xl:
+         0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         0.4px 8.1px 7.2px -0.2px rgba(0, 0, 0, 0.06),
+         0.8px 19.3px 17.2px -0.4px rgba(0, 0, 0, 0.06),
+         1.3px 34.8px 31.1px -0.6px rgba(0, 0, 0, 0.06),
+         2px 55.2px 49.3px -0.8px rgba(0, 0, 0, 0.06),
+         3px 81.7px 73px -1px rgba(0, 0, 0, 0.05),
+         4.3px 115.8px 103.4px -1.2px rgba(0, 0, 0, 0.05),
+         6px 158.9px 142px -1.4px rgba(0, 0, 0, 0.05),
+         8.2px 212.4px 189.7px -1.6px rgba(0, 0, 0, 0.04),
+         10.9px 278.8px 249.1px -1.8px rgba(0, 0, 0, 0.04),
+         14.2px 360.5px 322.1px -2px rgba(0, 0, 0, 0.03),
+         18.2px 460.1px 411px -2.2px rgba(0, 0, 0, 0.03),
+         23px 579.9px 518px -2.4px rgba(0, 0, 0, 0.02),
+         28.7px 722.4px 645.3px -2.6px rgba(0, 0, 0, 0.02),
+         35.3px 890.8px 796px -2.8px rgba(0, 0, 0, 0.02);
+
+      --elevation-inner-real-sm:
+         inset 0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         inset 0px 3.6px 3.2px -1.5px rgba(0, 0, 0, 0.08);
+      --elevation-inner-real-md:
+         inset 0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         inset 0px 3.7px 3.3px -2px rgba(0, 0, 0, 0.09),
+         inset 0px 18.2px 16.2px -4.1px rgba(0, 0, 0, 0.06);
+      --elevation-inner-real-lg:
+         inset 0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         inset 0px 3.6px 3.2px -0.8px rgba(0, 0, 0, 0.06),
+         inset 0px 9.5px 8.5px -1.6px rgba(0, 0, 0, 0.06),
+         inset 0px 22.6px 20.2px -2.4px rgba(0, 0, 0, 0.05),
+         inset 0px 47.3px 42.2px -3.2px rgba(0, 0, 0, 0.04),
+         inset 0px 87.7px 78.3px -4.1px rgba(0, 0, 0, 0.03);
+      --elevation-inner-real-xl:
+         inset 0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         inset 0px 4.8px 4.3px -0.5px rgba(0, 0, 0, 0.06),
+         inset 0px 11.2px 10px -1px rgba(0, 0, 0, 0.06),
+         inset 0px 21.3px 19px -1.5px rgba(0, 0, 0, 0.05),
+         inset 0px 38.4px 34.3px -2px rgba(0, 0, 0, 0.05),
+         inset 0px 64.6px 57.7px -2.5px rgba(0, 0, 0, 0.04),
+         inset 0px 102.1px 91.2px -3px rgba(0, 0, 0, 0.03),
+         inset 0px 154.3px 137.8px -3.5px rgba(0, 0, 0, 0.03),
+         inset 0px 222.5px 198.7px -4.1px rgba(0, 0, 0, 0.02);
+      --elevation-inner-real-2xl:
+         inset 0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         inset 0px 6.2px 5.5px -0.3px rgba(0, 0, 0, 0.06),
+         inset 0px 14.8px 13.2px -0.6px rgba(0, 0, 0, 0.06),
+         inset 0px 27.1px 24.2px -0.9px rgba(0, 0, 0, 0.06),
+         inset 0px 45.2px 40.4px -1.2px rgba(0, 0, 0, 0.05),
+         inset 0px 70.3px 62.8px -1.5px rgba(0, 0, 0, 0.05),
+         inset 0px 104.2px 93.1px -1.8px rgba(0, 0, 0, 0.04),
+         inset 0px 148.9px 133px -2.1px rgba(0, 0, 0, 0.04),
+         inset 0px 207.4px 185.3px -2.4px rgba(0, 0, 0, 0.03),
+         inset 0px 283.8px 253.5px -2.7px rgba(0, 0, 0, 0.03),
+         inset 0px 381.6px 340.9px -3px rgba(0, 0, 0, 0.02),
+         inset 0px 503.7px 450px -3.3px rgba(0, 0, 0, 0.02);
+      --elevation-inner-real-3xl:
+         inset 0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+         inset 0px 8.1px 7.2px -0.2px rgba(0, 0, 0, 0.06),
+         inset 0px 19.3px 17.2px -0.4px rgba(0, 0, 0, 0.06),
+         inset 0px 34.8px 31.1px -0.6px rgba(0, 0, 0, 0.06),
+         inset 0px 55.2px 49.3px -0.8px rgba(0, 0, 0, 0.06),
+         inset 0px 81.7px 73px -1px rgba(0, 0, 0, 0.05),
+         inset 0px 115.8px 103.4px -1.2px rgba(0, 0, 0, 0.05),
+         inset 0px 158.9px 142px -1.4px rgba(0, 0, 0, 0.05),
+         inset 0px 212.4px 189.7px -1.6px rgba(0, 0, 0, 0.04),
+         inset 0px 278.8px 249.1px -1.8px rgba(0, 0, 0, 0.04),
+         inset 0px 360.5px 322.1px -2px rgba(0, 0, 0, 0.03),
+         inset 0px 460.1px 411px -2.2px rgba(0, 0, 0, 0.03),
+         inset 0px 579.9px 518px -2.4px rgba(0, 0, 0, 0.02),
+         inset 0px 722.4px 645.3px -2.6px rgba(0, 0, 0, 0.02),
+         inset 0px 890.8px 796px -2.8px rgba(0, 0, 0, 0.02);
+   }
+
+   .dark {
+      /* Paint native UA chrome (scrollbars, form controls) with the dark palette.
+       Pairs with `color-scheme: light` on :root — fixes the white native
+       scrollbar track that showed through our transparent custom track in dark
+       mode (Select, RichTextEditor dropdowns, any native-overflow surface). */
+      color-scheme: dark;
+
+      /* Text colors - inverted for dark backgrounds */
+
+      /* Neutral text ramp (Linear's text reads essentially neutral off-white;
+       slate was too blue against the low-chroma surfaces). */
+      --color-text-primary: var(--color-neutral-50);
+      --color-text-secondary: var(--color-neutral-400);
+      --color-text-placeholder: var(--color-neutral-600);
+      --color-text-muted: var(--color-neutral-600);
+      --color-text-disabled: var(--color-neutral-400);
+      --color-text-inverse: var(--color-neutral-950);
+
+      /* Base theme colors */
+      --color-primary: var(--color-primary-500);
+      --color-success: var(--color-success-400);
+      --color-warning: var(--color-warning-400);
+      --color-danger: var(--color-danger-400);
+      --color-secondary: var(--color-secondary-400);
+
+      /* Contrast colors for filled variants on semantic backgrounds */
+      --color-primary-contrast: var(--color-neutral-50);
+      --color-danger-contrast: var(--color-neutral-50);
+      --color-success-contrast: var(--color-neutral-50);
+      --color-warning-contrast: var(--color-neutral-50);
+      --color-secondary-contrast: var(--color-neutral-50);
+
+      /* Background colors - dark equivalents */
+      /* Surface elevation ladder. With a near-black floor (#010102, 6.9%), sunken
+       can't recess *below* the floor — it sits between background and surface,
+       recessed relative to the cards where wells/tracks/code/zebra actually live
+       (that's its real job). surface → raised → overlay ascend so each reads lifted.
+       Derived from hex: 0f1011 / 141516 / 18191a; faint cool tint (chroma ~0.003, hue ~248). */
+      --color-surface-sunken: oklch(12% 0.003 248);
+      --color-surface: oklch(17.2% 0.003 248);
+      --color-surface-raised: oklch(19.5% 0.003 248);
+      --color-surface-overlay: oklch(21.3% 0.003 248);
+      --color-surface-hover: oklch(100% 0 0 / 0.07);
+      --color-background: oklch(6.9% 0.008 284);
+      /* #010102 — true-black canvas */
+      /* DEPRECATED (remove next major): alias of --color-surface. */
+      --color-background-secondary: var(--color-surface);
+      /* DEPRECATED (remove next major): migrate per-usage to --color-surface-sunken / surface ladder. */
+      --color-background-tertiary: oklch(22% 0 0);
+      --color-background-quaternary: oklch(26% 0 0);
+      --color-background-quinary: oklch(30% 0 0);
+      --color-background-disabled: var(--color-neutral-800);
+
+      /* Scale backdrop — sits behind scaled content, darker than the near-black floor */
+      --color-scale-background: oklch(3% 0.006 280);
+
+      /* Border - Linear-style subtle light hairline (a faint lift that catches
+       light on the dark surface, rather than a flat mid-gray line). */
+      --color-border: oklch(100% 0.01 255 / 0.05);
+      --color-border-secondary: oklch(100% 0.01 255 / 0.10);
+      /* Interaction border — lightens in dark (higher alpha) so an edge "lifts"
+       on hover, matching the --color-surface-hover lighten-in-dark behavior. */
+      --color-border-hover: oklch(100% 0.01 255 / 0.18);
+
+      /* Realistic elevation shadows — dark mode. Faint black is invisible on the
+       near-black floor, so light's 6–15-layer penumbra is replaced by a stronger
+       black "depth-pool" (alpha 0.40–0.60) + a 1px white TOP RIM (inset 0 1px 0)
+       that defines the lit top edge — the primary "raised panel" cue in dark UIs
+       (Linear/GitHub/Radix). Rim alpha grows slightly with elevation. */
+      --elevation-real-sm:
+         inset 0 1px 0 rgba(255, 255, 255, 0.05),
+         0 1px 2px rgba(0, 0, 0, 0.40),
+         0 2px 6px -1px rgba(0, 0, 0, 0.45);
+      --elevation-real-md:
+         inset 0 1px 0 rgba(255, 255, 255, 0.06),
+         0 1px 2px rgba(0, 0, 0, 0.40),
+         0 4px 10px -2px rgba(0, 0, 0, 0.45),
+         0 8px 20px -4px rgba(0, 0, 0, 0.40);
+      --elevation-real-lg:
+         inset 0 1px 0 rgba(255, 255, 255, 0.06),
+         0 1px 2px rgba(0, 0, 0, 0.45),
+         0 8px 18px -4px rgba(0, 0, 0, 0.50),
+         0 16px 36px -6px rgba(0, 0, 0, 0.42);
+      --elevation-real-xl:
+         inset 0 1px 0 rgba(255, 255, 255, 0.07),
+         0 1px 3px rgba(0, 0, 0, 0.50),
+         0 12px 28px -6px rgba(0, 0, 0, 0.55),
+         0 28px 56px -10px rgba(0, 0, 0, 0.45);
+      --elevation-real-2xl:
+         inset 0 1px 0 rgba(255, 255, 255, 0.07),
+         0 2px 4px rgba(0, 0, 0, 0.50),
+         0 18px 40px -8px rgba(0, 0, 0, 0.55),
+         0 40px 80px -14px rgba(0, 0, 0, 0.48);
+      --elevation-real-3xl:
+         inset 0 1px 0 rgba(255, 255, 255, 0.08),
+         0 2px 6px rgba(0, 0, 0, 0.55),
+         0 28px 60px -10px rgba(0, 0, 0, 0.60),
+         0 60px 120px -20px rgba(0, 0, 0, 0.50);
+
+      /* Inset/recessed in dark: a black inset barely shows on the near-black floor
+       (same reason outer shadows fail), so the recess is carried by the WHITE
+       BOTTOM LIP — light pooling on the well's lower inner edge is the readable
+       "carved" cue in dark (inverse of the outer set's top rim). The white lip is
+       the primary signal here, NOT the black; the black inset only adds in-card
+       depth where the well sits on a lighter card. */
+      --elevation-inner-real-sm:
+         inset 0 1px 2px rgba(0, 0, 0, 0.30),
+         inset 0 -1px 0 rgba(255, 255, 255, 0.09);
+      --elevation-inner-real-md:
+         inset 0 1px 2px rgba(0, 0, 0, 0.30),
+         inset 0 3px 6px -1px rgba(0, 0, 0, 0.30),
+         inset 0 -1px 0 rgba(255, 255, 255, 0.10);
+      --elevation-inner-real-lg:
+         inset 0 2px 4px rgba(0, 0, 0, 0.32),
+         inset 0 6px 12px -2px rgba(0, 0, 0, 0.30),
+         inset 0 -1px 0 rgba(255, 255, 255, 0.10);
+      --elevation-inner-real-xl:
+         inset 0 2px 5px rgba(0, 0, 0, 0.35),
+         inset 0 10px 20px -4px rgba(0, 0, 0, 0.32),
+         inset 0 -1px 0 rgba(255, 255, 255, 0.11);
+      --elevation-inner-real-2xl:
+         inset 0 3px 6px rgba(0, 0, 0, 0.38),
+         inset 0 14px 28px -6px rgba(0, 0, 0, 0.34),
+         inset 0 -1px 0 rgba(255, 255, 255, 0.11);
+      --elevation-inner-real-3xl:
+         inset 0 3px 8px rgba(0, 0, 0, 0.40),
+         inset 0 20px 40px -8px rgba(0, 0, 0, 0.36),
+         inset 0 -1px 0 rgba(255, 255, 255, 0.12);
+      --color-chart-track: rgba(255, 255, 255, 0.05);
+
+      /* Glass effect gradients - dark mode */
+      --glass-gradient-outer: linear-gradient(135deg,
+            var(--color-background-tertiary) 0%,
+            var(--color-background-secondary) 30%,
+            var(--color-background) 70%,
+            var(--color-background-tertiary) 100%);
+      --glass-gradient-inner: linear-gradient(to bottom,
+            var(--color-background-secondary) 0%,
+            var(--color-background) 100%);
+
+      /* Scrollbar - dark mode */
+      --ui-scrollbar-thumb-rest: rgba(75, 85, 99, 0.3);
+      --ui-scrollbar-thumb-active: rgb(75 85 99, 0.75);
+      --ui-scrollbar-track-rest: transparent;
+      --ui-scrollbar-track-active: rgba(55, 65, 81, 0.1);
+
+      /* Neumorphic tokens — dark mode (multi-layer realistic) */
+      --neu-raised-shadow:
+         1px 1px 2px rgba(0, 0, 0, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.25),
+         6px 6px 14px rgba(0, 0, 0, 0.2), 12px 12px 28px rgba(0, 0, 0, 0.1),
+         -1px -1px 2px rgba(255, 255, 255, 0.02),
+         -3px -3px 6px rgba(255, 255, 255, 0.015),
+         -6px -6px 14px rgba(255, 255, 255, 0.01),
+         inset 0 1px 0 rgba(255, 255, 255, 0.04),
+         inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+      --neu-inset-shadow:
+         inset 1px 1px 2px rgba(0, 0, 0, 0.3),
+         inset 2px 2px 4px rgba(0, 0, 0, 0.25),
+         inset 4px 4px 8px rgba(0, 0, 0, 0.2),
+         inset 8px 8px 16px rgba(0, 0, 0, 0.1),
+         inset -1px -1px 2px rgba(255, 255, 255, 0.02),
+         inset -3px -3px 6px rgba(255, 255, 255, 0.015),
+         0 1px 0 rgba(255, 255, 255, 0.04);
+      --neu-circle-groove-shadow:
+         inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.4),
+         inset 1px 1px 2px rgba(0, 0, 0, 0.35),
+         inset 2px 2px 5px rgba(0, 0, 0, 0.2),
+         0.5px 0.5px 1px rgba(255, 255, 255, 0.04),
+         1px 1px 2px rgba(255, 255, 255, 0.03);
+      --neu-circle-disc-shadow:
+         inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),
+         inset 1px 1px 3px rgba(0, 0, 0, 0.15),
+         inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.04),
+         inset -1px -1px 2px rgba(255, 255, 255, 0.03),
+         0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
+      --neu-raised-border: linear-gradient(145deg,
+            rgba(255, 255, 255, 0.2) 0%,
+            rgba(255, 255, 255, 0.08) 30%,
+            transparent 50%,
+            rgba(0, 0, 0, 0.12) 100%);
+      --neu-inset-border: linear-gradient(180deg,
+            rgba(0, 0, 0, 0.4) 0%,
+            rgba(0, 0, 0, 0.15) 25%,
+            rgba(255, 255, 255, 0.03) 50%,
+            rgba(255, 255, 255, 0.08) 75%,
+            rgba(255, 255, 255, 0.12) 100%);
+   }
 }