@mila_studios/mycelia-design-system 0.1.1

package/packages/ui/postcss.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+    plugins: { "@tailwindcss/postcss": {} },
+};
+
+export default config;

package/packages/ui/src/styles/bundle-entry.css

@@ -0,0 +1,2 @@
+/* Built to dist/mila-ui.css — single-file stylesheet for apps that only need MILA components (no local Tailwind). */
+@import "./globals.css";

package/packages/ui/src/styles/globals.css

@@ -0,0 +1,651 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "react-day-picker/style.css";
+
+@keyframes mila-accordion-down {
+    from {
+        height: 0;
+    }
+    to {
+        height: var(--radix-collapsible-content-height);
+    }
+}
+
+@keyframes mila-accordion-up {
+    from {
+        height: var(--radix-collapsible-content-height);
+    }
+    to {
+        height: 0;
+    }
+}
+
+@custom-variant dark (&:is(.dark *));
+@source "../**/*.{ts,tsx}";
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+    --font-sans: var(--font-sans);
+    --animate-mila-accordion-down: mila-accordion-down 0.2s ease-out;
+    --animate-mila-accordion-up: mila-accordion-up 0.2s ease-out;
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    /* MILA / Obra input (Figma Obra shadcn — node 16:1738) */
+    --mila-input-border: #8690a5;
+    --mila-input-border-focus: #662e7d;
+    --mila-input-ring-focus: #e0cee4;
+    --mila-input-border-error: #cf0c0d;
+    --mila-input-ring-error: #ff9c9d;
+    --mila-input-bg-disabled: #dde3e8;
+    --mila-input-placeholder: #50565f;
+    --mila-input-text-value: #662e7d;
+    --mila-input-text-focus: #3b1849;
+    --mila-input-text-error: #1c0825;
+    --mila-input-text-disabled: #171717;
+    --mila-input-border-with-value: #d4d4d4;
+    /* MILA / Obra label (Figma Obra shadcn — node 279:98209) */
+    --mila-label-fg: #1c0825;
+    /* MILA / Obra accordion (Figma Obra shadcn — node 288:122452) */
+    --mila-accordion-border: #e5e5e5;
+    --mila-accordion-trigger-fg: #171717;
+    --mila-accordion-content-fg: #171717;
+    --mila-accordion-trigger-focus-border: #d4d4d4;
+    /* MILA / Obra card (Figma Obra shadcn — node 288:122714) */
+    --mila-card-bg: #ffffff;
+    --mila-card-border: #e5e5e5;
+    --mila-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.1);
+    --mila-card-title-fg: #171717;
+    --mila-card-description-fg: #737373;
+    /* MILA / Obra tabs (Figma Obra shadcn — node 288:173625) */
+    --mila-tabs-list-bg: #f5f5f5;
+    --mila-tabs-trigger-active-bg: #ffffff;
+    --mila-tabs-trigger-active-shadow: var(--mila-card-shadow);
+    --mila-tabs-trigger-fg: #171717;
+    --mila-tabs-trigger-inactive-hover-bg: #ebebeb;
+    --mila-tabs-trigger-focus-ring: #e0cee4;
+    --mila-tabs-content-fg: #171717;
+    /* MILA / Obra sidebar (Figma Obra shadcn — node 288:180690) */
+    --mila-sidebar-item-fg: #404040;
+    --mila-sidebar-item-active-bg: #f5f5f5;
+    --mila-sidebar-item-hover-bg: #fafafa;
+    --mila-sidebar-item-focus-ring: #e0cee4;
+    --mila-sidebar-group-label-fg: #737373;
+    --mila-sidebar-sub-rail: #d4d4d4;
+    /* MILA sidebar workspace switch (Figma node 288:180690 — Menu Item 59px) */
+    --mila-sidebar-workspace-bg: #ffffff;
+    --mila-sidebar-workspace-border: #e5e5e5;
+    --mila-sidebar-workspace-title-fg: #171717;
+    --mila-sidebar-workspace-subtitle-fg: #737373;
+    --mila-sidebar-workspace-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    /* MILA / Obra navigation menu (Figma Obra shadcn — node 288:184487) */
+    --mila-nav-menu-trigger-fg: #783596;
+    --mila-nav-menu-trigger-fg-open: #3b1849;
+    --mila-nav-menu-trigger-focus-ring: #e0cee4;
+    --mila-nav-menu-content-bg: #ffffff;
+    --mila-nav-menu-content-border: #d4d4d4;
+    --mila-nav-menu-content-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --mila-nav-menu-item-title: #171717;
+    --mila-nav-menu-item-description: #737373;
+    --mila-nav-menu-item-hover-bg: #fafafa;
+    /* MILA / Obra pagination (Figma Obra shadcn — node 294:233630) */
+    --mila-pagination-fg: #783596;
+    --mila-pagination-active-border: #783596;
+    --mila-pagination-active-bg: #ffffff;
+    --mila-pagination-active-shadow: var(--mila-card-shadow);
+    --mila-pagination-page-hover-bg: #fafafa;
+    --mila-pagination-ellipsis-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    /* MILA / Obra dialog (Figma Obra shadcn — node 294:236106) */
+    --mila-dialog-overlay-bg: rgb(0 0 0 / 0.5);
+    --mila-dialog-bg: #ffffff;
+    --mila-dialog-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --mila-dialog-title-fg: #171717;
+    --mila-dialog-description-fg: #737373;
+    --mila-dialog-close-fg: #171717;
+    --mila-dialog-close-focus-ring: #e0cee4;
+    --mila-dialog-content-focus-ring: #e0cee4;
+    /* MILA / Obra drawer handle (Figma Obra shadcn — node 301:245123) */
+    --mila-drawer-handle-bg: #f5f5f5;
+    /* MILA / Obra alert dialog (Figma Obra shadcn — node 295:239548) */
+    --mila-alert-dialog-bg: #ffffff;
+    --mila-alert-dialog-border: #e5e5e5;
+    --mila-alert-dialog-shadow: 0 10px 15px 0 rgb(0 0 0 / 0.1), 0 4px 6px 0 rgb(0 0 0 / 0.1);
+    --mila-alert-dialog-title-fg: #171717;
+    --mila-alert-dialog-description-fg: #737373;
+    --mila-alert-dialog-content-focus-ring: #e0cee4;
+    /* MILA / Obra sonner (Figma Obra shadcn — node 295:240815) */
+    --mila-sonner-bg: #ffffff;
+    --mila-sonner-border: #e5e5e5;
+    --mila-sonner-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.1);
+    --mila-sonner-title-fg: #171717;
+    --mila-sonner-description-fg: #404040;
+    --mila-sonner-icon-fg: #171717;
+    --mila-sonner-action-bg: #f5f0f7;
+    --mila-sonner-action-border: #e0cee4;
+    --mila-sonner-action-fg: #662e7d;
+    --mila-sonner-action-focus-ring: #e0cee4;
+    --mila-sonner-close-border: #e5e5e5;
+    --mila-sonner-close-bg: #ffffff;
+    --mila-sonner-close-fg: #171717;
+    --mila-sonner-progress-caption-fg: #737373;
+    /* MILA / Obra hover card (Figma Obra shadcn — node 302:245663) */
+    --mila-hover-card-bg: #ffffff;
+    --mila-hover-card-border: #d4d4d4;
+    --mila-hover-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --mila-hover-card-title-fg: #171717;
+    --mila-hover-card-body-fg: #171717;
+    --mila-hover-card-meta-fg: #737373;
+    /* MILA / Obra skeleton (Figma Obra shadcn — node 303:246601) */
+    --mila-skeleton-bg: #fafafa;
+    /* MILA / Obra resizable (Figma Obra shadcn — node 304:252713) */
+    --mila-resizable-divider: #e5e5e5;
+    --mila-resizable-handle-bg: #d9d9d9;
+    --mila-resizable-grip-fg: #404040;
+    /* MILA / Obra scroll area (Figma Obra shadcn — node 304:252561) */
+    --mila-scroll-area-border: #e5e5e5;
+    --mila-scroll-area-bg: #ffffff;
+    --mila-scroll-area-thumb: #d4d4d4;
+    --mila-scroll-area-thumb-hover: #a3a3a3;
+    /* MILA / Obra breadcrumb (Figma Obra shadcn — node 294:234945) */
+    --mila-breadcrumb-muted-fg: #737373;
+    --mila-breadcrumb-current-fg: #171717;
+    --mila-breadcrumb-separator-fg: #737373;
+    --mila-breadcrumb-trigger-shadow: var(--mila-pagination-ellipsis-shadow);
+    /* MILA / Obra table (Figma Obra shadcn — node 288:169218) */
+    --mila-table-border: #e5e5e5;
+    --mila-table-header-bg: #ffffff;
+    --mila-table-header-fg: #171717;
+    --mila-table-cell-fg: #171717;
+    --mila-table-row-odd-bg: #ffffff;
+    --mila-table-row-even-bg: #fafafa;
+    --mila-table-footer-bg: #fafafa;
+    /* MILA / Obra data table (Figma Obra shadcn — node 288:172340) */
+    --mila-data-table-header-hover-bg: #f5f5f5;
+    --mila-data-table-row-hover-bg: #f5f5f5;
+    --mila-data-table-row-selected-bg: #e5e5e5;
+    /* MILA / Obra textarea (Figma Obra shadcn — node 279:99100) */
+    --mila-textarea-terms-bg: #edf0f2;
+    --mila-textarea-terms-fg: #191a1e;
+    --mila-textarea-scrollbar-thumb: #777f92;
+    /* MILA / Obra input OTP (Figma Obra shadcn — node 280:101027) */
+    --mila-otp-slot-border: #d4d4d4;
+    --mila-otp-fg: #171717;
+    --mila-otp-separator-bar: #171717;
+    /* MILA / Obra radio (Figma Obra shadcn — node 280:103567) */
+    --mila-radio-border: #d4d4d4;
+    --mila-radio-border-checked: #a3a3a3;
+    --mila-radio-indicator: #171717;
+    --mila-radio-border-disabled: #e5e5e5;
+    --mila-radio-rich-border: #e5e5e5;
+    --mila-radio-rich-border-checked: #a3a3a3;
+    --mila-radio-rich-bg-checked: #f5f5f5;
+    --mila-radio-rich-description: #737373;
+    /* MILA / Obra checkbox (Figma Obra shadcn — node 280:104271) */
+    --mila-checkbox-border: #8690a5;
+    --mila-checkbox-fill: #171717;
+    --mila-checkbox-icon: #ffffff;
+    --mila-checkbox-disabled-unchecked-bg: #8690a5;
+    --mila-checkbox-disabled-unchecked-border: #191a1e;
+    --mila-checkbox-disabled-checked-bg: #171717;
+    --mila-checkbox-disabled-checked-border: #191a1e;
+    /* MILA / Obra switch (Figma Obra shadcn — node 280:104497) */
+    --mila-switch-track-off: #e5e5e5;
+    --mila-switch-track-on: #3b82f6;
+    --mila-switch-thumb: #ffffff;
+    /* MILA / Obra avatar (Figma Obra shadcn — node 273:27988) */
+    --mila-avatar-fallback-bg: #f5f5f5;
+    --mila-avatar-fallback-fg: #404040;
+    /* MILA / Obra badge (Figma Obra shadcn — node 273:30617) */
+    --mila-badge-primary-bg: #171717;
+    --mila-badge-primary-fg: #ffffff;
+    --mila-badge-secondary-bg: #fafafa;
+    --mila-badge-secondary-fg: #171717;
+    --mila-badge-outline-border: #e5e5e5;
+    --mila-badge-destructive-bg: #ef4444;
+    --mila-badge-destructive-fg: #ffffff;
+    --mila-badge-error-number-bg: #ffdfdf;
+    --mila-badge-error-number-border: #ffc5c5;
+    --mila-badge-error-number-fg: #891314;
+    --mila-badge-error-number-fg-focus: #a60e0f;
+    --mila-badge-info-bg: #3b82f6;
+    --mila-badge-info-fg: #ffffff;
+    /* MILA / Obra button (Figma Obra shadcn — node 273:30945) */
+    --mila-button-primary-bg: #783596;
+    --mila-button-primary-hover: #3b1849;
+    --mila-button-primary-fg: #ffffff;
+    --mila-button-destructive-bg: #cf0c0d;
+    --mila-button-destructive-hover: #4b0404;
+    --mila-button-destructive-fg: #ffffff;
+    --mila-button-secondary-bg: #f5f0f7;
+    --mila-button-secondary-border: #e0cee4;
+    --mila-button-secondary-fg: #662e7d;
+    --mila-button-secondary-hover-bg: #e0cee4;
+    --mila-button-secondary-hover-border: #b286ba;
+    --mila-button-secondary-hover-fg: #1c0825;
+    --mila-button-outline-border: #783596;
+    --mila-button-outline-fg: #783596;
+    --mila-button-outline-hover-bg: #f5ecfb;
+    --mila-button-outline-hover-border: #3b1849;
+    --mila-button-outline-hover-fg: #3b1849;
+    --mila-button-outline-disabled-bg: #dde3e8;
+    --mila-button-outline-disabled-border: #9ca7b8;
+    --mila-button-outline-disabled-fg: #5f6674;
+    --mila-button-ghost-fg: #783596;
+    --mila-button-ghost-hover-bg: #f5ecfb;
+    --mila-button-ghost-hover-fg: #3b1849;
+    --mila-button-disabled-bg: #dde3e8;
+    --mila-button-disabled-fg: #50565f;
+    /* MILA / Obra link button (Figma Obra shadcn — node 274:52937) */
+    --mila-link-button-fg: #171717;
+    /* MILA / Obra tooltip (Figma Obra shadcn — node 274:57607) */
+    --mila-tooltip-bg: #171717;
+    --mila-tooltip-fg: #ffffff;
+    /* MILA / Obra combobox & menu (Figma Obra shadcn — node 281:104714) */
+    --mila-combobox-menu-bg: #ffffff;
+    --mila-combobox-menu-border: #e5e5e5;
+    --mila-combobox-menu-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.1);
+    --mila-combobox-item-hover-bg: #f5f5f5;
+    --mila-combobox-item-selected-bg: #f5f5f5;
+    --mila-combobox-item-text: #171717;
+    --mila-combobox-item-muted: #737373;
+    --mila-combobox-item-destructive: #ef4444;
+    --mila-combobox-group-label: #737373;
+    --mila-combobox-search-border: #d4d4d4;
+    /* MILA / Obra command menu (Figma Obra shadcn — node 301:242527) */
+    --mila-command-menu-bg: #ffffff;
+    --mila-command-menu-border: #d4d4d4;
+    --mila-command-menu-shadow: 0 4px 6px 0 rgb(0 0 0 / 0.1), 0 2px 4px 0 rgb(0 0 0 / 0.1);
+    --mila-command-input-slot-bg: #ffffff;
+    --mila-command-input-icon: #737373;
+    --mila-command-item-hover-bg: #fafafa;
+    --mila-command-item-text: #171717;
+    --mila-command-separator: #d4d4d4;
+    --mila-command-group-heading: #737373;
+    --mila-command-close-fg: #171717;
+    --mila-command-close-focus-ring: #e0cee4;
+    /* MILA calendar (react-day-picker; pairs with input / combobox — Figma Date Picker) */
+    --mila-calendar-accent: #662e7d;
+    --mila-calendar-accent-bg: #e0cee4;
+    /* MILA / Obra progress (Figma Obra shadcn — node 438:64977) */
+    --mila-progress-track-bg: #edf0f2;
+    --mila-progress-track-border: #c8d1d9;
+    --mila-progress-indicator: #783596;
+    /* MILA / Obra slider (Figma Obra shadcn — node 288:121670) */
+    --mila-slider-track-bg: #f0f1f3;
+    --mila-slider-track-border: #c7cbd4;
+    --mila-slider-range: #783596;
+    --mila-slider-thumb-bg: #ffffff;
+    --mila-slider-thumb-border: #783596;
+    --mila-slider-thumb-ring-focus: #e0cee4;
+    /* MILA / Obra separator (Figma Obra shadcn — node 274:59598) */
+    --mila-separator: #c7cbd4;
+    /* MILA / Obra charts (Figma Obra shadcn — node 304:252980 · Recharts) */
+    --mila-chart-grid: #f5f5f5;
+    --mila-chart-axis-fg: #737373;
+    --mila-chart-tooltip-bg: #ffffff;
+    --mila-chart-tooltip-border: #e5e5e5;
+    --mila-chart-tooltip-label-fg: #09090b;
+    --mila-chart-tooltip-muted-fg: #737373;
+    --mila-chart-tooltip-value-fg: #09090b;
+    /* MILA / Obra alert (Figma Obra shadcn — node 8:283) */
+    --mila-alert-border: #e5e5e5;
+    --mila-alert-neutral-title: #171717;
+    --mila-alert-neutral-description: #737373;
+    --mila-alert-error-fg: #ef4444;
+    /* MILA / Obra icon button (Figma Obra shadcn — node 274:37817) */
+    --mila-icon-button-primary-bg: #171717;
+    --mila-icon-button-primary-hover: #404040;
+    --mila-icon-button-primary-fg: #ffffff;
+    --mila-icon-button-secondary-bg: #f5f5f5;
+    --mila-icon-button-secondary-hover: #fafafa;
+    --mila-icon-button-secondary-fg: #171717;
+    --mila-icon-button-outline-border: #e5e5e5;
+    --mila-icon-button-outline-hover-bg: #fafafa;
+    --mila-icon-button-ghost-hover-bg: #fafafa;
+    --mila-icon-button-destructive-bg: #ef4444;
+    --mila-icon-button-destructive-hover: #dc2626;
+    --mila-icon-button-destructive-fg: #ffffff;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+    --mila-input-border: oklch(0.55 0.02 260);
+    --mila-input-border-focus: oklch(0.62 0.14 300);
+    --mila-input-ring-focus: oklch(0.45 0.08 300 / 0.45);
+    --mila-input-border-error: oklch(0.55 0.22 25);
+    --mila-input-ring-error: oklch(0.5 0.2 25 / 0.4);
+    --mila-input-bg-disabled: oklch(0.22 0.02 260);
+    --mila-input-placeholder: oklch(0.65 0.02 260);
+    --mila-input-text-value: oklch(0.75 0.12 300);
+    --mila-input-text-focus: oklch(0.82 0.1 300);
+    --mila-input-text-error: oklch(0.88 0.05 300);
+    --mila-input-text-disabled: oklch(0.55 0.02 260);
+    --mila-input-border-with-value: oklch(0.45 0.02 260);
+    --mila-label-fg: oklch(0.95 0.02 310);
+    --mila-accordion-border: oklch(1 0 0 / 12%);
+    --mila-accordion-trigger-fg: oklch(0.95 0 0);
+    --mila-accordion-content-fg: oklch(0.95 0 0);
+    --mila-accordion-trigger-focus-border: oklch(0.55 0.02 260);
+    --mila-card-bg: oklch(0.205 0 0);
+    --mila-card-border: oklch(1 0 0 / 12%);
+    --mila-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px 0 rgb(0 0 0 / 0.2);
+    --mila-card-title-fg: oklch(0.985 0 0);
+    --mila-card-description-fg: oklch(0.65 0.02 260);
+    --mila-tabs-list-bg: oklch(0.28 0.02 260);
+    --mila-tabs-trigger-active-bg: oklch(0.205 0 0);
+    --mila-tabs-trigger-active-shadow: var(--mila-card-shadow);
+    --mila-tabs-trigger-fg: oklch(0.985 0 0);
+    --mila-tabs-trigger-inactive-hover-bg: oklch(0.33 0.02 260);
+    --mila-tabs-trigger-focus-ring: oklch(0.45 0.08 300 / 0.45);
+    --mila-tabs-content-fg: oklch(0.985 0 0);
+    --mila-sidebar-item-fg: oklch(0.82 0.02 260);
+    --mila-sidebar-item-active-bg: oklch(0.28 0.02 260);
+    --mila-sidebar-item-hover-bg: oklch(0.3 0.02 260);
+    --mila-sidebar-item-focus-ring: oklch(0.45 0.08 300 / 0.45);
+    --mila-sidebar-group-label-fg: oklch(0.62 0.02 260);
+    --mila-sidebar-sub-rail: oklch(0.45 0.02 260);
+    --mila-sidebar-workspace-bg: oklch(0.22 0.01 260);
+    --mila-sidebar-workspace-border: oklch(1 0 0 / 12%);
+    --mila-sidebar-workspace-title-fg: oklch(0.985 0 0);
+    --mila-sidebar-workspace-subtitle-fg: oklch(0.65 0.02 260);
+    --mila-sidebar-workspace-shadow: var(--mila-card-shadow);
+    --mila-nav-menu-trigger-fg: oklch(0.62 0.14 310);
+    --mila-nav-menu-trigger-fg-open: oklch(0.82 0.1 300);
+    --mila-nav-menu-trigger-focus-ring: oklch(0.45 0.08 300 / 0.45);
+    --mila-nav-menu-content-bg: oklch(0.205 0 0);
+    --mila-nav-menu-content-border: oklch(0.45 0.02 260);
+    --mila-nav-menu-content-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.2);
+    --mila-nav-menu-item-title: oklch(0.985 0 0);
+    --mila-nav-menu-item-description: oklch(0.65 0.02 260);
+    --mila-nav-menu-item-hover-bg: oklch(0.28 0.02 260);
+    --mila-pagination-fg: oklch(0.62 0.14 310);
+    --mila-pagination-active-border: oklch(0.62 0.14 310);
+    --mila-pagination-active-bg: oklch(0.205 0 0);
+    --mila-pagination-active-shadow: var(--mila-card-shadow);
+    --mila-pagination-page-hover-bg: oklch(0.28 0.02 260);
+    --mila-pagination-ellipsis-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.2);
+    --mila-dialog-overlay-bg: rgb(0 0 0 / 0.65);
+    --mila-dialog-bg: oklch(0.205 0 0);
+    --mila-dialog-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -4px rgb(0 0 0 / 0.25);
+    --mila-dialog-title-fg: oklch(0.985 0 0);
+    --mila-dialog-description-fg: oklch(0.65 0.02 260);
+    --mila-dialog-close-fg: oklch(0.985 0 0);
+    --mila-dialog-close-focus-ring: oklch(0.45 0.08 300 / 0.45);
+    --mila-dialog-content-focus-ring: oklch(0.45 0.08 300 / 0.45);
+    --mila-drawer-handle-bg: oklch(0.28 0.01 260);
+    --mila-alert-dialog-bg: oklch(0.205 0 0);
+    --mila-alert-dialog-border: oklch(1 0 0 / 12%);
+    --mila-alert-dialog-shadow: 0 10px 15px 0 rgb(0 0 0 / 0.35), 0 4px 6px 0 rgb(0 0 0 / 0.25);
+    --mila-alert-dialog-title-fg: oklch(0.985 0 0);
+    --mila-alert-dialog-description-fg: oklch(0.65 0.02 260);
+    --mila-alert-dialog-content-focus-ring: oklch(0.45 0.08 300 / 0.45);
+    --mila-sonner-bg: oklch(0.205 0 0);
+    --mila-sonner-border: oklch(1 0 0 / 12%);
+    --mila-sonner-shadow: var(--mila-card-shadow);
+    --mila-sonner-title-fg: oklch(0.985 0 0);
+    --mila-sonner-description-fg: oklch(0.75 0.02 260);
+    --mila-sonner-icon-fg: oklch(0.985 0 0);
+    --mila-sonner-action-bg: oklch(0.28 0.06 300);
+    --mila-sonner-action-border: oklch(0.45 0.08 300 / 0.45);
+    --mila-sonner-action-fg: oklch(0.88 0.08 300);
+    --mila-sonner-action-focus-ring: oklch(0.45 0.08 300 / 0.45);
+    --mila-sonner-close-border: oklch(1 0 0 / 12%);
+    --mila-sonner-close-bg: oklch(0.205 0 0);
+    --mila-sonner-close-fg: oklch(0.985 0 0);
+    --mila-sonner-progress-caption-fg: oklch(0.62 0.02 260);
+    --mila-hover-card-bg: oklch(0.205 0 0);
+    --mila-hover-card-border: oklch(0.45 0.02 260);
+    --mila-hover-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.25);
+    --mila-hover-card-title-fg: oklch(0.985 0 0);
+    --mila-hover-card-body-fg: oklch(0.985 0 0);
+    --mila-hover-card-meta-fg: oklch(0.62 0.02 260);
+    --mila-skeleton-bg: oklch(0.28 0 0);
+    --mila-resizable-divider: oklch(0.42 0.02 260);
+    --mila-resizable-handle-bg: oklch(0.35 0.01 260);
+    --mila-resizable-grip-fg: oklch(0.72 0 0);
+    --mila-scroll-area-border: oklch(1 0 0 / 12%);
+    --mila-scroll-area-bg: oklch(0.205 0 0);
+    --mila-scroll-area-thumb: oklch(0.45 0.02 260);
+    --mila-scroll-area-thumb-hover: oklch(0.55 0.02 260);
+    --mila-command-menu-bg: oklch(0.205 0 0);
+    --mila-command-menu-border: oklch(0.45 0.02 260);
+    --mila-command-menu-shadow: 0 4px 6px 0 rgb(0 0 0 / 0.35), 0 2px 4px 0 rgb(0 0 0 / 0.25);
+    --mila-command-input-slot-bg: oklch(0.22 0.01 260);
+    --mila-command-input-icon: oklch(0.65 0.02 260);
+    --mila-command-item-hover-bg: oklch(0.28 0.02 260);
+    --mila-command-item-text: oklch(0.985 0 0);
+    --mila-command-separator: oklch(0.45 0.02 260);
+    --mila-command-group-heading: oklch(0.62 0.02 260);
+    --mila-command-close-fg: oklch(0.985 0 0);
+    --mila-command-close-focus-ring: oklch(0.45 0.08 300 / 0.45);
+    --mila-breadcrumb-muted-fg: oklch(0.65 0.02 260);
+    --mila-breadcrumb-current-fg: oklch(0.985 0 0);
+    --mila-breadcrumb-separator-fg: oklch(0.55 0.02 260);
+    --mila-breadcrumb-trigger-shadow: var(--mila-pagination-ellipsis-shadow);
+    --mila-table-border: oklch(1 0 0 / 12%);
+    --mila-table-header-bg: oklch(0.22 0.01 260);
+    --mila-table-header-fg: oklch(0.985 0 0);
+    --mila-table-cell-fg: oklch(0.985 0 0);
+    --mila-table-row-odd-bg: oklch(0.205 0 0);
+    --mila-table-row-even-bg: oklch(0.24 0.01 260);
+    --mila-table-footer-bg: oklch(0.24 0.01 260);
+    --mila-data-table-header-hover-bg: oklch(0.28 0.02 260);
+    --mila-data-table-row-hover-bg: oklch(0.28 0.02 260);
+    --mila-data-table-row-selected-bg: oklch(0.35 0.02 260);
+    --mila-avatar-fallback-bg: oklch(0.28 0.01 260);
+    --mila-avatar-fallback-fg: oklch(0.88 0.02 260);
+    --mila-badge-primary-bg: oklch(0.92 0 0);
+    --mila-badge-primary-fg: oklch(0.145 0 0);
+    --mila-badge-secondary-bg: oklch(0.269 0 0);
+    --mila-badge-secondary-fg: oklch(0.985 0 0);
+    --mila-badge-outline-border: oklch(1 0 0 / 14%);
+    --mila-badge-destructive-bg: oklch(0.55 0.22 25);
+    --mila-badge-destructive-fg: oklch(0.985 0 0);
+    --mila-badge-error-number-bg: oklch(0.25 0.08 25);
+    --mila-badge-error-number-border: oklch(0.35 0.12 25);
+    --mila-badge-error-number-fg: oklch(0.85 0.12 20);
+    --mila-badge-error-number-fg-focus: oklch(0.92 0.08 20);
+    --mila-badge-info-bg: oklch(0.55 0.2 260);
+    --mila-badge-info-fg: oklch(0.985 0 0);
+    --mila-button-primary-bg: oklch(0.55 0.14 310);
+    --mila-button-primary-hover: oklch(0.32 0.12 310);
+    --mila-button-primary-fg: oklch(0.985 0 0);
+    --mila-button-destructive-bg: oklch(0.55 0.22 25);
+    --mila-button-destructive-hover: oklch(0.35 0.15 25);
+    --mila-button-destructive-fg: oklch(0.985 0 0);
+    --mila-button-secondary-bg: oklch(0.28 0.04 310);
+    --mila-button-secondary-border: oklch(0.45 0.08 310);
+    --mila-button-secondary-fg: oklch(0.82 0.1 310);
+    --mila-button-secondary-hover-bg: oklch(0.38 0.08 310);
+    --mila-button-secondary-hover-border: oklch(0.5 0.1 310);
+    --mila-button-secondary-hover-fg: oklch(0.95 0.02 310);
+    --mila-button-outline-border: oklch(0.65 0.14 310);
+    --mila-button-outline-fg: oklch(0.75 0.12 300);
+    --mila-button-outline-hover-bg: oklch(0.3 0.06 310);
+    --mila-button-outline-hover-border: oklch(0.82 0.1 300);
+    --mila-button-outline-hover-fg: oklch(0.92 0.05 300);
+    --mila-button-outline-disabled-bg: oklch(0.25 0.02 260);
+    --mila-button-outline-disabled-border: oklch(0.4 0.02 260);
+    --mila-button-outline-disabled-fg: oklch(0.6 0.02 260);
+    --mila-button-ghost-fg: oklch(0.75 0.12 300);
+    --mila-button-ghost-hover-bg: oklch(0.3 0.06 310);
+    --mila-button-ghost-hover-fg: oklch(0.92 0.05 300);
+    --mila-button-disabled-bg: oklch(0.28 0.02 260);
+    --mila-button-disabled-fg: oklch(0.55 0.02 260);
+    --mila-alert-border: oklch(1 0 0 / 12%);
+    --mila-alert-neutral-title: oklch(0.95 0 0);
+    --mila-alert-neutral-description: oklch(0.65 0.02 260);
+    --mila-alert-error-fg: oklch(0.65 0.2 25);
+    --mila-icon-button-primary-bg: oklch(0.92 0 0);
+    --mila-icon-button-primary-hover: oklch(0.82 0 0);
+    --mila-icon-button-primary-fg: oklch(0.145 0 0);
+    --mila-icon-button-secondary-bg: oklch(0.28 0.01 260);
+    --mila-icon-button-secondary-hover: oklch(0.32 0.02 260);
+    --mila-icon-button-secondary-fg: oklch(0.95 0 0);
+    --mila-icon-button-outline-border: oklch(1 0 0 / 14%);
+    --mila-icon-button-outline-hover-bg: oklch(0.28 0.02 260);
+    --mila-icon-button-ghost-hover-bg: oklch(0.28 0.02 260);
+    --mila-icon-button-destructive-bg: oklch(0.55 0.22 25);
+    --mila-icon-button-destructive-hover: oklch(0.48 0.2 25);
+    --mila-icon-button-destructive-fg: oklch(0.985 0 0);
+    --mila-link-button-fg: oklch(0.95 0 0);
+    --mila-tooltip-bg: oklch(0.22 0 0);
+    --mila-tooltip-fg: oklch(0.985 0 0);
+    --mila-separator: oklch(0.42 0.02 260);
+    --mila-chart-grid: oklch(0.32 0.02 260);
+    --mila-chart-axis-fg: oklch(0.65 0.02 260);
+    --mila-chart-tooltip-bg: oklch(0.205 0 0);
+    --mila-chart-tooltip-border: oklch(1 0 0 / 12%);
+    --mila-chart-tooltip-label-fg: oklch(0.985 0 0);
+    --mila-chart-tooltip-muted-fg: oklch(0.65 0.02 260);
+    --mila-chart-tooltip-value-fg: oklch(0.985 0 0);
+    --mila-otp-slot-border: oklch(1 0 0 / 18%);
+    --mila-otp-fg: oklch(0.95 0 0);
+    --mila-otp-separator-bar: oklch(0.95 0 0);
+    --mila-slider-track-bg: oklch(0.28 0.01 260);
+    --mila-slider-track-border: oklch(0.42 0.02 260);
+    --mila-slider-range: oklch(0.55 0.14 310);
+    --mila-slider-thumb-bg: oklch(0.98 0 0);
+    --mila-slider-thumb-border: oklch(0.65 0.14 310);
+    --mila-slider-thumb-ring-focus: oklch(0.45 0.08 300 / 0.45);
+}
+
+/*
+ * Sonner default (top): older toasts translate down — peek from the bottom.
+ * MILA / Figma (node 295:240815): older toasts sit behind with a strip visible above — negate Y offset.
+ */
+[data-sonner-toaster][data-y-position="top"] [data-sonner-toast][data-mounted="true"][data-expanded="true"] {
+    --y: translateY(calc(-1 * var(--offset)));
+}
+[data-sonner-toaster][data-y-position="top"] [data-sonner-toast][data-expanded="false"][data-front="false"] {
+    --y: translateY(calc(-1 * var(--lift-amount) * var(--toasts-before)))
+        scale(calc(-1 * var(--scale)));
+}
+[data-sonner-toaster][data-y-position="top"]
+    [data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="true"] {
+    --y: translateY(calc((-1 * var(--offset)) - 100%));
+}
+
+/* react-day-picker — MILA accent (see Figma Date Picker in Obra shadcn — MILA) */
+.mila-daypicker.rdp-root {
+    --rdp-accent-color: var(--mila-calendar-accent);
+    --rdp-accent-background-color: var(--mila-calendar-accent-bg);
+    --rdp-today-color: var(--mila-calendar-accent);
+    --rdp-day_button-border-radius: 0.5rem;
+    --rdp-day-height: 2.25rem;
+    --rdp-day-width: 2.25rem;
+    --rdp-day_button-height: 2rem;
+    --rdp-day_button-width: 2rem;
+    --rdp-nav_button-height: 2.25rem;
+    --rdp-nav_button-width: 2.25rem;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+}