@yuno-payments/dashboard-design-system 2.9.4 → 3.0.0

package/dist/tokens.css

@@ -1,271 +1,737 @@
-/* ═══════════════════════════════════════════════════════════════
-   tokens.css — Self-contained stylesheet for MFEs
-
-   Exported as: @yuno-payments/dashboard-design-system/tokens.css
-   Consumers:   All MFEs that do NOT run their own Tailwind build.
-
-   One import in the MFE's src/index.css is all that's needed:
-     @import '@yuno-payments/dashboard-design-system/tokens.css';
-
-   Includes: Tailwind CSS, static @theme tokens (fonts, radii, colors,
-   animations), dynamic semantic tokens (:root / .dark), base border
-   override, and the @theme inline bridge for Tailwind utility generation.
-
-   NOTE: The @theme block must stay in sync with theme.css and global.css.
-   ═══════════════════════════════════════════════════════════════ */
-@import "tailwindcss";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-/* ═══════════════════════════════════════════════════════════════
-   STATIC THEME TOKENS (resolved at build time, don't change per mode)
-   ═══════════════════════════════════════════════════════════════ */
-@theme {
-  /* Font */
-  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-
-  /* Border radius */
-  --radius: 0.5rem;
-  --radius-md: 0.5rem; /* 8px */
-
-  /* Override Tailwind's OKLCH colors with RGB */
-  --color-red-50: rgb(254 242 242);
-  --color-red-100: rgb(254 226 226);
-  --color-red-200: rgb(254 202 202);
-  --color-red-300: rgb(252 165 165);
-  --color-red-400: rgb(248 113 113);
-  --color-red-500: rgb(239 68 68);
-  --color-red-600: rgb(220 38 38);
-  --color-red-700: rgb(185 28 28);
-  --color-red-800: rgb(153 27 27);
-  --color-red-900: rgb(127 29 29);
-
-  --color-orange-50: rgb(255 247 237);
-  --color-orange-100: rgb(255 237 213);
-  --color-orange-200: rgb(254 215 170);
-  --color-orange-300: rgb(253 186 116);
-  --color-orange-400: rgb(251 146 60);
-  --color-orange-500: rgb(249 115 22);
-  --color-orange-600: rgb(234 88 12);
-  --color-orange-700: rgb(194 65 12);
-  --color-orange-800: rgb(154 52 18);
-  --color-orange-900: rgb(124 45 18);
-
-  --color-yellow-50: rgb(254 252 232);
-  --color-yellow-100: rgb(254 249 195);
-  --color-yellow-200: rgb(254 240 138);
-  --color-yellow-300: rgb(253 224 71);
-  --color-yellow-400: rgb(250 204 21);
-  --color-yellow-500: rgb(234 179 8);
-  --color-yellow-600: rgb(202 138 4);
-  --color-yellow-700: rgb(161 98 7);
-  --color-yellow-800: rgb(133 77 14);
-  --color-yellow-900: rgb(113 63 18);
-
-  --color-green-50: rgb(240 253 244);
-  --color-green-100: rgb(220 252 231);
-  --color-green-200: rgb(187 247 208);
-  --color-green-300: rgb(134 239 172);
-  --color-green-400: rgb(74 222 128);
-  --color-green-500: rgb(34 197 94);
-  --color-green-600: rgb(22 163 74);
-  --color-green-700: rgb(21 128 61);
-  --color-green-800: rgb(22 101 52);
-  --color-green-900: rgb(20 83 45);
-
-  --color-blue-50: rgb(239 246 255);
-  --color-blue-100: rgb(219 234 254);
-  --color-blue-200: rgb(191 219 254);
-  --color-blue-300: rgb(147 197 253);
-  --color-blue-400: rgb(96 165 250);
-  --color-blue-500: rgb(59 130 246);
-  --color-blue-600: rgb(37 99 235);
-  --color-blue-700: rgb(29 78 216);
-  --color-blue-800: rgb(30 64 175);
-  --color-blue-900: rgb(30 58 138);
-
-  --color-rose-50: rgb(255 241 242);
-  --color-rose-100: rgb(255 228 230);
-  --color-rose-200: rgb(254 205 211);
-  --color-rose-300: rgb(253 164 175);
-  --color-rose-400: rgb(251 113 133);
-  --color-rose-500: rgb(244 63 94);
-  --color-rose-600: rgb(225 29 72);
-  --color-rose-700: rgb(190 18 60);
-  --color-rose-800: rgb(159 18 57);
-  --color-rose-900: rgb(136 19 55);
-
-  --color-gray-50: rgb(249 250 251);
-  --color-gray-100: rgb(243 244 246);
-  --color-gray-200: rgb(229 231 235);
-  --color-gray-300: rgb(209 213 219);
-  --color-gray-400: rgb(156 163 175);
-  --color-gray-500: rgb(107 114 128);
-  --color-gray-600: rgb(75 85 99);
-  --color-gray-700: rgb(55 65 81);
-  --color-gray-800: rgb(31 41 55);
-  --color-gray-900: rgb(17 24 39);
-
-  --color-neutral-50: rgb(250 250 250);
-  --color-neutral-100: rgb(245 245 245);
-  --color-neutral-200: rgb(229 229 229);
-  --color-neutral-300: rgb(212 212 212);
-  --color-neutral-400: rgb(163 163 163);
-  --color-neutral-500: rgb(115 115 115);
-  --color-neutral-600: rgb(82 82 82);
-  --color-neutral-700: rgb(64 64 64);
-  --color-neutral-800: rgb(38 38 38);
-  --color-neutral-900: rgb(23 23 23);
-
-  --color-black: rgb(0 0 0);
-  --color-white: rgb(255 255 255);
-
-  /* Colors with opacity for Badge component */
-  --color-green-600-10: rgba(22, 163, 74, 0.1);
-  --color-green-600-20: rgba(22, 163, 74, 0.2);
-  --color-green-600-40: rgba(22, 163, 74, 0.4);
-
-  --color-blue-600-10: rgba(37, 99, 235, 0.1);
-  --color-blue-600-20: rgba(37, 99, 235, 0.2);
-  --color-blue-600-40: rgba(37, 99, 235, 0.4);
-
-  --color-orange-600-10: rgba(234, 88, 12, 0.1);
-  --color-orange-600-20: rgba(234, 88, 12, 0.2);
-  --color-orange-600-40: rgba(234, 88, 12, 0.4);
-
-  --color-rose-600-10: rgba(225, 29, 72, 0.1);
-  --color-rose-600-20: rgba(225, 29, 72, 0.2);
-  --color-rose-600-40: rgba(225, 29, 72, 0.4);
-
-  --color-yellow-500-10: rgba(234, 179, 8, 0.1);
-  --color-yellow-500-20: rgba(234, 179, 8, 0.2);
-  --color-yellow-500-40: rgba(234, 179, 8, 0.4);
-
-  /* Animations */
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-  --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
-
-  @keyframes accordion-down {
-    from { height: 0; }
-    to { height: var(--radix-accordion-content-height); }
-  }
-
-  @keyframes accordion-up {
-    from { height: var(--radix-accordion-content-height); }
-    to { height: 0; }
-  }
-
-  @keyframes progress-indeterminate {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
-  }
-}
-
-/* ═══════════════════════════════════════════════════════════════
-   DYNAMIC SEMANTIC TOKENS (change between light/dark mode)
-   ═══════════════════════════════════════════════════════════════ */
-:root {
-  --background: #FFFFFF;
-  --foreground: #0F172A;
-  --card: #FFFFFF;
-  --card-foreground: #0F172A;
-  --popover: #FFFFFF;
-  --popover-foreground: #0F172A;
-  --primary-foreground: #F8FAFC;
-  --secondary: #F5F5F5;
-  --secondary-foreground: #0F172A;
-  --muted: #FAFAFA;
-  --muted-foreground: #737373;
-  --accent: #F1F5F9;
-  --accent-foreground: #0F172A;
-  --destructive: #EF4444;
-  --border: #E5E5E5;
-  --input: #E2E8F0;
-  --surface: #FAFAFA;
-  --primary: #3E4FE0;
-  --ring: #A3A3A3;
-  --destructive-foreground: #F8FAFC;
-  --success: #16A249;
-  --warning: #FACC14;
-  --info: #0DA2E7;
-}
-
-.dark {
-  --background: #0A0A0A;
-  --foreground: #F8FAFC;
-  --card: #0A0A0A;
-  --card-foreground: #F8FAFC;
-  --popover: #0A0A0A;
-  --popover-foreground: #F8FAFC;
-  --primary-foreground: #FFFFFF;
-  --secondary: #1E293B;
-  --secondary-foreground: #F8FAFC;
-  --muted: #262626;
-  --muted-foreground: #A3A3A3;
-  --accent: #1E293B;
-  --accent-foreground: #F8FAFC;
-  --destructive: #7F1D1D;
-  --border: #272E3F;
-  --input: #272E3F;
-  --surface: #0A0A0A;
-  --primary: #3E4FE0;
-  --ring: #A3A3A3;
-  --destructive-foreground: #F8FAFC;
-  --success: #16A249;
-  --warning: #FACC14;
-  --info: #0DA2E7;
-}
-
-/* ═══════════════════════════════════════════════════════════════
-   BASE OVERRIDES — fix preflight border-color for MFEs
-   ═══════════════════════════════════════════════════════════════ */
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop {
-    border-color: var(--border, currentColor);
-  }
-}
-
-/* ═══════════════════════════════════════════════════════════════
-   TAILWIND ↔ CSS VARIABLE BRIDGE
-   Registers dynamic tokens so Tailwind generates utilities
-   (bg-background, text-foreground, etc.)
-   ═══════════════════════════════════════════════════════════════ */
-@theme inline {
-  --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-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-surface: var(--surface);
-  --color-primary: var(--primary);
-  --color-ring: var(--ring);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-warning: var(--warning);
-  --color-info: var(--info);
-}
-
-/* Z-index: lift Radix portals above the Sheet/Dialog stack so Select/
-   DatePicker/TimePicker dropdowns rendered inside a Sheet or Dialog remain
-   visible and interactive. Mirrors the z-radix-portal utility in global.css.
-   MFEs stacked above (e.g. devx inspector panel) override via a more
-   specific selector on their own root. */
-[data-radix-popper-content-wrapper] {
-  z-index: 1000001 !important;
-  pointer-events: auto !important;
-}
+/* ═══════════════════════════════════════════════════════════════
+   global.css — THE design system stylesheet. There is only one.
+
+   It used to be three: theme.css, tokens.css and global.css, split so a
+   micro-frontend running its own Tailwind build could take the tokens
+   without the full sheet. The MFE era is over — every former MFE is a
+   module in this repo, sharing one Tailwind build.
+
+   The split cost more than it gave. The @theme block was maintained by
+   hand in all three, each carrying a "must stay in sync" comment, and
+   they had already drifted (DAS-18221: global.css was missing
+   --radius-md, so `rounded-md` fell back to Tailwind's 6px for anyone
+   loading only this file, plus two animations and their keyframes).
+
+   Collapsing had to wait for DAS-18222. The blocker was not the CSS: it
+   was that libs/shared/src/index.css owned its own @theme block, which
+   forced the app and the shell to enter Tailwind through two different
+   files. Point both at one file and the processing units merge, and a
+   @theme arriving from the secondary entry stops generating utilities —
+   measured, `bg-sidebar` went from 6 emitted rules to 0 and the sidebar
+   lost its background. Foundations moved those tokens here, and the
+   condition went with them.
+
+   ── Two build outputs, one source ──────────────────────────────
+   This file is emitted twice, for two kinds of consumer:
+
+     dist/styles.css   compiled through Tailwind by the lib build. For
+                       consumers WITHOUT their own Tailwind pipeline —
+                       link it and it works.
+
+     dist/tokens.css   a raw copy of this file, @import intact. For
+                       consumers WITH a Tailwind build, who @import it
+                       into their own pipeline.
+
+   Both are in package.json `exports`. `./tokens.css` is kept as a
+   deprecation alias so existing importers keep resolving; new code
+   should use `./styles.css`.
+   ═══════════════════════════════════════════════════════════════ */
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@source "./components";
+@source "./vendor";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ═══════════════════════════════════════════════════════════════
+   STATIC THEME TOKENS (resolved at build time, don't change per mode)
+   ═══════════════════════════════════════════════════════════════ */
+@theme {
+  /* Font */
+  --font-sans:
+    'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+
+  /* Border radius — the 9-step scale from the shadcndesign Figma the kit is
+     built on (DAS-18222). Against Tailwind's defaults this shifts sm 4→6,
+     lg 8→10 and xl 12→14; md stays at 8. Evidence the scale is the right one:
+     of the 18 hardcoded rounded-[Npx] in the codebase before this change, 15
+     already landed exactly on these values — people were escaping to them by
+     hand because two tokens were not enough. */
+  --radius: 0.5rem;
+  --radius-xs: 2px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-4xl: 32px;
+
+  /* Override Tailwind's OKLCH colors with RGB */
+  --color-red-50: rgb(254 242 242);
+  --color-red-100: rgb(254 226 226);
+  --color-red-200: rgb(254 202 202);
+  --color-red-300: rgb(252 165 165);
+  --color-red-400: rgb(248 113 113);
+  --color-red-500: rgb(239 68 68);
+  --color-red-600: rgb(220 38 38);
+  --color-red-700: rgb(185 28 28);
+  --color-red-800: rgb(153 27 27);
+  --color-red-900: rgb(127 29 29);
+
+  --color-orange-50: rgb(255 247 237);
+  --color-orange-100: rgb(255 237 213);
+  --color-orange-200: rgb(254 215 170);
+  --color-orange-300: rgb(253 186 116);
+  --color-orange-400: rgb(251 146 60);
+  --color-orange-500: rgb(249 115 22);
+  --color-orange-600: rgb(234 88 12);
+  --color-orange-700: rgb(194 65 12);
+  --color-orange-800: rgb(154 52 18);
+  --color-orange-900: rgb(124 45 18);
+
+  --color-yellow-50: rgb(254 252 232);
+  --color-yellow-100: rgb(254 249 195);
+  --color-yellow-200: rgb(254 240 138);
+  --color-yellow-300: rgb(253 224 71);
+  --color-yellow-400: rgb(250 204 21);
+  --color-yellow-500: rgb(234 179 8);
+  --color-yellow-600: rgb(202 138 4);
+  --color-yellow-700: rgb(161 98 7);
+  --color-yellow-800: rgb(133 77 14);
+  --color-yellow-900: rgb(113 63 18);
+
+  --color-green-50: rgb(240 253 244);
+  --color-green-100: rgb(220 252 231);
+  --color-green-200: rgb(187 247 208);
+  --color-green-300: rgb(134 239 172);
+  --color-green-400: rgb(74 222 128);
+  --color-green-500: rgb(34 197 94);
+  --color-green-600: rgb(22 163 74);
+  --color-green-700: rgb(21 128 61);
+  --color-green-800: rgb(22 101 52);
+  --color-green-900: rgb(20 83 45);
+
+  --color-blue-50: rgb(239 246 255);
+  --color-blue-100: rgb(219 234 254);
+  --color-blue-200: rgb(191 219 254);
+  --color-blue-300: rgb(147 197 253);
+  --color-blue-400: rgb(96 165 250);
+  --color-blue-500: rgb(59 130 246);
+  --color-blue-600: rgb(37 99 235);
+  --color-blue-700: rgb(29 78 216);
+  --color-blue-800: rgb(30 64 175);
+  --color-blue-900: rgb(30 58 138);
+
+  --color-rose-50: rgb(255 241 242);
+  --color-rose-100: rgb(255 228 230);
+  --color-rose-200: rgb(254 205 211);
+  --color-rose-300: rgb(253 164 175);
+  --color-rose-400: rgb(251 113 133);
+  --color-rose-500: rgb(244 63 94);
+  --color-rose-600: rgb(225 29 72);
+  --color-rose-700: rgb(190 18 60);
+  --color-rose-800: rgb(159 18 57);
+  --color-rose-900: rgb(136 19 55);
+
+  --color-gray-50: rgb(249 250 251);
+  --color-gray-100: rgb(243 244 246);
+  --color-gray-200: rgb(229 231 235);
+  --color-gray-300: rgb(209 213 219);
+  --color-gray-400: rgb(156 163 175);
+  --color-gray-500: rgb(107 114 128);
+  --color-gray-600: rgb(75 85 99);
+  --color-gray-700: rgb(55 65 81);
+  --color-gray-800: rgb(31 41 55);
+  --color-gray-900: rgb(17 24 39);
+
+  --color-neutral-50: rgb(250 250 250);
+  --color-neutral-100: rgb(245 245 245);
+  --color-neutral-200: rgb(229 229 229);
+  --color-neutral-300: rgb(212 212 212);
+  --color-neutral-400: rgb(163 163 163);
+  --color-neutral-500: rgb(115 115 115);
+  --color-neutral-600: rgb(82 82 82);
+  --color-neutral-700: rgb(64 64 64);
+  --color-neutral-800: rgb(38 38 38);
+  --color-neutral-900: rgb(23 23 23);
+
+  --color-black: rgb(0 0 0);
+  --color-white: rgb(255 255 255);
+
+  /* Colors with opacity for Badge component */
+  --color-green-600-10: rgba(22, 163, 74, 0.1);
+  --color-green-600-20: rgba(22, 163, 74, 0.2);
+  --color-green-600-40: rgba(22, 163, 74, 0.4);
+
+  --color-blue-600-10: rgba(37, 99, 235, 0.1);
+  --color-blue-600-20: rgba(37, 99, 235, 0.2);
+  --color-blue-600-40: rgba(37, 99, 235, 0.4);
+
+  --color-orange-600-10: rgba(234, 88, 12, 0.1);
+  --color-orange-600-20: rgba(234, 88, 12, 0.2);
+  --color-orange-600-40: rgba(234, 88, 12, 0.4);
+
+  --color-rose-600-10: rgba(225, 29, 72, 0.1);
+  --color-rose-600-20: rgba(225, 29, 72, 0.2);
+  --color-rose-600-40: rgba(225, 29, 72, 0.4);
+
+  --color-yellow-500-10: rgba(234, 179, 8, 0.1);
+  --color-yellow-500-20: rgba(234, 179, 8, 0.2);
+  --color-yellow-500-40: rgba(234, 179, 8, 0.4);
+
+  /* Chart palette — 20 colours cycled by series index, plus 3 dedicated to the
+     stacked status distribution (Succeeded / Declined / Fraud). Same in both
+     themes. Extracted from modules/insights/src/utils/colors.ts, where they
+     were hardcoded, so a chart can use a token instead (DAS-18222). */
+  --color-chart-1: #7dd459;
+  --color-chart-2: #70b2f8;
+  --color-chart-3: #f8a55d;
+  --color-chart-4: #8e72e8;
+  --color-chart-5: #c6d66c;
+  --color-chart-6: #dc96f4;
+  --color-chart-7: #7c87fb;
+  --color-chart-8: #ff9090;
+  --color-chart-9: #5d5d74;
+  --color-chart-10: #eebb44;
+  --color-chart-11: #7bd9a7;
+  --color-chart-12: #4089ad;
+  --color-chart-13: #5dbeee;
+  --color-chart-14: #ebd831;
+  --color-chart-15: #72e4c9;
+  --color-chart-16: #79a5ce;
+  --color-chart-17: #86c8f8;
+  --color-chart-18: #8990de;
+  --color-chart-19: #8c97f8;
+  --color-chart-20: #d3c648;
+  --color-chart-stack-1: #3885d2;
+  --color-chart-stack-2: #71b8ff;
+  --color-chart-stack-3: #7cc674;
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-fade-in: fade-in 0.45s ease-out both;
+  --animate-slide-in-left: slide-in-from-left 0.5s
+    cubic-bezier(0.22, 1, 0.36, 1) both;
+  --animate-cascade: cascade-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
+  --animate-success-pop: success-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1)
+    both;
+  --animate-check-draw: check-draw 400ms ease-out 260ms both;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out
+    infinite;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-in-from-left {
+    from {
+      opacity: 0;
+      transform: translateX(-14px);
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes cascade-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes success-pop {
+    0% {
+      opacity: 0;
+      transform: scale(0.4);
+    }
+    60% {
+      opacity: 1;
+      transform: scale(1.08);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes check-draw {
+    0% {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes progress-indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   DYNAMIC SEMANTIC TOKENS (change between light/dark mode)
+   ═══════════════════════════════════════════════════════════════ */
+:root {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+  --card: #ffffff;
+  --card-foreground: #0a0a0a;
+  --popover: #ffffff;
+  --popover-foreground: #0a0a0a;
+  --primary-foreground: #fafafa;
+  --secondary: #f5f5f5;
+  --secondary-foreground: #171717;
+  --muted: #f5f5f5;
+  --muted-foreground: #737373;
+  --accent: #f5f5f5;
+  --accent-blue-subtle: #eef0ff;
+  --accent-foreground: #171717;
+  --destructive: #dc2626;
+  --border: #e5e5e5;
+  --input: #e5e5e5;
+  --surface: #fafafa;
+  --primary: #3e4fe0;
+  --ring: #737373;
+  --destructive-foreground: #ffffff;
+  --success: #15803d;
+  --warning: #ca8a04;
+  --info: #0da2e7;
+
+  /* One indigo cannot do both jobs on a dark canvas, and it is measurable, not
+     taste: for text to clear AA the colour needs luminance ≥ 0.1886; for white
+     to clear AA sitting ON it, ≤ 0.1833. The ranges do not overlap. So the
+     token is split by job — --primary is the FILL, --primary-text is the INK.
+     Light needs no split (the brand indigo reads 8.09:1 on white) but declares
+     it so a component can say `text-primary-text` once and be right in both. */
+  --primary-text: #3e4fe0;
+
+  /* Sidebar chrome, moved here from libs/shared/src/index.css (DAS-18222). */
+  --sidebar: #fafafa;
+  --sidebar-accent: #f5f5f5;
+}
+
+.dark {
+  --background: #0a0a0a;
+  --foreground: #fafafa;
+  --card: #171717;
+  --card-foreground: #fafafa;
+  --popover: #262626;
+  --popover-foreground: #fafafa;
+  --primary-foreground: #ffffff;
+  --secondary: #262626;
+  --secondary-foreground: #fafafa;
+  --muted: #262626;
+  --muted-foreground: #a3a3a3;
+  --accent: #404040;
+  --accent-blue-subtle: #1e2258;
+  --accent-foreground: #fafafa;
+  --destructive: #f87171;
+  --border: rgb(255 255 255 / 10%);
+  --input: rgb(255 255 255 / 15%);
+  --surface: #0a0a0a;
+  --primary: #3e4fe0;
+  --ring: #a3a3a3;
+  --destructive-foreground: #0a0a0a;
+  --success: #4ade80;
+  --warning: #facc15;
+  --info: #0da2e7;
+
+  /* The brand indigo reads 3.21:1 as text on the dark canvas — under AA. This
+     is the same hue lifted until it clears 4.5:1 as ink on every surface it can
+     land on: 5.93 on the canvas, 5.37 on a card, 4.53 on a popover. */
+  --primary-text: #7181ff;
+
+  --sidebar: #0c0c0e;
+  --sidebar-accent: #18181b;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TAILWIND ↔ CSS VARIABLE BRIDGE
+   Registers dynamic tokens so Tailwind generates utilities
+   (bg-background, text-foreground, etc.)
+   ═══════════════════════════════════════════════════════════════ */
+@theme inline {
+  --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-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-blue-subtle: var(--accent-blue-subtle);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-surface: var(--surface);
+  --color-primary: var(--primary);
+  --color-ring: var(--ring);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-primary-text: var(--primary-text);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-accent: var(--sidebar-accent);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BASE STYLES
+   ═══════════════════════════════════════════════════════════════ */
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    /* macOS only, and it renders text LIGHTER. Adopted from the kit, whose
+       stated reason is that without it text looks thicker than in Figma.
+       Reviewed side by side before merging rather than taken on faith — see
+       DAS-18222; the risk it carries is legibility at text-xs in table cells,
+       where most of the dashboard's type lives. */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+/* Z-index utilities for layered components */
+/* Sticky in-page section headers (e.g. page title + tabs that pin while the
+   body scrolls). Sits above page content but BELOW the overlay stack
+   (sheet/dialog/popover/select/tooltip) so app chrome and menus stay on top. */
+@utility z-sticky {
+  z-index: 999;
+}
+/* Slide-out navigation chrome that emerges from under the top bar: the sidebar
+   flyout submenu and the appbar drop-downs (account menu, notifications). These
+   are portaled to <body>, so at z 999 they paint ABOVE feature-page sticky
+   headers (same level, but earlier in the DOM) while staying BELOW the top app
+   chrome (ContainerTopMenu / appbar at z 1000) — the bar stays on top instead
+   of a flyout sliding over it on scroll. Keep this strictly below the chrome
+   level (1000): if the chrome z-index moves, update it relative to this. */
+@utility z-flyout {
+  z-index: 999;
+}
+@utility z-sheet {
+  z-index: 1000;
+}
+@utility z-dialog {
+  z-index: 1000;
+}
+@utility z-popover {
+  z-index: 10000;
+}
+@utility z-select {
+  z-index: 50000;
+}
+@utility z-tooltip {
+  z-index: 100000;
+}
+@utility z-radix-portal {
+  z-index: 1000001;
+}
+
+/* Lift Radix portals above the Sheet/Dialog stack so Select/DatePicker/
+   TimePicker dropdowns rendered inside a Sheet or Dialog remain visible
+   and interactive. MFEs stacked above (e.g. devx inspector panel) override
+   via a more specific selector on their own root. */
+[data-radix-popper-content-wrapper] {
+  z-index: 1000001 !important;
+  pointer-events: auto !important;
+}
+
+/*
+  Override: --input token is used for borders (border-input), but input
+  backgrounds need white/dark. Consider splitting into separate tokens.
+*/
+.bg-input {
+  background-color: #ffffff;
+}
+.dark .bg-input {
+  background-color: #202020;
+}
+
+@layer utilities {
+  .container {
+    @apply !max-w-full;
+    @apply bg-background;
+  }
+}
+
+/* Fix time picker icon positioning — keep icon at the end */
+input[type='time']::-webkit-calendar-picker-indicator {
+  position: absolute;
+  inset-inline-end: 8px;
+}
+
+input[type='time'] {
+  position: relative;
+}
+
+/* Notification Alert Toast — colored borders */
+.notification-alert-toast.notification-alert-success {
+  border-inline-start: 4px solid var(--color-success) !important;
+}
+
+.notification-alert-toast.notification-alert-error {
+  border-inline-start: 4px solid var(--color-destructive) !important;
+}
+
+.notification-alert-toast.notification-alert-warning {
+  border-inline-start: 4px solid var(--color-warning) !important;
+}
+
+.notification-alert-toast.notification-alert-info {
+  border-inline-start: 4px solid var(--color-info) !important;
+}
+
+/* Toast icon colors based on toast type */
+[data-sonner-toast][data-type='success'] [data-icon] {
+  color: var(--color-success) !important;
+}
+
+[data-sonner-toast][data-type='error'] [data-icon] {
+  color: var(--color-destructive) !important;
+}
+
+[data-sonner-toast][data-type='warning'] [data-icon] {
+  color: var(--color-warning) !important;
+}
+
+[data-sonner-toast][data-type='info'] [data-icon] {
+  color: var(--color-info) !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   RTL: Directional icon mirroring utility
+   ═══════════════════════════════════════════════════════════════
+
+   Icons in this design system are rendered as inline SVGs by
+   @phosphor-icons/react and lucide-react, so CSS class-based
+   selectors are not applicable. Instead, use the Tailwind utility
+   class on directional icon wrappers:
+
+     className="rtl:scale-x-[-1]"
+
+   Apply this to any icon that implies horizontal direction:
+     - ArrowLeft, ArrowRight, ArrowCircleLeft, ArrowCircleRight
+     - CaretLeft, CaretRight, CaretDoubleLeft, CaretDoubleRight
+     - ChevronLeft, ChevronRight (lucide-react)
+     - ArrowBendUpLeft, ArrowBendUpRight
+     - SignOut, Export
+
+   Example:
+     <Icon name="ArrowLeft" className="rtl:scale-x-[-1]" />
+     <ChevronRight className="rtl:scale-x-[-1]" />
+
+   Do NOT mirror symmetrical icons (X, Plus, Check, etc.) or
+   vertical arrows (ArrowUp, ArrowDown).
+*/
+
+/* The .rtl-mirror base class is intentionally omitted — no LTR styles needed.
+   The RTL override below handles all directional mirroring. */
+[dir='rtl'] .rtl-mirror {
+  transform: scaleX(-1);
+}
+
+/* DataTable first and last column padding */
+.app-data-table table thead tr th:first-child,
+.app-data-table table tbody tr td:first-child {
+  @apply ps-6;
+}
+
+.app-data-table table thead tr th:last-child,
+.app-data-table table tbody tr td:last-child {
+  @apply pe-6;
+}
+
+.app-animated-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.app-animated-empty-illustration {
+  display: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  /* Must be a definite width: the only child (SceneShell) is `w-full` with an
+     absolutely-positioned img, so `width: auto` resolves to 0 and the
+     illustration disappears. */
+  width: 100%;
+  max-width: 50%;
+}
+
+@media (min-width: 768px) {
+  .app-animated-empty {
+    flex-direction: row;
+    gap: 4rem;
+  }
+
+  .app-animated-empty-illustration {
+    display: flex;
+  }
+}
+
+/* Live-update row flash (Pattern B). A table row briefly highlights when its
+   data changes, then fades back to transparent. Applied via DataTable's
+   getRowClassName. green = new row, blue = status change, amber = other update. */
+@keyframes ds-row-flash-green {
+  0% {
+    background-color: rgba(22, 163, 74, 0.16);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+@keyframes ds-row-flash-blue {
+  0% {
+    background-color: rgba(37, 99, 235, 0.16);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+@keyframes ds-row-flash-amber {
+  0% {
+    background-color: rgba(245, 158, 11, 0.18);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+.ds-flash-new {
+  animation: ds-row-flash-green 1s ease-out;
+}
+.ds-flash-status {
+  animation: ds-row-flash-blue 1s ease-out;
+}
+.ds-flash-update {
+  animation: ds-row-flash-amber 1s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-flash-new,
+  .ds-flash-status,
+  .ds-flash-update {
+    animation: none;
+  }
+}
+
+/* Sparkline mount reveal. Applied to the <rect> of the clipPath that wraps the
+   line and its gradient area, so one animation sweeps both marks. Scaling in
+   SVG user space happens BEFORE the viewBox -> viewport mapping, which is what
+   keeps the wipe exactly linear even though Sparkline stretches with
+   preserveAspectRatio="none". */
+@keyframes ds-spark-reveal {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+.ds-spark-reveal {
+  transform-origin: left;
+  animation: ds-spark-reveal 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-spark-reveal {
+    animation: none;
+  }
+}
+
+/* Animated empty-state illustrations (AnimatedEmpty). Shared entrance/pulse
+   chrome reused by every variant in molecules/animated-empty/illustrations —
+   the per-variant particle/cube choreography itself is driven imperatively
+   via requestAnimationFrame (see use-scene-animation.ts), not CSS. */
+@keyframes app-scene-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+@keyframes app-scene-in {
+  from {
+    opacity: 0;
+    filter: blur(6px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+@keyframes app-scene-dash-travel {
+  from {
+    stroke-dashoffset: 42;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+.app-scene {
+  animation:
+    app-scene-float 6s ease-in-out infinite,
+    app-scene-in 0.8s ease-out both;
+}
+.app-scene-pulse-line {
+  animation: app-scene-dash-travel 4.5s linear infinite;
+}
+.app-scene-glow {
+  filter: blur(8px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .app-scene,
+  .app-scene-pulse-line {
+    animation: none;
+  }
+}