From b4579340ffb0eb584416ca545e61cebfe9a1cef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F=D1=81=20=D0=A1=D1=83=D0=BB=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=BE=D0=B2?= <si@op16.ru>
Date: Sun, 6 Sep 2026 23:31:43 +0300
Subject: [PATCH] =?UTF-8?q?DI2:=20=D0=BC=D0=BE=D1=81=D1=82=20=D1=82=D0=B5?=
 =?UTF-8?q?=D0=BC/=D1=81=D0=BA=D0=B8=D0=BD=D0=BE=D0=B2=20iistwin=20?=
 =?UTF-8?q?=E2=80=94=20Di2ThemeProvider,=20=D0=BE=D0=B1=D1=89=D0=B8=D0=B9?=
 =?UTF-8?q?=20generated-skins.css,=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?=
 =?UTF-8?q?=20=D0=B2=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=82=D0=B5=20=D0=BE?=
 =?UTF-8?q?=D1=81=D0=BD=D0=BE=D0=B2=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BA=D0=BB?=
 =?UTF-8?q?=D0=B8=D0=B5=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- vite.config.di2.ts + client-di2/tsconfig.json: алиас @skin → client/src/themes (tokens, skins, generated-skins.css — единый источник токенов)
- client-di2/src/themes/Di2ThemeProvider.tsx: порт логики ThemeProvider основного клиента (localStorage['skin'] → скин организации → 'iistwin'; runtime CSS кастомных скинов через generateSkinCss; data-skin/data-theme/class light|dark на <html>; контекст с toggleTheme). Ключи 'skin'/'theme' общие с iistwin — выбор синхронизируется между приложениями
- main.tsx: обёртка <Di2ThemeProvider> вокруг App
- tailwind.config.ts DI2: цвета hsl(var(--x) / <alpha-value>) → var(--x), радиусы → var(--radius) с каскадом calc, добавлены warning/success/info
- client-di2/src/index.css: собственные HSL-тройки заменены fallback-блоками основного клиента (до гидратации), первой строкой @import общего generated-skins.css; DI2-only переменные (--card-border, --popover-border, *-border, --button-outline, --badge-outline) переопределены через color-mix от семантических токенов; удалены --opaque-button-border-intensity и hsl(from ...) relative-color вычисления; жёсткие --font-sans: Open Sans убраны (шрифты эмитит generateSkinCss из токенов скина)
- client-di2/index.html: lang=ru, viewport без maximum-scale + interactive-widget=resizes-content, мега-link Google Fonts (23 семейства) заменён на Inter + DM Mono как в основном клиенте
- Alpha-модификаторы семантических цветов (166 мест: bg-muted/50, border-primary/30 и т.п.) заменены на arbitrary values color-mix(in oklab, var(--x) NN%, transparent) — Tailwind v3 молча не генерирует /NN для var()-цветов; палитровые цвета (green-500/10 и т.п.) не тронуты
---
 client-di2/index.html                         |  12 +-
 .../components/category-override-dialog.tsx   |  10 +-
 client-di2/src/components/database-error.tsx  |   2 +-
 .../src/components/draggable-column-list.tsx  |   4 +-
 client-di2/src/components/ui/alert.tsx        |   2 +-
 client-di2/src/components/ui/calendar.tsx     |   4 +-
 client-di2/src/components/ui/chart.tsx        |   4 +-
 .../src/components/ui/navigation-menu.tsx     |   2 +-
 client-di2/src/components/ui/sidebar.tsx      |   2 +-
 client-di2/src/components/ui/table.tsx        |   4 +-
 client-di2/src/components/ui/toast.tsx        |   4 +-
 client-di2/src/index.css                      | 285 +++++++++---------
 client-di2/src/main.tsx                       |   5 +-
 client-di2/src/pages/audit.tsx                |   4 +-
 client-di2/src/pages/calculations.tsx         |  34 +--
 client-di2/src/pages/dashboard.tsx            |   8 +-
 client-di2/src/pages/debt.tsx                 |  16 +-
 client-di2/src/pages/expense-categories.tsx   |  22 +-
 client-di2/src/pages/expenses-overview.tsx    |  22 +-
 client-di2/src/pages/expenses.tsx             |  10 +-
 client-di2/src/pages/heatmap.tsx              |  16 +-
 client-di2/src/pages/income-categories.tsx    |  28 +-
 client-di2/src/pages/income-overview.tsx      |  24 +-
 client-di2/src/pages/income.tsx               |  10 +-
 client-di2/src/pages/planning.tsx             |  10 +-
 client-di2/src/pages/profitability.tsx        |   6 +-
 client-di2/src/pages/salary.tsx               |  34 +--
 client-di2/src/pages/settings.tsx             |  10 +-
 client-di2/src/themes/Di2ThemeProvider.tsx    | 227 ++++++++++++++
 client-di2/tailwind.config.ts                 |  95 +++---
 client-di2/tsconfig.json                      |   4 +-
 vite.config.di2.ts                            |   2 +
 32 files changed, 581 insertions(+), 341 deletions(-)
 create mode 100644 client-di2/src/themes/Di2ThemeProvider.tsx

diff --git a/client-di2/index.html b/client-di2/index.html
index 77b6691..713c2d9 100644
--- a/client-di2/index.html
+++ b/client-di2/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
     <link rel="icon" type="image/png" href="favicon.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fira+Code:wght@300..700&family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Oxanium:wght@200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <!-- Те же шрифты, что в основном клиенте iistwin: Inter (variable) — sans во всех встроенных скинах,
+         DM Mono — mono в скине twenty. Скины подключают их через токены font (--font-sans/--font-mono). -->
+    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/client-di2/src/components/category-override-dialog.tsx b/client-di2/src/components/category-override-dialog.tsx
index cb690e1..b939237 100644
--- a/client-di2/src/components/category-override-dialog.tsx
+++ b/client-di2/src/components/category-override-dialog.tsx
@@ -162,7 +162,7 @@ function TreeNode({ cat, depth, expanded, onToggle, onSelect, currentOverrideCat
   return (
     <div>
       <div
-        className={`w-full text-left px-3 py-1.5 text-sm flex items-center gap-1 transition-colors ${isSelected ? "bg-primary/10 text-primary" : "hover:bg-muted/50"} ${isSearchAncestorOnly ? "opacity-60" : ""}`}
+        className={`w-full text-left px-3 py-1.5 text-sm flex items-center gap-1 transition-colors ${isSelected ? "bg-[color-mix(in_oklab,var(--primary)_10%,transparent)] text-primary" : "hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)]"} ${isSearchAncestorOnly ? "opacity-60" : ""}`}
         style={{ paddingLeft: `${12 + depth * 16}px` }}
       >
         {hasChildren ? (
@@ -241,7 +241,7 @@ function RootGroupRow({ group, expanded, onToggle, onSelect, currentOverrideCate
   return (
     <div>
       <div
-        className={`flex items-center gap-1 px-3 py-1.5 cursor-pointer sticky top-0 z-10 border-b border-border/40 ${isContext ? "bg-primary/5 hover:bg-primary/10" : "bg-background hover:bg-muted/50"}`}
+        className={`flex items-center gap-1 px-3 py-1.5 cursor-pointer sticky top-0 z-10 border-b border-[color-mix(in_oklab,var(--border)_40%,transparent)] ${isContext ? "bg-[color-mix(in_oklab,var(--primary)_5%,transparent)] hover:bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]" : "bg-background hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)]"}`}
         onClick={() => onToggle(group.id)}
         data-testid={`root-group-${group.id}`}
       >
@@ -251,11 +251,11 @@ function RootGroupRow({ group, expanded, onToggle, onSelect, currentOverrideCate
             : <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />}
         </span>
         {isExpanded
-          ? <FolderOpen className={`w-3.5 h-3.5 shrink-0 ${isContext ? "text-primary" : "text-primary/70"}`} />
-          : <Folder className={`w-3.5 h-3.5 shrink-0 ${isContext ? "text-primary" : "text-primary/70"}`} />}
+          ? <FolderOpen className={`w-3.5 h-3.5 shrink-0 ${isContext ? "text-primary" : "text-[color-mix(in_oklab,var(--primary)_70%,transparent)]"}`} />
+          : <Folder className={`w-3.5 h-3.5 shrink-0 ${isContext ? "text-primary" : "text-[color-mix(in_oklab,var(--primary)_70%,transparent)]"}`} />}
         <span className={`text-sm font-medium ${isContext ? "text-primary" : "text-foreground"}`}>{group.name}</span>
         {isContext && (
-          <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4 ml-auto shrink-0 border-primary/50 text-primary">текущий</Badge>
+          <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4 ml-auto shrink-0 border-[color-mix(in_oklab,var(--primary)_50%,transparent)] text-primary">текущий</Badge>
         )}
       </div>
       {(isExpanded || searchActive) && (
diff --git a/client-di2/src/components/database-error.tsx b/client-di2/src/components/database-error.tsx
index 883c11a..fda117b 100644
--- a/client-di2/src/components/database-error.tsx
+++ b/client-di2/src/components/database-error.tsx
@@ -9,7 +9,7 @@ export function DatabaseError({ error }: { error?: Error | null }) {
   return (
     <div
       data-testid="database-error-banner"
-      className="flex items-center gap-3 bg-destructive/10 text-destructive border border-destructive/20 rounded-md px-4 py-3 text-sm"
+      className="flex items-center gap-3 bg-[color-mix(in_oklab,var(--destructive)_10%,transparent)] text-destructive border border-[color-mix(in_oklab,var(--destructive)_20%,transparent)] rounded-md px-4 py-3 text-sm"
     >
       <AlertTriangle className="h-5 w-5 shrink-0" />
       <span>{message}</span>
diff --git a/client-di2/src/components/draggable-column-list.tsx b/client-di2/src/components/draggable-column-list.tsx
index 4437acb..9e0b999 100644
--- a/client-di2/src/components/draggable-column-list.tsx
+++ b/client-di2/src/components/draggable-column-list.tsx
@@ -86,10 +86,10 @@ export function DraggableColumnList({
             onDragEnd={handleDragEnd}
             className={`flex items-center gap-1.5 cursor-grab active:cursor-grabbing text-sm rounded px-1 py-1 select-none transition-colors ${
               dragIdx === idx ? "opacity-40 bg-muted" : ""
-            } ${overIdx === idx && dragIdx !== idx ? "border-t-2 border-primary" : ""} hover:bg-muted/50`}
+            } ${overIdx === idx && dragIdx !== idx ? "border-t-2 border-primary" : ""} hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)]`}
             data-testid={`draggable-col-${col.key}`}
           >
-            <GripVertical className="w-3.5 h-3.5 text-muted-foreground/50 shrink-0" />
+            <GripVertical className="w-3.5 h-3.5 text-[color-mix(in_oklab,var(--muted-foreground)_50%,transparent)] shrink-0" />
             <Checkbox
               checked={visibleCols.includes(col.key)}
               onCheckedChange={() => onToggle(col.key)}
diff --git a/client-di2/src/components/ui/alert.tsx b/client-di2/src/components/ui/alert.tsx
index 41fa7e0..083d39d 100644
--- a/client-di2/src/components/ui/alert.tsx
+++ b/client-di2/src/components/ui/alert.tsx
@@ -10,7 +10,7 @@ const alertVariants = cva(
       variant: {
         default: "bg-background text-foreground",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+          "border-[color-mix(in_oklab,var(--destructive)_50%,transparent)] text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
     },
     defaultVariants: {
diff --git a/client-di2/src/components/ui/calendar.tsx b/client-di2/src/components/ui/calendar.tsx
index 2174f71..d711607 100644
--- a/client-di2/src/components/ui/calendar.tsx
+++ b/client-di2/src/components/ui/calendar.tsx
@@ -34,7 +34,7 @@ function Calendar({
         head_cell:
           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-[color-mix(in_oklab,var(--accent)_50%,transparent)] [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
@@ -44,7 +44,7 @@ function Calendar({
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
         day_today: "bg-accent text-accent-foreground",
         day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+          "day-outside text-muted-foreground aria-selected:bg-[color-mix(in_oklab,var(--accent)_50%,transparent)] aria-selected:text-muted-foreground",
         day_disabled: "text-muted-foreground opacity-50",
         day_range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
diff --git a/client-di2/src/components/ui/chart.tsx b/client-di2/src/components/ui/chart.tsx
index 39fba6d..8502e04 100644
--- a/client-di2/src/components/ui/chart.tsx
+++ b/client-di2/src/components/ui/chart.tsx
@@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-[color-mix(in_oklab,var(--border)_50%,transparent)] [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className
         )}
         {...props}
@@ -179,7 +179,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-[color-mix(in_oklab,var(--border)_50%,transparent)] bg-background px-2.5 py-1.5 text-xs shadow-xl",
           className
         )}
       >
diff --git a/client-di2/src/components/ui/navigation-menu.tsx b/client-di2/src/components/ui/navigation-menu.tsx
index 411f519..89fbf02 100644
--- a/client-di2/src/components/ui/navigation-menu.tsx
+++ b/client-di2/src/components/ui/navigation-menu.tsx
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-[color-mix(in_oklab,var(--accent)_50%,transparent)] data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
 )
 
 const NavigationMenuTrigger = React.forwardRef<
diff --git a/client-di2/src/components/ui/sidebar.tsx b/client-di2/src/components/ui/sidebar.tsx
index 41362f6..c1e57f7 100644
--- a/client-di2/src/components/ui/sidebar.tsx
+++ b/client-di2/src/components/ui/sidebar.tsx
@@ -406,7 +406,7 @@ function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
+        "text-[color-mix(in_oklab,var(--sidebar-foreground)_70%,transparent)] ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}
diff --git a/client-di2/src/components/ui/table.tsx b/client-di2/src/components/ui/table.tsx
index 7f3502f..95cb988 100644
--- a/client-di2/src/components/ui/table.tsx
+++ b/client-di2/src/components/ui/table.tsx
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] font-medium [&>tr]:last:border-b-0",
       className
     )}
     {...props}
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] data-[state=selected]:bg-muted",
       className
     )}
     {...props}
diff --git a/client-di2/src/components/ui/toast.tsx b/client-di2/src/components/ui/toast.tsx
index a822477..0083456 100644
--- a/client-di2/src/components/ui/toast.tsx
+++ b/client-di2/src/components/ui/toast.tsx
@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-[color-mix(in_oklab,var(--muted)_40%,transparent)] group-[.destructive]:hover:border-[color-mix(in_oklab,var(--destructive)_30%,transparent)] group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
       className
     )}
     {...props}
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-md p-1 text-[color-mix(in_oklab,var(--foreground)_50%,transparent)] opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     )}
     toast-close=""
diff --git a/client-di2/src/index.css b/client-di2/src/index.css
index 7170b43..d90c621 100644
--- a/client-di2/src/index.css
+++ b/client-di2/src/index.css
@@ -1,3 +1,7 @@
+/* Общий CSS встроенных скинов iistwin (generateAllSkinsCss → [data-skin][data-theme]).
+   Путь относительно этого файла (client-di2/src/index.css). */
+@import '../../client/src/themes/styles/generated-skins.css';
+
 /* Конфиг Tailwind субаппа DI2 — иначе postcss-плагин возьмёт корневой конфиг iistwin */
 @config "../tailwind.config.ts";
 
@@ -5,167 +9,150 @@
 @tailwind components;
 @tailwind utilities;
 
-/* LIGHT MODE */
+/*
+ * Fallback переменные для случая, когда data-skin/data-theme ещё не применены
+ * (до монтирования Di2ThemeProvider). Основные значения берутся из generated-skins.css.
+ * Блоки скопированы из client/src/index.css — DI2 теперь на тех же токенах, что iistwin.
+ */
 :root {
-  --button-outline: rgba(0,0,0, .10);
-  --badge-outline: rgba(0,0,0, .05);
-  --opaque-button-border-intensity: -8;
-  --elevate-1: rgba(0,0,0, .03);
-  --elevate-2: rgba(0,0,0, .08);
-  --background: 0 0% 100%;
-  --foreground: 0 0% 9%;
-  --border: 0 0% 91%;
-  --card: 0 0% 98%;
-  --card-foreground: 0 0% 9%;
-  --card-border: 0 0% 94%;
-  --sidebar: 0 0% 96%;
-  --sidebar-foreground: 0 0% 9%;
-  --sidebar-border: 0 0% 92%;
-  --sidebar-primary: 210 85% 48%;
-  --sidebar-primary-foreground: 210 85% 98%;
-  --sidebar-accent: 210 12% 88%;
-  --sidebar-accent-foreground: 210 12% 15%;
-  --sidebar-ring: 210 85% 48%;
-  --popover: 0 0% 94%;
-  --popover-foreground: 0 0% 9%;
-  --popover-border: 0 0% 88%;
-  --primary: 210 85% 48%;
-  --primary-foreground: 210 85% 98%;
-  --secondary: 210 6% 90%;
-  --secondary-foreground: 210 6% 12%;
-  --muted: 210 8% 92%;
-  --muted-foreground: 210 8% 38%;
-  --accent: 210 10% 93%;
-  --accent-foreground: 210 10% 12%;
-  --destructive: 0 72% 51%;
-  --destructive-foreground: 0 72% 98%;
-  --input: 0 0% 75%;
-  --ring: 210 85% 48%;
-  --chart-1: 210 85% 42%;
-  --chart-2: 195 75% 45%;
-  --chart-3: 225 70% 48%;
-  --chart-4: 180 65% 40%;
-  --chart-5: 240 60% 50%;
-  --font-sans: Open Sans, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Menlo, monospace;
-  --radius: .5rem;
-  --shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
-  --shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
-  --shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
-  --shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
-  --shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
-  --shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
-  --shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
-  --shadow-2xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
-  --tracking-normal: 0em;
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(220 10% 15%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(220 10% 15%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(220 10% 15%);
+  --primary: hsl(220 10% 15%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(220 5% 96%);
+  --secondary-foreground: hsl(220 10% 15%);
+  --muted: hsl(220 5% 96%);
+  --muted-foreground: hsl(220 5% 45%);
+  --accent: hsl(220 5% 93%);
+  --accent-foreground: hsl(220 10% 15%);
+  --destructive: hsl(0 72% 51%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(220 5% 90%);
+  --input: hsl(0 0% 100%);
+  --ring: hsl(220 10% 15%);
+
+  --status-done: hsl(142 50% 45%);
+  --status-progress: hsl(45 90% 50%);
+  --status-overdue: hsl(0 70% 55%);
+  --status-paused: hsl(220 5% 60%);
+
+  --warning: hsl(48 96% 89%);
+  --warning-foreground: hsl(25 83% 31%);
+  --success: hsl(141 84% 93%);
+  --success-foreground: hsl(142 72% 24%);
+  --info: hsl(214 95% 93%);
+  --info-foreground: hsl(224 71% 40%);
+
+  --chart-1: hsl(220 10% 25%);
+  --chart-2: hsl(142 50% 45%);
+  --chart-3: hsl(45 90% 50%);
+  --chart-4: hsl(200 70% 50%);
+  --chart-5: hsl(0 70% 55%);
+
+  --sidebar: hsl(0 0% 100%);
+  --sidebar-foreground: hsl(220 10% 15%);
+  --sidebar-primary: hsl(220 10% 15%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(220 5% 96%);
+  --sidebar-accent-foreground: hsl(220 10% 15%);
+  --sidebar-border: hsl(220 5% 92%);
+  --sidebar-ring: hsl(220 10% 15%);
+
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "DM Mono", "SF Mono", "Monaco", "Inconsolata", monospace;
+
+  --radius: 0.25rem;
+
+  --shadow-2xs: none;
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow: none;
+  --shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+  --shadow-lg: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  --shadow-2xl: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+
+  --tracking-normal: -0.01em;
   --spacing: 0.25rem;
 
-/* Fallback for older browsers */
-  --sidebar-primary-border: hsl(var(--sidebar-primary));
-  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+  --elevate-1: rgba(0, 0, 0, 0.05);
+  --elevate-2: rgba(0, 0, 0, 0.08);
 
-  /* Fallback for older browsers */
-  --sidebar-accent-border: hsl(var(--sidebar-accent));
-  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
-
-  /* Fallback for older browsers */
-  --primary-border: hsl(var(--primary));
-  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
-
-  /* Fallback for older browsers */
-  --secondary-border: hsl(var(--secondary));
-  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
-
-  /* Fallback for older browsers */
-  --muted-border: hsl(var(--muted));
-  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
-
-  /* Fallback for older browsers */
-  --accent-border: hsl(var(--accent));
-  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
-
-  /* Fallback for older browsers */
-  --destructive-border: hsl(var(--destructive));
-  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+  /* DI2-only переменные: теперь производные от семантических токенов скинов.
+     Раньше считались relative-color из голых HSL-троек — больше не нужно. */
+  --card-border: var(--border);
+  --popover-border: var(--border);
+  --primary-border: color-mix(in oklab, var(--primary) 82%, black);
+  --secondary-border: color-mix(in oklab, var(--secondary) 82%, black);
+  --muted-border: color-mix(in oklab, var(--muted) 82%, black);
+  --accent-border: color-mix(in oklab, var(--accent) 82%, black);
+  --destructive-border: color-mix(in oklab, var(--destructive) 82%, black);
+  --sidebar-primary-border: color-mix(in oklab, var(--sidebar-primary) 82%, black);
+  --sidebar-accent-border: color-mix(in oklab, var(--sidebar-accent) 82%, black);
+  --button-outline: color-mix(in oklab, var(--primary) 35%, transparent);
+  --badge-outline: color-mix(in oklab, var(--muted-foreground) 35%, transparent);
 }
 
 .dark {
-  --button-outline: rgba(255,255,255, .10);
-  --badge-outline: rgba(255,255,255, .05);
-  --opaque-button-border-intensity: 9;
-  --elevate-1: rgba(255,255,255, .04);
-  --elevate-2: rgba(255,255,255, .09);
-  --background: 0 0% 8%;
-  --foreground: 0 0% 95%;
-  --border: 0 0% 16%;
-  --card: 0 0% 10%;
-  --card-foreground: 0 0% 95%;
-  --card-border: 0 0% 13%;
-  --sidebar: 0 0% 12%;
-  --sidebar-foreground: 0 0% 95%;
-  --sidebar-border: 0 0% 15%;
-  --sidebar-primary: 210 85% 52%;
-  --sidebar-primary-foreground: 210 85% 98%;
-  --sidebar-accent: 210 10% 18%;
-  --sidebar-accent-foreground: 210 10% 90%;
-  --sidebar-ring: 210 85% 52%;
-  --popover: 0 0% 14%;
-  --popover-foreground: 0 0% 95%;
-  --popover-border: 0 0% 18%;
-  --primary: 210 85% 52%;
-  --primary-foreground: 210 85% 98%;
-  --secondary: 210 6% 20%;
-  --secondary-foreground: 210 6% 92%;
-  --muted: 210 8% 19%;
-  --muted-foreground: 210 8% 72%;
-  --accent: 210 10% 18%;
-  --accent-foreground: 210 10% 92%;
-  --destructive: 0 72% 51%;
-  --destructive-foreground: 0 72% 98%;
-  --input: 0 0% 30%;
-  --ring: 210 85% 52%;
-  --chart-1: 210 85% 65%;
-  --chart-2: 195 75% 68%;
-  --chart-3: 225 70% 70%;
-  --chart-4: 180 65% 62%;
-  --chart-5: 240 60% 72%;
-  --shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
-  --shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
-  --shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
-  --shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
-  --shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
-  --shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
-  --shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
-  --shadow-2xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
+  --elevate-1: rgba(255, 255, 255, 0.05);
+  --elevate-2: rgba(255, 255, 255, 0.08);
+  --background: hsl(220 10% 8%);
+  --foreground: hsl(220 5% 92%);
+  --card: hsl(220 10% 10%);
+  --card-foreground: hsl(220 5% 92%);
+  --popover: hsl(220 10% 10%);
+  --popover-foreground: hsl(220 5% 92%);
+  --primary: hsl(0 0% 100%);
+  --primary-foreground: hsl(220 10% 8%);
+  --secondary: hsl(220 10% 14%);
+  --secondary-foreground: hsl(220 5% 92%);
+  --muted: hsl(220 10% 14%);
+  --muted-foreground: hsl(220 5% 55%);
+  --accent: hsl(220 10% 16%);
+  --accent-foreground: hsl(220 5% 92%);
+  --destructive: hsl(0 70% 55%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(220 10% 18%);
+  --input: hsl(220 10% 12%);
+  --ring: hsl(0 0% 100%);
 
-/* Fallback for older browsers */
-  --sidebar-primary-border: hsl(var(--sidebar-primary));
-  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+  --status-done: hsl(142 50% 55%);
+  --status-progress: hsl(45 90% 55%);
+  --status-overdue: hsl(0 70% 60%);
+  --status-paused: hsl(220 5% 55%);
 
-  /* Fallback for older browsers */
-  --sidebar-accent-border: hsl(var(--sidebar-accent));
-  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+  --warning: hsl(32 92% 14%);
+  --warning-foreground: hsl(43 96% 56%);
+  --success: hsl(144 80% 10%);
+  --success-foreground: hsl(142 71% 58%);
+  --info: hsl(224 64% 21%);
+  --info-foreground: hsl(213 97% 81%);
 
-  /* Fallback for older browsers */
-  --primary-border: hsl(var(--primary));
-  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+  --chart-1: hsl(220 5% 70%);
+  --chart-2: hsl(142 50% 55%);
+  --chart-3: hsl(45 90% 55%);
+  --chart-4: hsl(200 70% 55%);
+  --chart-5: hsl(0 70% 60%);
 
-  /* Fallback for older browsers */
-  --secondary-border: hsl(var(--secondary));
-  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+  --sidebar: hsl(220 10% 8%);
+  --sidebar-foreground: hsl(220 5% 92%);
+  --sidebar-primary: hsl(0 0% 100%);
+  --sidebar-primary-foreground: hsl(220 10% 8%);
+  --sidebar-accent: hsl(220 10% 14%);
+  --sidebar-accent-foreground: hsl(220 5% 92%);
+  --sidebar-border: hsl(220 10% 16%);
+  --sidebar-ring: hsl(0 0% 100%);
 
-  /* Fallback for older browsers */
-  --muted-border: hsl(var(--muted));
-  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+  --radius: 0.25rem;
 
-  /* Fallback for older browsers */
-  --accent-border: hsl(var(--accent));
-  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
-
-  /* Fallback for older browsers */
-  --destructive-border: hsl(var(--destructive));
-  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+  --shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+  --shadow-lg: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  --shadow-xl: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+  --shadow-2xl: 0 8px 10px -2px rgba(0, 0, 0, 0.25);
 }
 
 @layer base {
@@ -208,7 +195,7 @@
   /* Placeholder styling for contentEditable div */
   [contenteditable][data-placeholder]:empty::before {
     content: attr(data-placeholder);
-    color: hsl(var(--muted-foreground));
+    color: var(--muted-foreground);
     pointer-events: none;
   }
 
diff --git a/client-di2/src/main.tsx b/client-di2/src/main.tsx
index 819a623..c94877d 100644
--- a/client-di2/src/main.tsx
+++ b/client-di2/src/main.tsx
@@ -1,11 +1,14 @@
 import { createRoot } from "react-dom/client";
 import { Router } from "wouter";
 import App from "./App";
+import { Di2ThemeProvider } from "./themes/Di2ThemeProvider";
 import "./index.css";
 
 // Субапп DI2 живёт под base "/di2" — wouter отрезает префикс от URL
 createRoot(document.getElementById("root")!).render(
   <Router base="/di2">
-    <App />
+    <Di2ThemeProvider>
+      <App />
+    </Di2ThemeProvider>
   </Router>
 );
diff --git a/client-di2/src/pages/audit.tsx b/client-di2/src/pages/audit.tsx
index be6611f..926c092 100644
--- a/client-di2/src/pages/audit.tsx
+++ b/client-di2/src/pages/audit.tsx
@@ -81,7 +81,7 @@ function DirectionCard({ title, data }: { title: string; data: DirectionAudit })
             </TableRow>
           </TableHeader>
           <TableBody>
-            <TableRow className="font-medium bg-muted/30">
+            <TableRow className="font-medium bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]">
               <TableCell>Всего в БД</TableCell>
               <TableCell className="text-right" data-testid={`text-db-count-${title}`}>{data.dbCount}</TableCell>
               <TableCell className="text-right">100%</TableCell>
@@ -232,7 +232,7 @@ export default function AuditPage() {
 
       {latestAudit && (
         <>
-          <Card className="bg-muted/30">
+          <Card className="bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]">
             <CardContent className="py-4">
               <div className="flex items-center gap-3">
                 <Clock className="w-4 h-4 text-muted-foreground" />
diff --git a/client-di2/src/pages/calculations.tsx b/client-di2/src/pages/calculations.tsx
index 1299ad0..36ac3cc 100644
--- a/client-di2/src/pages/calculations.tsx
+++ b/client-di2/src/pages/calculations.tsx
@@ -180,7 +180,7 @@ function CategoryTree({ cats, selected, onChange, label, treeConfigs }: {
     return (
       <div key={node.id}>
         <div
-          className="flex items-center gap-1.5 py-1 hover:bg-muted/50 rounded-sm px-1 cursor-pointer"
+          className="flex items-center gap-1.5 py-1 hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-sm px-1 cursor-pointer"
           style={{ paddingLeft: depth * 16 + 4 }}
           data-testid={`cat-node-${node.id}`}
         >
@@ -198,7 +198,7 @@ function CategoryTree({ cats, selected, onChange, label, treeConfigs }: {
             data-testid={`checkbox-cat-${node.id}`}
           />
           <span
-            className={`text-xs truncate ${node.excluded ? "line-through text-muted-foreground/50" : "text-foreground"}`}
+            className={`text-xs truncate ${node.excluded ? "line-through text-[color-mix(in_oklab,var(--muted-foreground)_50%,transparent)]" : "text-foreground"}`}
             onClick={() => { if (hasChildren) toggleExpand(node.id); }}
           >
             {node.name}
@@ -233,7 +233,7 @@ function CategoryTree({ cats, selected, onChange, label, treeConfigs }: {
             return (
               <div key={group.treeId} className="mb-1">
                 <div
-                  className="flex items-center gap-2 py-1.5 px-1 hover:bg-muted/50 rounded-sm cursor-pointer"
+                  className="flex items-center gap-2 py-1.5 px-1 hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-sm cursor-pointer"
                   data-testid={`tree-group-${group.treeId}`}
                 >
                   <button onClick={() => toggleTreeExpand(group.treeId)} className="p-0 w-4 h-4 flex items-center justify-center shrink-0">
@@ -488,7 +488,7 @@ export default function Calculations() {
       <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
         <h1 className="text-xl font-semibold text-foreground" data-testid="text-page-title">Расчеты</h1>
         <div className="flex items-center gap-2 flex-wrap">
-          <div className="flex items-center gap-1.5 bg-muted/50 rounded-md px-2 py-1">
+          <div className="flex items-center gap-1.5 bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-md px-2 py-1">
             <CalendarDays className="w-3.5 h-3.5 text-muted-foreground" />
             <input
               type="date"
@@ -514,7 +514,7 @@ export default function Calculations() {
         </div>
       </div>
 
-      <div className="flex gap-1 bg-muted/30 p-0.5 rounded-lg w-fit">
+      <div className="flex gap-1 bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] p-0.5 rounded-lg w-fit">
         <Button
           variant={activeTab === "vat" ? "default" : "ghost"}
           size="sm"
@@ -669,7 +669,7 @@ function VatTab({ data }: { data: any }) {
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="flex gap-0.5 bg-muted/30 p-0.5 rounded-md">
+                <div className="flex gap-0.5 bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] p-0.5 rounded-md">
                   {([["month", "Месяц"], ["quarter", "Квартал"], ["year", "Год"]] as const).map(([key, label]) => (
                     <Button
                       key={key}
@@ -744,7 +744,7 @@ function VatTab({ data }: { data: any }) {
                 <div key={r.rate} className="flex items-center justify-between text-sm">
                   <div className="flex items-center gap-2">
                     <span className="text-muted-foreground">{r.rate}</span>
-                    <span className="text-xs text-muted-foreground/60">({r.count} док.)</span>
+                    <span className="text-xs text-[color-mix(in_oklab,var(--muted-foreground)_60%,transparent)]">({r.count} док.)</span>
                   </div>
                   <div className="flex items-center gap-3">
                     <span className="text-muted-foreground tabular-nums">{formatCurrency(r.total)}</span>
@@ -767,7 +767,7 @@ function VatTab({ data }: { data: any }) {
                 <div key={r.rate} className="flex items-center justify-between text-sm">
                   <div className="flex items-center gap-2">
                     <span className="text-muted-foreground">{r.rate}</span>
-                    <span className="text-xs text-muted-foreground/60">({r.count} док.)</span>
+                    <span className="text-xs text-[color-mix(in_oklab,var(--muted-foreground)_60%,transparent)]">({r.count} док.)</span>
                   </div>
                   <div className="flex items-center gap-3">
                     <span className="text-muted-foreground tabular-nums">{formatCurrency(r.total)}</span>
@@ -880,11 +880,11 @@ function FormulaDialog({ data, taxRate, onTaxRateChange, incCats, expCats, onInc
             </p>
           )}
 
-          <div className="rounded-md bg-muted/50 p-3 space-y-1.5">
+          <div className="rounded-md bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] p-3 space-y-1.5">
             <p className="text-sm font-medium text-foreground">Формула:</p>
             <p className="text-sm text-muted-foreground">Прибыль = (Приходы с НДС - НДС) - (Расходы с НДС - НДС) + (Приходы без НДС - Расходы без НДС)</p>
             <p className="text-sm text-muted-foreground">Налог = Прибыль x {localTaxRate}%</p>
-            <p className="text-xs text-muted-foreground/70 mt-2">Налог начисляется только при положительной прибыли</p>
+            <p className="text-xs text-[color-mix(in_oklab,var(--muted-foreground)_70%,transparent)] mt-2">Налог начисляется только при положительной прибыли</p>
           </div>
           <div className="rounded-md border p-3 space-y-2">
             <p className="text-xs font-medium text-muted-foreground">Текущий расчет:</p>
@@ -988,7 +988,7 @@ function ChartCategoryDialog({ highlights, onChange, incomeCats, expenseCats }:
                   {filteredIncome.map(c => (
                     <label
                       key={c.id}
-                      className="flex items-center gap-2 text-sm py-1 px-1.5 rounded hover:bg-muted/50 cursor-pointer"
+                      className="flex items-center gap-2 text-sm py-1 px-1.5 rounded hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] cursor-pointer"
                       data-testid={`label-chart-cat-income-${c.id}`}
                     >
                       <Checkbox
@@ -1014,7 +1014,7 @@ function ChartCategoryDialog({ highlights, onChange, incomeCats, expenseCats }:
                   {filteredExpense.map(c => (
                     <label
                       key={c.id}
-                      className="flex items-center gap-2 text-sm py-1 px-1.5 rounded hover:bg-muted/50 cursor-pointer"
+                      className="flex items-center gap-2 text-sm py-1 px-1.5 rounded hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] cursor-pointer"
                       data-testid={`label-chart-cat-expense-${c.id}`}
                     >
                       <Checkbox
@@ -1201,7 +1201,7 @@ function ProfitTab({ data, taxRate, onTaxRateChange, incCats, expCats, onIncCats
                   expenseCats={expenseCatsQuery.data || []}
                 />
               </div>
-              <div className="flex gap-0.5 bg-muted/30 p-0.5 rounded-md">
+              <div className="flex gap-0.5 bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] p-0.5 rounded-md">
                 {([["month", "Месяц"], ["quarter", "Квартал"], ["year", "Год"]] as const).map(([key, label]) => (
                   <Button
                     key={key}
@@ -1303,8 +1303,8 @@ function ProfitTab({ data, taxRate, onTaxRateChange, incCats, expCats, onIncCats
                   <div className="space-y-1.5">
                     {data.excludedIncomeCategories.map((cat: { name: string; total: number }, i: number) => (
                       <div key={i} className="flex items-center justify-between gap-2 text-sm" data-testid={`excluded-inc-${i}`}>
-                        <span className="truncate text-foreground/70 line-through">{cat.name}</span>
-                        <span className="tabular-nums font-medium text-foreground/70 shrink-0">{formatCurrency(cat.total)}</span>
+                        <span className="truncate text-[color-mix(in_oklab,var(--foreground)_70%,transparent)] line-through">{cat.name}</span>
+                        <span className="tabular-nums font-medium text-[color-mix(in_oklab,var(--foreground)_70%,transparent)] shrink-0">{formatCurrency(cat.total)}</span>
                       </div>
                     ))}
                   </div>
@@ -1316,8 +1316,8 @@ function ProfitTab({ data, taxRate, onTaxRateChange, incCats, expCats, onIncCats
                   <div className="space-y-1.5">
                     {data.excludedExpenseCategories.map((cat: { name: string; total: number }, i: number) => (
                       <div key={i} className="flex items-center justify-between gap-2 text-sm" data-testid={`excluded-exp-${i}`}>
-                        <span className="truncate text-foreground/70 line-through">{cat.name}</span>
-                        <span className="tabular-nums font-medium text-foreground/70 shrink-0">{formatCurrency(cat.total)}</span>
+                        <span className="truncate text-[color-mix(in_oklab,var(--foreground)_70%,transparent)] line-through">{cat.name}</span>
+                        <span className="tabular-nums font-medium text-[color-mix(in_oklab,var(--foreground)_70%,transparent)] shrink-0">{formatCurrency(cat.total)}</span>
                       </div>
                     ))}
                   </div>
diff --git a/client-di2/src/pages/dashboard.tsx b/client-di2/src/pages/dashboard.tsx
index c7c75d6..70a6dc5 100644
--- a/client-di2/src/pages/dashboard.tsx
+++ b/client-di2/src/pages/dashboard.tsx
@@ -228,7 +228,7 @@ export default function Dashboard() {
           <p className="text-muted-foreground text-sm mt-0.5">Общая сводка по финансам</p>
         </div>
         <div className="flex items-center gap-2">
-          <div className="flex items-center gap-1.5 bg-muted/50 rounded-lg border border-border px-3 py-1.5">
+          <div className="flex items-center gap-1.5 bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-lg border border-border px-3 py-1.5">
             <CalendarDays className="w-4 h-4 text-muted-foreground shrink-0" />
             <input
               type="date"
@@ -509,7 +509,7 @@ export default function Dashboard() {
                       </div>
                       <div className="h-1.5 bg-muted rounded-full overflow-hidden">
                         <div
-                          className="h-full rounded-full bg-muted-foreground/30"
+                          className="h-full rounded-full bg-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"
                           style={{ width: `${pct}%` }}
                         />
                       </div>
@@ -590,7 +590,7 @@ export default function Dashboard() {
                 {flatIncome.map(({ cat, depth }) => (
                   <label
                     key={cat.id}
-                    className="flex items-center gap-2 py-1 px-1 rounded hover:bg-muted/50 cursor-pointer"
+                    className="flex items-center gap-2 py-1 px-1 rounded hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] cursor-pointer"
                     style={{ paddingLeft: `${depth * 16 + 4}px` }}
                     data-testid={`checkbox-income-${cat.id}`}
                   >
@@ -623,7 +623,7 @@ export default function Dashboard() {
                 {flatExpense.map(({ cat, depth }) => (
                   <label
                     key={cat.id}
-                    className="flex items-center gap-2 py-1 px-1 rounded hover:bg-muted/50 cursor-pointer"
+                    className="flex items-center gap-2 py-1 px-1 rounded hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] cursor-pointer"
                     style={{ paddingLeft: `${depth * 16 + 4}px` }}
                     data-testid={`checkbox-expense-${cat.id}`}
                   >
diff --git a/client-di2/src/pages/debt.tsx b/client-di2/src/pages/debt.tsx
index 71e50a0..a508518 100644
--- a/client-di2/src/pages/debt.tsx
+++ b/client-di2/src/pages/debt.tsx
@@ -100,7 +100,7 @@ function MultiSelect({ label, options, selected, onChange, testId }: {
       <PopoverContent className="w-64 p-2 max-h-[300px] overflow-y-auto" align="start">
         <div className="text-xs font-medium text-muted-foreground mb-2">{label}</div>
         {options.map((opt, idx) => (
-          <label key={opt} className="flex items-center gap-2 py-1 px-1 hover:bg-muted/50 rounded cursor-pointer text-xs" data-testid={`checkbox-${testId}-${idx}`}>
+          <label key={opt} className="flex items-center gap-2 py-1 px-1 hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded cursor-pointer text-xs" data-testid={`checkbox-${testId}-${idx}`}>
             <Checkbox
               checked={selected.includes(opt)}
               onCheckedChange={(checked) => {
@@ -204,7 +204,7 @@ function DebtTableSection({ analytics, page, setPage }: { analytics: DebtAnalyti
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-border bg-muted/40">
+              <tr className="border-b border-border bg-[color-mix(in_oklab,var(--muted)_40%,transparent)]">
                 <th className="w-8 px-2"></th>
                 <th className="text-left px-4 py-3 text-xs font-medium text-muted-foreground">Контрагент</th>
                 <th className="text-right px-4 py-3 text-xs font-medium text-muted-foreground whitespace-nowrap">ОДЗ, ₽</th>
@@ -217,7 +217,7 @@ function DebtTableSection({ analytics, page, setPage }: { analytics: DebtAnalyti
                 return (
                   <Fragment key={group.kontragent}>
                     <tr
-                      className="border-b border-border cursor-pointer hover:bg-muted/30 transition-colors"
+                      className="border-b border-border cursor-pointer hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] transition-colors"
                       onClick={() => setExpandedRow(isExpanded ? null : group.kontragent)}
                       data-testid={`row-debt-group-${i}`}
                     >
@@ -231,7 +231,7 @@ function DebtTableSection({ analytics, page, setPage }: { analytics: DebtAnalyti
                     {isExpanded && (
                       <tr>
                         <td colSpan={4} className="p-0">
-                          <div className="bg-muted/20">
+                          <div className="bg-[color-mix(in_oklab,var(--muted)_20%,transparent)]">
                             <table className="w-full text-sm">
                               <thead>
                                 <tr className="border-b border-border">
@@ -552,7 +552,7 @@ function DynamicsTab() {
                 </PopoverTrigger>
                 <PopoverContent className="w-72 p-2 max-h-[300px] overflow-y-auto" align="start">
                   <div
-                    className="py-1 px-2 hover:bg-muted/50 rounded cursor-pointer text-xs text-muted-foreground"
+                    className="py-1 px-2 hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded cursor-pointer text-xs text-muted-foreground"
                     onClick={() => setKontragent("")}
                     data-testid="option-dynamics-kontragent-all"
                   >
@@ -561,7 +561,7 @@ function DynamicsTab() {
                   {(filters?.kontragenty || []).map((k, idx) => (
                     <div
                       key={k}
-                      className={`py-1 px-2 hover:bg-muted/50 rounded cursor-pointer text-xs ${kontragent === k ? "bg-primary/10 text-primary font-medium" : ""}`}
+                      className={`py-1 px-2 hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded cursor-pointer text-xs ${kontragent === k ? "bg-[color-mix(in_oklab,var(--primary)_10%,transparent)] text-primary font-medium" : ""}`}
                       onClick={() => setKontragent(k)}
                       data-testid={`option-dynamics-kontragent-${idx}`}
                     >
@@ -624,7 +624,7 @@ function DynamicsTab() {
             <div className="overflow-x-auto">
               <table className="w-full text-sm">
                 <thead>
-                  <tr className="border-b border-border bg-muted/40">
+                  <tr className="border-b border-border bg-[color-mix(in_oklab,var(--muted)_40%,transparent)]">
                     <th className="text-left px-4 py-3 text-xs font-medium text-muted-foreground">Контрагент</th>
                     <th className="text-right px-4 py-3 text-xs font-medium text-muted-foreground whitespace-nowrap">Сумма Договора</th>
                     <th className="text-right px-4 py-3 text-xs font-medium text-muted-foreground whitespace-nowrap">Оплачено</th>
@@ -635,7 +635,7 @@ function DynamicsTab() {
                 </thead>
                 <tbody>
                   {kontragentData.map((row, i) => (
-                    <tr key={i} className="border-b border-border last:border-0 hover:bg-muted/30" data-testid={`row-dynamics-kontragent-${i}`}>
+                    <tr key={i} className="border-b border-border last:border-0 hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]" data-testid={`row-dynamics-kontragent-${i}`}>
                       <td className="px-4 py-3 max-w-[250px] font-medium"><CopyableCell text={row.kontragent} className="max-w-[250px] font-medium" /></td>
                       <td className="px-4 py-3 text-right whitespace-nowrap">{formatCurrency(row.summadokumenta)}</td>
                       <td className="px-4 py-3 text-right whitespace-nowrap text-muted-foreground">{formatCurrency(row.summaoplacheno)}</td>
diff --git a/client-di2/src/pages/expense-categories.tsx b/client-di2/src/pages/expense-categories.tsx
index f31cc48..3b42a05 100644
--- a/client-di2/src/pages/expense-categories.tsx
+++ b/client-di2/src/pages/expense-categories.tsx
@@ -485,7 +485,7 @@ export default function ExpenseCategories() {
     return (
       <div key={cat.id}>
         <div
-          className={`flex items-center gap-1 py-1.5 px-2 rounded-md hover:bg-muted/50 group transition-colors ${
+          className={`flex items-center gap-1 py-1.5 px-2 rounded-md hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] group transition-colors ${
             cat.excluded ? "opacity-60" : ""
           } ${depth > 0 ? depthColors[Math.min(depth, 4)] + " ml-1" : ""}`}
           style={depth > 0 ? { paddingLeft: `${depth * 20 + 8}px` } : undefined}
@@ -640,7 +640,7 @@ export default function ExpenseCategories() {
         </CardHeader>
         <CardContent className="p-4 pt-2 space-y-3">
           {addingTree && (
-            <div className="border rounded-md p-3 space-y-2 bg-muted/30" data-testid="add-tree-form">
+            <div className="border rounded-md p-3 space-y-2 bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]" data-testid="add-tree-form">
               <Label className="text-xs">Название нового дерева</Label>
               <div className="flex gap-2">
                 <Input
@@ -815,7 +815,7 @@ export default function ExpenseCategories() {
                   </div>
                 )}
                 {isTreeExpanded && (
-                  <div className="border-t p-3 space-y-2 bg-muted/20" data-testid={`tree-columns-${treeCfg.id}`}>
+                  <div className="border-t p-3 space-y-2 bg-[color-mix(in_oklab,var(--muted)_20%,transparent)]" data-testid={`tree-columns-${treeCfg.id}`}>
                     {(treeCfg.mode ?? "split") === "split" && (
                       <>
                         <div className="flex items-center justify-between">
@@ -1031,7 +1031,7 @@ export default function ExpenseCategories() {
                     return (
                       <div key={group.treeId}>
                         <button
-                          className="flex items-center gap-2 px-2 py-1.5 bg-muted/40 rounded-md w-full hover:bg-muted/60 transition-colors"
+                          className="flex items-center gap-2 px-2 py-1.5 bg-[color-mix(in_oklab,var(--muted)_40%,transparent)] rounded-md w-full hover:bg-[color-mix(in_oklab,var(--muted)_60%,transparent)] transition-colors"
                           onClick={() => setExpandedGroupIds(prev => {
                             const next = new Set(prev);
                             if (next.has(group.treeId)) next.delete(group.treeId);
@@ -1048,7 +1048,7 @@ export default function ExpenseCategories() {
                           <Badge variant="secondary" className="text-[10px] h-4">{group.cats.length}</Badge>
                         </button>
                         {isGroupExpanded && (
-                          <div className="divide-y divide-border/50">
+                          <div className="divide-y divide-[color-mix(in_oklab,var(--border)_50%,transparent)]">
                             {[...group.cats].sort((a, b) => {
                               const aFolder = a.children && a.children.length > 0 ? 0 : 1;
                               const bFolder = b.children && b.children.length > 0 ? 0 : 1;
@@ -1064,7 +1064,7 @@ export default function ExpenseCategories() {
                     return (
                       <div>
                         <div
-                          className="flex items-center gap-2 px-2 py-1.5 bg-muted/40 rounded-md w-full hover:bg-muted/60 transition-colors cursor-pointer"
+                          className="flex items-center gap-2 px-2 py-1.5 bg-[color-mix(in_oklab,var(--muted)_40%,transparent)] rounded-md w-full hover:bg-[color-mix(in_oklab,var(--muted)_60%,transparent)] transition-colors cursor-pointer"
                           onClick={() => setExpandedGroupIds(prev => {
                             const next = new Set(prev);
                             if (next.has("__manual__")) next.delete("__manual__");
@@ -1091,7 +1091,7 @@ export default function ExpenseCategories() {
                           </Button>
                         </div>
                         {isManualExpanded && (
-                          <div className="divide-y divide-border/50">
+                          <div className="divide-y divide-[color-mix(in_oklab,var(--border)_50%,transparent)]">
                             {[...manualCats].sort((a, b) => {
                               const aFolder = a.children && a.children.length > 0 ? 0 : 1;
                               const bFolder = b.children && b.children.length > 0 ? 0 : 1;
@@ -1143,7 +1143,7 @@ export default function ExpenseCategories() {
                     <div className="flex items-center gap-2 text-xs">
                       <button
                         type="button"
-                        className={`px-2 py-0.5 rounded ${editing.ruleLogic !== "or" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80"}`}
+                        className={`px-2 py-0.5 rounded ${editing.ruleLogic !== "or" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-[color-mix(in_oklab,var(--muted)_80%,transparent)]"}`}
                         onClick={() => setEditing({ ...editing, ruleLogic: "and" })}
                         data-testid="button-rule-logic-and"
                       >
@@ -1151,7 +1151,7 @@ export default function ExpenseCategories() {
                       </button>
                       <button
                         type="button"
-                        className={`px-2 py-0.5 rounded ${editing.ruleLogic === "or" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80"}`}
+                        className={`px-2 py-0.5 rounded ${editing.ruleLogic === "or" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-[color-mix(in_oklab,var(--muted)_80%,transparent)]"}`}
                         onClick={() => setEditing({ ...editing, ruleLogic: "or" })}
                         data-testid="button-rule-logic-or"
                       >
@@ -1165,7 +1165,7 @@ export default function ExpenseCategories() {
                     const colType = getColumnType(rule.column);
                     const operators = getOperators(rule.column);
                     return (
-                      <div key={i} className="flex items-start gap-2 p-3 rounded-md border border-border bg-muted/30">
+                      <div key={i} className="flex items-start gap-2 p-3 rounded-md border border-border bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]">
                         <div className="flex-1 space-y-2">
                           <div className="grid grid-cols-2 gap-2">
                             <Select value={rule.column} onValueChange={v => changeColumn(i, v)}>
@@ -1273,7 +1273,7 @@ export default function ExpenseCategories() {
             <div className="p-8 text-center text-muted-foreground">Загрузка данных из базы...</div>
           )}
           {autoDetectPreview && (
-            <div className="border rounded-md p-3 max-h-[50vh] overflow-y-auto bg-muted/20">
+            <div className="border rounded-md p-3 max-h-[50vh] overflow-y-auto bg-[color-mix(in_oklab,var(--muted)_20%,transparent)]">
               {renderPreviewTree(autoDetectPreview.tree, 0)}
             </div>
           )}
diff --git a/client-di2/src/pages/expenses-overview.tsx b/client-di2/src/pages/expenses-overview.tsx
index 378c8cb..dfcdaed 100644
--- a/client-di2/src/pages/expenses-overview.tsx
+++ b/client-di2/src/pages/expenses-overview.tsx
@@ -685,7 +685,7 @@ export default function ExpensesOverview() {
         <ArrowDown className="w-3 h-3 text-primary" />
       );
     }
-    return <ChevronsUpDown className="w-3 h-3 text-muted-foreground/50" />;
+    return <ChevronsUpDown className="w-3 h-3 text-[color-mix(in_oklab,var(--muted-foreground)_50%,transparent)]" />;
   }
 
   function renderTableCell(row: any, col: { key: string; type: string }) {
@@ -731,7 +731,7 @@ export default function ExpensesOverview() {
     return (
       <div key={node.id}>
         <div
-          className={`flex items-center gap-2 py-2 px-3 hover:bg-muted/50 rounded-md transition-colors group ${isExcluded ? "opacity-50" : ""}`}
+          className={`flex items-center gap-2 py-2 px-3 hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-md transition-colors group ${isExcluded ? "opacity-50" : ""}`}
           style={{ paddingLeft: `${depth * 24 + 12}px` }}
           data-testid={`tree-row-${node.id}`}
         >
@@ -768,7 +768,7 @@ export default function ExpensesOverview() {
           </button>
 
           {isExcluded && (
-            <Badge variant="outline" className="text-[10px] px-1 py-0 h-4 border-destructive/40 text-destructive/70 shrink-0">
+            <Badge variant="outline" className="text-[10px] px-1 py-0 h-4 border-[color-mix(in_oklab,var(--destructive)_40%,transparent)] text-[color-mix(in_oklab,var(--destructive)_70%,transparent)] shrink-0">
               Искл.
             </Badge>
           )}
@@ -863,7 +863,7 @@ export default function ExpensesOverview() {
           <p className="text-muted-foreground text-sm mt-0.5">Обзор по статьям расходов</p>
         </div>
         <div className="flex items-center gap-2">
-          <div className="flex items-center gap-1.5 bg-muted/50 rounded-lg border border-border px-3 py-1.5">
+          <div className="flex items-center gap-1.5 bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-lg border border-border px-3 py-1.5">
             <CalendarDays className="w-4 h-4 text-muted-foreground shrink-0" />
             <input
               type="date"
@@ -985,7 +985,7 @@ export default function ExpensesOverview() {
               <span className="text-sm font-medium text-muted-foreground">Статьи расходов</span>
               <button
                 onClick={() => setSettingsMode(prev => !prev)}
-                className={`p-1 rounded-md transition-colors ${settingsMode ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground"}`}
+                className={`p-1 rounded-md transition-colors ${settingsMode ? "text-primary bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]" : "text-muted-foreground hover:text-foreground"}`}
                 data-testid="button-settings-mode"
               >
                 <Settings2 className="w-4 h-4" />
@@ -1014,7 +1014,7 @@ export default function ExpensesOverview() {
                 <Popover>
                   <PopoverTrigger asChild>
                     <button
-                      className={`p-1 rounded-md transition-colors ${isTagFilterActive ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground"}`}
+                      className={`p-1 rounded-md transition-colors ${isTagFilterActive ? "text-primary bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]" : "text-muted-foreground hover:text-foreground"}`}
                       data-testid="button-tag-filter"
                       title="Фильтр по тегам"
                     >
@@ -1084,7 +1084,7 @@ export default function ExpensesOverview() {
                 return (
                   <Card key={treeGroup.id}>
                     <div
-                      className="flex items-center gap-2 py-3 px-4 cursor-pointer hover:bg-muted/30 transition-colors border-b border-border"
+                      className="flex items-center gap-2 py-3 px-4 cursor-pointer hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] transition-colors border-b border-border"
                       onClick={() => { toggleExpand(groupExpKey); setOverrideContextTreeId(treeGroup.id); }}
                       data-testid={`treegroup-header-${treeGroup.id}`}
                     >
@@ -1159,7 +1159,7 @@ export default function ExpensesOverview() {
               {!isSearchActive && (data.uncategorized.total !== 0 || data.uncategorized.count !== 0) && (
                 <Card>
                   <div
-                    className="flex items-center gap-2 py-3 px-4 hover:bg-muted/30 transition-colors"
+                    className="flex items-center gap-2 py-3 px-4 hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] transition-colors"
                     data-testid="tree-row-uncategorized"
                   >
                     {settingsMode && (
@@ -1799,7 +1799,7 @@ export default function ExpensesOverview() {
                               <Popover>
                                 <PopoverTrigger asChild>
                                   <button
-                                    className={`shrink-0 p-0.5 rounded transition-colors ${hasActiveFilter ? "text-primary" : "text-muted-foreground/40 hover:text-muted-foreground"}`}
+                                    className={`shrink-0 p-0.5 rounded transition-colors ${hasActiveFilter ? "text-primary" : "text-[color-mix(in_oklab,var(--muted-foreground)_40%,transparent)] hover:text-muted-foreground"}`}
                                     data-testid={`table-filter-icon-${col.key}`}
                                   >
                                     <Filter className="w-3 h-3" fill={hasActiveFilter ? "currentColor" : "none"} />
@@ -1867,7 +1867,7 @@ export default function ExpensesOverview() {
                                   ) : renderTableCell(row, col)}
                                 </span>
                                 {col.key === activeTableCols[0]?.key && row.overrideCategoryName && (
-                                  <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0 h-4 text-primary border-primary/30" data-testid={`badge-override-exp-ov-${i}`}>
+                                  <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0 h-4 text-primary border-[color-mix(in_oklab,var(--primary)_30%,transparent)]" data-testid={`badge-override-exp-ov-${i}`}>
                                     → {row.overrideCategoryName}
                                   </Badge>
                                 )}
@@ -1880,7 +1880,7 @@ export default function ExpensesOverview() {
                             <UITooltip>
                               <TooltipTrigger asChild>
                                 <button
-                                  className={`p-1 rounded transition-colors ${row.overrideCategoryId ? "text-primary bg-primary/10" : "text-muted-foreground/40 hover:text-muted-foreground"}`}
+                                  className={`p-1 rounded transition-colors ${row.overrideCategoryId ? "text-primary bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]" : "text-[color-mix(in_oklab,var(--muted-foreground)_40%,transparent)] hover:text-muted-foreground"}`}
                                   onClick={() => { setOverrideRecordId(String(row.id)); setOverrideCatId(row.overrideCategoryId); }}
                                   data-testid={`button-override-exp-ov-${i}`}
                                 >
diff --git a/client-di2/src/pages/expenses.tsx b/client-di2/src/pages/expenses.tsx
index 46771c7..5ac5bfe 100644
--- a/client-di2/src/pages/expenses.tsx
+++ b/client-di2/src/pages/expenses.tsx
@@ -211,7 +211,7 @@ export default function Expenses() {
         <ArrowDown className="w-3 h-3 text-primary" />
       );
     }
-    return <ChevronsUpDown className="w-3 h-3 text-muted-foreground/50" />;
+    return <ChevronsUpDown className="w-3 h-3 text-[color-mix(in_oklab,var(--muted-foreground)_50%,transparent)]" />;
   }
 
   function renderCellValue(row: any, col: { key: string; type: string }) {
@@ -272,7 +272,7 @@ export default function Expenses() {
                 {ALL_EXPENSE_COLUMNS.map(col => (
                   <label
                     key={col.key}
-                    className="flex items-center gap-2 cursor-pointer text-sm hover:bg-muted/50 rounded px-1 py-0.5"
+                    className="flex items-center gap-2 cursor-pointer text-sm hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded px-1 py-0.5"
                     data-testid={`checkbox-column-${col.key}`}
                   >
                     <Checkbox
@@ -350,7 +350,7 @@ export default function Expenses() {
                           <Popover>
                             <PopoverTrigger asChild>
                               <button
-                                className={`shrink-0 p-0.5 rounded transition-colors ${hasActiveFilter ? "text-primary" : "text-muted-foreground/40 hover:text-muted-foreground"}`}
+                                className={`shrink-0 p-0.5 rounded transition-colors ${hasActiveFilter ? "text-primary" : "text-[color-mix(in_oklab,var(--muted-foreground)_40%,transparent)] hover:text-muted-foreground"}`}
                                 data-testid={`filter-icon-${col.key}`}
                               >
                                 <Filter className="w-3 h-3" fill={hasActiveFilter ? "currentColor" : "none"} />
@@ -442,7 +442,7 @@ export default function Expenses() {
                               ) : renderCellValue(row, col)}
                             </span>
                             {col.key === activeColumns[0]?.key && row.overrideCategoryName && (
-                              <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0 h-4 text-primary border-primary/30" data-testid={`badge-override-expense-${i}`}>
+                              <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0 h-4 text-primary border-[color-mix(in_oklab,var(--primary)_30%,transparent)]" data-testid={`badge-override-expense-${i}`}>
                                 → {row.overrideCategoryName}
                               </Badge>
                             )}
@@ -455,7 +455,7 @@ export default function Expenses() {
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <button
-                              className={`p-1 rounded transition-colors ${row.overrideCategoryId ? "text-primary bg-primary/10" : "text-muted-foreground/40 hover:text-muted-foreground"}`}
+                              className={`p-1 rounded transition-colors ${row.overrideCategoryId ? "text-primary bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]" : "text-[color-mix(in_oklab,var(--muted-foreground)_40%,transparent)] hover:text-muted-foreground"}`}
                               onClick={() => { setOverrideRecordId(String(row.id)); setOverrideCatId(row.overrideCategoryId); }}
                               data-testid={`button-override-expense-${i}`}
                             >
diff --git a/client-di2/src/pages/heatmap.tsx b/client-di2/src/pages/heatmap.tsx
index 4fc0659..d8be9e5 100644
--- a/client-di2/src/pages/heatmap.tsx
+++ b/client-di2/src/pages/heatmap.tsx
@@ -275,15 +275,15 @@ export default function Heatmap() {
             <table className="text-xs border-separate border-spacing-0.5 min-w-max">
               <thead>
                 <tr>
-                  <th className="text-left px-2 py-1.5 bg-muted/50 rounded text-muted-foreground font-medium sticky left-0 z-10 min-w-[160px] max-w-[220px]">
+                  <th className="text-left px-2 py-1.5 bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded text-muted-foreground font-medium sticky left-0 z-10 min-w-[160px] max-w-[220px]">
                     Категория
                   </th>
                   {months.map(m => (
-                    <th key={m} className="px-1 py-1.5 bg-muted/50 rounded text-muted-foreground font-medium text-center min-w-[80px] whitespace-nowrap">
+                    <th key={m} className="px-1 py-1.5 bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded text-muted-foreground font-medium text-center min-w-[80px] whitespace-nowrap">
                       {monthLabel(m)}
                     </th>
                   ))}
-                  <th className="px-2 py-1.5 bg-muted/60 rounded text-muted-foreground font-medium text-right min-w-[90px] whitespace-nowrap sticky right-0 z-10">
+                  <th className="px-2 py-1.5 bg-[color-mix(in_oklab,var(--muted)_60%,transparent)] rounded text-muted-foreground font-medium text-right min-w-[90px] whitespace-nowrap sticky right-0 z-10">
                     Итого
                   </th>
                 </tr>
@@ -294,7 +294,7 @@ export default function Heatmap() {
                   return (
                     <tr key={cat.id}>
                       <td
-                        className="px-2 py-1 bg-muted/30 rounded font-medium sticky left-0 z-10 truncate max-w-[220px]"
+                        className="px-2 py-1 bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] rounded font-medium sticky left-0 z-10 truncate max-w-[220px]"
                         title={`${cat.treeName ? cat.treeName + " / " : ""}${cat.name}`}
                         data-testid={`heatmap-row-${cat.id}`}
                       >
@@ -325,7 +325,7 @@ export default function Heatmap() {
                         );
                       })}
                       <td
-                        className="px-2 py-1 text-right rounded font-semibold bg-muted/30 sticky right-0 z-10 font-mono"
+                        className="px-2 py-1 text-right rounded font-semibold bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] sticky right-0 z-10 font-mono"
                         style={{ color: type === "income" ? "hsl(217,80%,35%)" : "hsl(0,75%,35%)" }}
                       >
                         {formatCurrency(cat.total)}
@@ -335,18 +335,18 @@ export default function Heatmap() {
                 })}
 
                 <tr>
-                  <td className="px-2 py-1.5 bg-muted/50 rounded font-semibold sticky left-0 z-10 text-muted-foreground">
+                  <td className="px-2 py-1.5 bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded font-semibold sticky left-0 z-10 text-muted-foreground">
                     Итого
                   </td>
                   {months.map(m => {
                     const v = filteredCategories.reduce((s, c) => s + (c.monthly[m] || 0), 0);
                     return (
-                      <td key={m} className="px-1 py-1.5 text-center rounded bg-muted/40 font-semibold font-mono">
+                      <td key={m} className="px-1 py-1.5 text-center rounded bg-[color-mix(in_oklab,var(--muted)_40%,transparent)] font-semibold font-mono">
                         {v > 0 ? formatCurrency(v) : "—"}
                       </td>
                     );
                   })}
-                  <td className="px-2 py-1.5 text-right rounded font-bold bg-muted/50 sticky right-0 z-10 font-mono">
+                  <td className="px-2 py-1.5 text-right rounded font-bold bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] sticky right-0 z-10 font-mono">
                     {formatCurrency(filteredCategories.reduce((s, c) => s + c.total, 0))}
                   </td>
                 </tr>
diff --git a/client-di2/src/pages/income-categories.tsx b/client-di2/src/pages/income-categories.tsx
index 4a0596f..7297c1e 100644
--- a/client-di2/src/pages/income-categories.tsx
+++ b/client-di2/src/pages/income-categories.tsx
@@ -511,7 +511,7 @@ export default function IncomeCategories() {
     return (
       <div key={cat.id}>
         <div
-          className={`flex items-center gap-1 py-1.5 px-2 rounded-md hover:bg-muted/50 group transition-colors ${
+          className={`flex items-center gap-1 py-1.5 px-2 rounded-md hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] group transition-colors ${
             cat.excluded ? "opacity-60" : ""
           } ${depth > 0 ? depthColors[Math.min(depth, 4)] + " ml-1" : ""}`}
           style={depth > 0 ? { paddingLeft: `${depth * 20 + 8}px` } : undefined}
@@ -666,7 +666,7 @@ export default function IncomeCategories() {
         </CardHeader>
         <CardContent className="p-4 pt-2 space-y-3">
           {addingTree && (
-            <div className="border rounded-md p-3 space-y-2 bg-muted/30" data-testid="add-tree-form">
+            <div className="border rounded-md p-3 space-y-2 bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]" data-testid="add-tree-form">
               <Label className="text-xs">Название нового дерева</Label>
               <div className="flex gap-2">
                 <Input
@@ -841,7 +841,7 @@ export default function IncomeCategories() {
                   </div>
                 )}
                 {isTreeExpanded && (
-                  <div className="border-t p-3 space-y-2 bg-muted/20" data-testid={`tree-columns-${treeCfg.id}`}>
+                  <div className="border-t p-3 space-y-2 bg-[color-mix(in_oklab,var(--muted)_20%,transparent)]" data-testid={`tree-columns-${treeCfg.id}`}>
                     {(treeCfg.mode ?? "split") === "split" && (
                       <>
                         <div className="flex items-center justify-between">
@@ -1057,7 +1057,7 @@ export default function IncomeCategories() {
                     return (
                       <div key={group.treeId}>
                         <button
-                          className="flex items-center gap-2 px-2 py-1.5 bg-muted/40 rounded-md w-full hover:bg-muted/60 transition-colors"
+                          className="flex items-center gap-2 px-2 py-1.5 bg-[color-mix(in_oklab,var(--muted)_40%,transparent)] rounded-md w-full hover:bg-[color-mix(in_oklab,var(--muted)_60%,transparent)] transition-colors"
                           onClick={() => setExpandedGroupIds(prev => {
                             const next = new Set(prev);
                             if (next.has(group.treeId)) next.delete(group.treeId);
@@ -1074,7 +1074,7 @@ export default function IncomeCategories() {
                           <Badge variant="secondary" className="text-[10px] h-4">{group.cats.length}</Badge>
                         </button>
                         {isGroupExpanded && (
-                          <div className="divide-y divide-border/50">
+                          <div className="divide-y divide-[color-mix(in_oklab,var(--border)_50%,transparent)]">
                             {[...group.cats].sort((a, b) => {
                               const aFolder = a.children && a.children.length > 0 ? 0 : 1;
                               const bFolder = b.children && b.children.length > 0 ? 0 : 1;
@@ -1090,7 +1090,7 @@ export default function IncomeCategories() {
                     return (
                       <div>
                         <div
-                          className="flex items-center gap-2 px-2 py-1.5 bg-muted/40 rounded-md w-full hover:bg-muted/60 transition-colors cursor-pointer"
+                          className="flex items-center gap-2 px-2 py-1.5 bg-[color-mix(in_oklab,var(--muted)_40%,transparent)] rounded-md w-full hover:bg-[color-mix(in_oklab,var(--muted)_60%,transparent)] transition-colors cursor-pointer"
                           onClick={() => setExpandedGroupIds(prev => {
                             const next = new Set(prev);
                             if (next.has("__manual__")) next.delete("__manual__");
@@ -1117,7 +1117,7 @@ export default function IncomeCategories() {
                           </Button>
                         </div>
                         {isManualExpanded && (
-                          <div className="divide-y divide-border/50">
+                          <div className="divide-y divide-[color-mix(in_oklab,var(--border)_50%,transparent)]">
                             {[...manualCats].sort((a, b) => {
                               const aFolder = a.children && a.children.length > 0 ? 0 : 1;
                               const bFolder = b.children && b.children.length > 0 ? 0 : 1;
@@ -1137,7 +1137,7 @@ export default function IncomeCategories() {
 
       <Card>
         <div
-          className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-muted/30 transition-colors"
+          className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] transition-colors"
           onClick={() => setTagsSectionOpen(p => !p)}
           data-testid="tags-section-toggle"
         >
@@ -1153,8 +1153,8 @@ export default function IncomeCategories() {
             {allTags.length > 0 && (
               <div className="space-y-1">
                 {allTags.map(tag => (
-                  <div key={tag.id} className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-muted/50 group" data-testid={`tag-row-${tag.id}`}>
-                    <span className="w-3.5 h-3.5 rounded-full shrink-0 border border-border/50" style={{ backgroundColor: tag.color }} />
+                  <div key={tag.id} className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] group" data-testid={`tag-row-${tag.id}`}>
+                    <span className="w-3.5 h-3.5 rounded-full shrink-0 border border-[color-mix(in_oklab,var(--border)_50%,transparent)]" style={{ backgroundColor: tag.color }} />
                     <span className="text-sm flex-1">{tag.name}</span>
                     <button
                       className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
@@ -1240,7 +1240,7 @@ export default function IncomeCategories() {
                     <div className="flex items-center gap-2 text-xs">
                       <button
                         type="button"
-                        className={`px-2 py-0.5 rounded ${editing.ruleLogic !== "or" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80"}`}
+                        className={`px-2 py-0.5 rounded ${editing.ruleLogic !== "or" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-[color-mix(in_oklab,var(--muted)_80%,transparent)]"}`}
                         onClick={() => setEditing({ ...editing, ruleLogic: "and" })}
                         data-testid="button-rule-logic-and"
                       >
@@ -1248,7 +1248,7 @@ export default function IncomeCategories() {
                       </button>
                       <button
                         type="button"
-                        className={`px-2 py-0.5 rounded ${editing.ruleLogic === "or" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80"}`}
+                        className={`px-2 py-0.5 rounded ${editing.ruleLogic === "or" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-[color-mix(in_oklab,var(--muted)_80%,transparent)]"}`}
                         onClick={() => setEditing({ ...editing, ruleLogic: "or" })}
                         data-testid="button-rule-logic-or"
                       >
@@ -1262,7 +1262,7 @@ export default function IncomeCategories() {
                     const colType = getColumnType(rule.column);
                     const operators = getOperators(rule.column);
                     return (
-                      <div key={i} className="flex items-start gap-2 p-3 rounded-md border border-border bg-muted/30">
+                      <div key={i} className="flex items-start gap-2 p-3 rounded-md border border-border bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]">
                         <div className="flex-1 space-y-2">
                           <div className="grid grid-cols-2 gap-2">
                             <Select value={rule.column} onValueChange={v => changeColumn(i, v)}>
@@ -1370,7 +1370,7 @@ export default function IncomeCategories() {
             <div className="p-8 text-center text-muted-foreground">Загрузка данных из базы...</div>
           )}
           {autoDetectPreview && (
-            <div className="border rounded-md p-3 max-h-[50vh] overflow-y-auto bg-muted/20">
+            <div className="border rounded-md p-3 max-h-[50vh] overflow-y-auto bg-[color-mix(in_oklab,var(--muted)_20%,transparent)]">
               {renderPreviewTree(autoDetectPreview.tree, 0)}
             </div>
           )}
diff --git a/client-di2/src/pages/income-overview.tsx b/client-di2/src/pages/income-overview.tsx
index eabca35..18048b0 100644
--- a/client-di2/src/pages/income-overview.tsx
+++ b/client-di2/src/pages/income-overview.tsx
@@ -703,7 +703,7 @@ export default function IncomeOverview() {
         <ArrowDown className="w-3 h-3 text-primary" />
       );
     }
-    return <ChevronsUpDown className="w-3 h-3 text-muted-foreground/50" />;
+    return <ChevronsUpDown className="w-3 h-3 text-[color-mix(in_oklab,var(--muted-foreground)_50%,transparent)]" />;
   }
 
   function renderTableCell(row: any, col: { key: string; type: string }) {
@@ -749,7 +749,7 @@ export default function IncomeOverview() {
     return (
       <div key={node.id}>
         <div
-          className={`flex items-center gap-2 py-2 px-3 hover:bg-muted/50 rounded-md transition-colors group ${isExcluded ? "opacity-50" : ""}`}
+          className={`flex items-center gap-2 py-2 px-3 hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-md transition-colors group ${isExcluded ? "opacity-50" : ""}`}
           style={{ paddingLeft: `${depth * 24 + 12}px` }}
           data-testid={`tree-row-${node.id}`}
         >
@@ -786,7 +786,7 @@ export default function IncomeOverview() {
           </button>
 
           {isExcluded && (
-            <Badge variant="outline" className="text-[10px] px-1 py-0 h-4 border-destructive/40 text-destructive/70 shrink-0">
+            <Badge variant="outline" className="text-[10px] px-1 py-0 h-4 border-[color-mix(in_oklab,var(--destructive)_40%,transparent)] text-[color-mix(in_oklab,var(--destructive)_70%,transparent)] shrink-0">
               Искл.
             </Badge>
           )}
@@ -881,7 +881,7 @@ export default function IncomeOverview() {
           <p className="text-muted-foreground text-sm mt-0.5">Обзор по статьям доходов</p>
         </div>
         <div className="flex items-center gap-2">
-          <div className="flex items-center gap-1.5 bg-muted/50 rounded-lg border border-border px-3 py-1.5">
+          <div className="flex items-center gap-1.5 bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-lg border border-border px-3 py-1.5">
             <CalendarDays className="w-4 h-4 text-muted-foreground shrink-0" />
             <input
               type="date"
@@ -1003,7 +1003,7 @@ export default function IncomeOverview() {
               <span className="text-sm font-medium text-muted-foreground">Статьи доходов</span>
               <button
                 onClick={() => setSettingsMode(prev => !prev)}
-                className={`p-1 rounded-md transition-colors ${settingsMode ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground"}`}
+                className={`p-1 rounded-md transition-colors ${settingsMode ? "text-primary bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]" : "text-muted-foreground hover:text-foreground"}`}
                 data-testid="button-settings-mode"
               >
                 <Settings2 className="w-4 h-4" />
@@ -1032,7 +1032,7 @@ export default function IncomeOverview() {
                 <Popover>
                   <PopoverTrigger asChild>
                     <button
-                      className={`flex items-center gap-1 h-7 px-2 text-xs rounded-md border transition-colors ${isTagFilterActive ? "border-primary text-primary bg-primary/10" : "border-border text-muted-foreground hover:text-foreground bg-background"}`}
+                      className={`flex items-center gap-1 h-7 px-2 text-xs rounded-md border transition-colors ${isTagFilterActive ? "border-primary text-primary bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]" : "border-border text-muted-foreground hover:text-foreground bg-background"}`}
                       data-testid="button-tag-filter-tree"
                     >
                       <Tag className="w-3 h-3" />
@@ -1104,7 +1104,7 @@ export default function IncomeOverview() {
                 return (
                   <Card key={treeGroup.id}>
                     <div
-                      className="flex items-center gap-2 py-3 px-4 cursor-pointer hover:bg-muted/30 transition-colors border-b border-border"
+                      className="flex items-center gap-2 py-3 px-4 cursor-pointer hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] transition-colors border-b border-border"
                       onClick={() => { toggleExpand(groupExpKey); setOverrideContextTreeId(treeGroup.id); }}
                       data-testid={`treegroup-header-${treeGroup.id}`}
                     >
@@ -1179,7 +1179,7 @@ export default function IncomeOverview() {
               {!isSearchActive && (data.uncategorized.total !== 0 || data.uncategorized.count !== 0) && (
                 <Card>
                   <div
-                    className="flex items-center gap-2 py-3 px-4 hover:bg-muted/30 transition-colors"
+                    className="flex items-center gap-2 py-3 px-4 hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] transition-colors"
                     data-testid="tree-row-uncategorized"
                   >
                     {settingsMode && (
@@ -1315,7 +1315,7 @@ export default function IncomeOverview() {
               <Popover>
                 <PopoverTrigger asChild>
                   <button
-                    className={`flex items-center gap-1 h-8 px-2.5 text-sm rounded-md border transition-colors ${analyticsTagIds.length > 0 ? "border-primary text-primary bg-primary/10" : "border-border text-muted-foreground hover:text-foreground bg-background"}`}
+                    className={`flex items-center gap-1 h-8 px-2.5 text-sm rounded-md border transition-colors ${analyticsTagIds.length > 0 ? "border-primary text-primary bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]" : "border-border text-muted-foreground hover:text-foreground bg-background"}`}
                     data-testid="button-analytics-tag-filter"
                   >
                     <Tag className="w-3.5 h-3.5" />
@@ -1862,7 +1862,7 @@ export default function IncomeOverview() {
                               <Popover>
                                 <PopoverTrigger asChild>
                                   <button
-                                    className={`shrink-0 p-0.5 rounded transition-colors ${hasActiveFilter ? "text-primary" : "text-muted-foreground/40 hover:text-muted-foreground"}`}
+                                    className={`shrink-0 p-0.5 rounded transition-colors ${hasActiveFilter ? "text-primary" : "text-[color-mix(in_oklab,var(--muted-foreground)_40%,transparent)] hover:text-muted-foreground"}`}
                                     data-testid={`table-filter-icon-${col.key}`}
                                   >
                                     <Filter className="w-3 h-3" fill={hasActiveFilter ? "currentColor" : "none"} />
@@ -1930,7 +1930,7 @@ export default function IncomeOverview() {
                                   ) : renderTableCell(row, col)}
                                 </span>
                                 {col.key === activeTableCols[0]?.key && row.overrideCategoryName && (
-                                  <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0 h-4 text-primary border-primary/30" data-testid={`badge-override-inc-ov-${i}`}>
+                                  <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0 h-4 text-primary border-[color-mix(in_oklab,var(--primary)_30%,transparent)]" data-testid={`badge-override-inc-ov-${i}`}>
                                     → {row.overrideCategoryName}
                                   </Badge>
                                 )}
@@ -1943,7 +1943,7 @@ export default function IncomeOverview() {
                             <UITooltip>
                               <TooltipTrigger asChild>
                                 <button
-                                  className={`p-1 rounded transition-colors ${row.overrideCategoryId ? "text-primary bg-primary/10" : "text-muted-foreground/40 hover:text-muted-foreground"}`}
+                                  className={`p-1 rounded transition-colors ${row.overrideCategoryId ? "text-primary bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]" : "text-[color-mix(in_oklab,var(--muted-foreground)_40%,transparent)] hover:text-muted-foreground"}`}
                                   onClick={() => { setOverrideRecordId(String(row.id)); setOverrideCatId(row.overrideCategoryId); }}
                                   data-testid={`button-override-inc-ov-${i}`}
                                 >
diff --git a/client-di2/src/pages/income.tsx b/client-di2/src/pages/income.tsx
index 49006bf..f156d8e 100644
--- a/client-di2/src/pages/income.tsx
+++ b/client-di2/src/pages/income.tsx
@@ -211,7 +211,7 @@ export default function Income() {
         <ArrowDown className="w-3 h-3 text-primary" />
       );
     }
-    return <ChevronsUpDown className="w-3 h-3 text-muted-foreground/50" />;
+    return <ChevronsUpDown className="w-3 h-3 text-[color-mix(in_oklab,var(--muted-foreground)_50%,transparent)]" />;
   }
 
   function renderCellValue(row: any, col: { key: string; type: string }) {
@@ -272,7 +272,7 @@ export default function Income() {
                 {ALL_INCOME_COLUMNS.map(col => (
                   <label
                     key={col.key}
-                    className="flex items-center gap-2 cursor-pointer text-sm hover:bg-muted/50 rounded px-1 py-0.5"
+                    className="flex items-center gap-2 cursor-pointer text-sm hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded px-1 py-0.5"
                     data-testid={`checkbox-column-${col.key}`}
                   >
                     <Checkbox
@@ -350,7 +350,7 @@ export default function Income() {
                           <Popover>
                             <PopoverTrigger asChild>
                               <button
-                                className={`shrink-0 p-0.5 rounded transition-colors ${hasActiveFilter ? "text-primary" : "text-muted-foreground/40 hover:text-muted-foreground"}`}
+                                className={`shrink-0 p-0.5 rounded transition-colors ${hasActiveFilter ? "text-primary" : "text-[color-mix(in_oklab,var(--muted-foreground)_40%,transparent)] hover:text-muted-foreground"}`}
                                 data-testid={`filter-icon-${col.key}`}
                               >
                                 <Filter className="w-3 h-3" fill={hasActiveFilter ? "currentColor" : "none"} />
@@ -441,7 +441,7 @@ export default function Income() {
                               ) : renderCellValue(row, col)}
                             </span>
                             {col.key === activeColumns[0]?.key && row.overrideCategoryName && (
-                              <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0 h-4 text-primary border-primary/30" data-testid={`badge-override-income-${i}`}>
+                              <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0 h-4 text-primary border-[color-mix(in_oklab,var(--primary)_30%,transparent)]" data-testid={`badge-override-income-${i}`}>
                                 → {row.overrideCategoryName}
                               </Badge>
                             )}
@@ -454,7 +454,7 @@ export default function Income() {
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <button
-                              className={`p-1 rounded transition-colors ${row.overrideCategoryId ? "text-primary bg-primary/10" : "text-muted-foreground/40 hover:text-muted-foreground"}`}
+                              className={`p-1 rounded transition-colors ${row.overrideCategoryId ? "text-primary bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]" : "text-[color-mix(in_oklab,var(--muted-foreground)_40%,transparent)] hover:text-muted-foreground"}`}
                               onClick={() => { setOverrideRecordId(String(row.id)); setOverrideCatId(row.overrideCategoryId); }}
                               data-testid={`button-override-income-${i}`}
                             >
diff --git a/client-di2/src/pages/planning.tsx b/client-di2/src/pages/planning.tsx
index 8e5f913..1fc7b62 100644
--- a/client-di2/src/pages/planning.tsx
+++ b/client-di2/src/pages/planning.tsx
@@ -319,7 +319,7 @@ function AiPlanningSection({ onPlanUpdated }: { onPlanUpdated: () => void }) {
           </Button>
         </div>
         {showCategoryFilter && categories && (
-          <div className="mt-2 border rounded-md p-3 space-y-3 bg-muted/30" data-testid="category-filter-panel">
+          <div className="mt-2 border rounded-md p-3 space-y-3 bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]" data-testid="category-filter-panel">
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <span className="text-xs font-medium text-red-700 dark:text-red-400">Категории расходов для анализа</span>
@@ -463,7 +463,7 @@ function AiPlanningSection({ onPlanUpdated }: { onPlanUpdated: () => void }) {
               </div>
 
               {showAddManual && (
-                <div className="mb-3 p-3 bg-muted/50 rounded-md space-y-2">
+                <div className="mb-3 p-3 bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-md space-y-2">
                   <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                     <div>
                       <Label className="text-xs">Тип</Label>
@@ -824,7 +824,7 @@ function ReceivablesSection() {
                         </thead>
                         <tbody>
                           {sortedPayments.slice(0, 50).map((p, i) => (
-                            <tr key={i} className="border-b border-border/50 hover:bg-muted/30" data-testid={`row-payment-${i}`}>
+                            <tr key={i} className="border-b border-[color-mix(in_oklab,var(--border)_50%,transparent)] hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]" data-testid={`row-payment-${i}`}>
                               <td className="py-1.5 px-2 max-w-[200px]"><CopyableCell text={p.kontragent} className="max-w-[200px]" /></td>
                               <td className="py-1.5 px-2 max-w-[150px] text-muted-foreground"><CopyableCell text={p.dogovor || "-"} className="max-w-[150px]" /></td>
                               <td className="py-1.5 px-2 text-right tabular-nums">{formatCurrency(p.docAmount)}</td>
@@ -1231,7 +1231,7 @@ export default function Planning() {
                       {data.recurringIncome
                         .sort((a, b) => b.avgAmount - a.avgAmount)
                         .map((item, i) => (
-                        <div key={i} className="flex items-center justify-between py-1.5 px-2 rounded-md hover:bg-muted/50 text-sm" data-testid={`row-recurring-income-${i}`}>
+                        <div key={i} className="flex items-center justify-between py-1.5 px-2 rounded-md hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] text-sm" data-testid={`row-recurring-income-${i}`}>
                           <div className="min-w-0 flex-1 mr-3">
                             <p className="font-medium text-xs truncate">{item.name}</p>
                             <p className="text-xs text-muted-foreground truncate">{item.contract}</p>
@@ -1271,7 +1271,7 @@ export default function Planning() {
                       {data.recurringExpenses
                         .sort((a, b) => b.avgAmount - a.avgAmount)
                         .map((item, i) => (
-                        <div key={i} className="flex items-center justify-between py-1.5 px-2 rounded-md hover:bg-muted/50 text-sm" data-testid={`row-recurring-expense-${i}`}>
+                        <div key={i} className="flex items-center justify-between py-1.5 px-2 rounded-md hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] text-sm" data-testid={`row-recurring-expense-${i}`}>
                           <div className="min-w-0 flex-1 mr-3">
                             <p className="font-medium text-xs truncate">{item.name}</p>
                             <p className="text-xs text-muted-foreground truncate">{item.contract}</p>
diff --git a/client-di2/src/pages/profitability.tsx b/client-di2/src/pages/profitability.tsx
index 73d6d34..116b843 100644
--- a/client-di2/src/pages/profitability.tsx
+++ b/client-di2/src/pages/profitability.tsx
@@ -78,7 +78,7 @@ function ContractDetails({ zakazchik, dateFrom, dateTo }: { zakazchik: string; d
   if (!data || data.length === 0) return <div className="px-8 py-3 text-sm text-muted-foreground">Нет договоров</div>;
 
   return (
-    <div className="bg-muted/30">
+    <div className="bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]">
       <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-border">
@@ -292,7 +292,7 @@ export default function Profitability() {
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-border bg-muted/40">
+              <tr className="border-b border-border bg-[color-mix(in_oklab,var(--muted)_40%,transparent)]">
                 <th className="w-8 px-2"></th>
                 <th className="text-left px-4 py-3 text-xs font-medium text-muted-foreground">Контрагент</th>
                 <th className="text-right px-4 py-3 text-xs font-medium text-muted-foreground whitespace-nowrap">Доход</th>
@@ -321,7 +321,7 @@ export default function Profitability() {
                   return (
                     <Fragment key={row.zakazchik}>
                       <tr
-                        className="border-b border-border cursor-pointer hover:bg-muted/30 transition-colors"
+                        className="border-b border-border cursor-pointer hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] transition-colors"
                         onClick={() => setExpandedRow(isExpanded ? null : row.zakazchik)}
                         data-testid={`row-profitability-${i}`}
                       >
diff --git a/client-di2/src/pages/salary.tsx b/client-di2/src/pages/salary.tsx
index bcbd13e..ba33218 100644
--- a/client-di2/src/pages/salary.tsx
+++ b/client-di2/src/pages/salary.tsx
@@ -180,7 +180,7 @@ function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (
               <p className="text-sm text-muted-foreground">Участки не добавлены</p>
             )}
             {areasQuery.data?.map(area => (
-              <div key={area.id} className="p-2 rounded-md border bg-muted/30 space-y-1.5" data-testid={`area-item-${area.id}`}>
+              <div key={area.id} className="p-2 rounded-md border bg-[color-mix(in_oklab,var(--muted)_30%,transparent)] space-y-1.5" data-testid={`area-item-${area.id}`}>
                 <div className="flex items-center justify-between">
                   <div className="min-w-0 flex-1">
                     <p className="text-sm font-medium truncate">{area.name}</p>
@@ -590,7 +590,7 @@ function NeofTab() {
                       onClick={() => setSelectedAreas(new Set())}
                       data-testid="button-filter-area-all"
                     >
-                      <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedAreas.size === 0 ? "bg-primary border-primary" : "border-muted-foreground/30"}`}>
+                      <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedAreas.size === 0 ? "bg-primary border-primary" : "border-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"}`}>
                         {selectedAreas.size === 0 && <Check className="w-2.5 h-2.5 text-primary-foreground" />}
                       </div>
                       Все участки
@@ -602,7 +602,7 @@ function NeofTab() {
                         onClick={() => setSelectedAreas(toggleSetItem(selectedAreas, a.id))}
                         data-testid={`button-filter-area-${a.id}`}
                       >
-                        <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedAreas.has(a.id) ? "bg-primary border-primary" : "border-muted-foreground/30"}`}>
+                        <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedAreas.has(a.id) ? "bg-primary border-primary" : "border-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"}`}>
                           {selectedAreas.has(a.id) && <Check className="w-2.5 h-2.5 text-primary-foreground" />}
                         </div>
                         {a.name}
@@ -623,7 +623,7 @@ function NeofTab() {
                       onClick={() => setSelectedMonths(new Set())}
                       data-testid="button-filter-month-all"
                     >
-                      <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedMonths.size === 0 ? "bg-primary border-primary" : "border-muted-foreground/30"}`}>
+                      <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedMonths.size === 0 ? "bg-primary border-primary" : "border-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"}`}>
                         {selectedMonths.size === 0 && <Check className="w-2.5 h-2.5 text-primary-foreground" />}
                       </div>
                       Все месяцы
@@ -635,7 +635,7 @@ function NeofTab() {
                         onClick={() => setSelectedMonths(toggleSetItem(selectedMonths, m))}
                         data-testid={`button-filter-month-${m}`}
                       >
-                        <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedMonths.has(m) ? "bg-primary border-primary" : "border-muted-foreground/30"}`}>
+                        <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedMonths.has(m) ? "bg-primary border-primary" : "border-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"}`}>
                           {selectedMonths.has(m) && <Check className="w-2.5 h-2.5 text-primary-foreground" />}
                         </div>
                         {m}
@@ -650,7 +650,7 @@ function NeofTab() {
               )}
 
               {filteredAreas.length > 0 && (
-                <Card className="bg-primary/5 border-primary/20">
+                <Card className="bg-[color-mix(in_oklab,var(--primary)_5%,transparent)] border-[color-mix(in_oklab,var(--primary)_20%,transparent)]">
                   <CardContent className="py-3 px-4">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-2">
@@ -700,7 +700,7 @@ function NeofTab() {
                         return (
                           <div key={monthKey} className="border rounded-lg">
                             <button
-                              className="flex items-center justify-between w-full px-3 py-2 text-left hover:bg-muted/50 rounded-lg"
+                              className="flex items-center justify-between w-full px-3 py-2 text-left hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-lg"
                               onClick={() => toggleMonth(monthKey)}
                               data-testid={`button-toggle-month-${monthKey}`}
                             >
@@ -728,7 +728,7 @@ function NeofTab() {
                                   </thead>
                                   <tbody>
                                     {monthData.employees.map((emp, i) => (
-                                      <tr key={i} className="border-b last:border-0 hover:bg-muted/30" data-testid={`row-employee-${area.id}-${monthData.month}-${i}`}>
+                                      <tr key={i} className="border-b last:border-0 hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]" data-testid={`row-employee-${area.id}-${monthData.month}-${i}`}>
                                         <td className="py-1.5 text-xs">{emp.fio}</td>
                                         <td className="py-1.5 text-xs text-right tabular-nums">{formatCurrency(emp.baza)}</td>
                                         <td className="py-1.5 text-xs text-right tabular-nums font-medium">{formatCurrency(emp.kVydache)}</td>
@@ -832,7 +832,7 @@ function MultiSelectPopover({
           onClick={onClear}
           data-testid={`${testId}-all`}
         >
-          <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selected.size === 0 ? "bg-primary border-primary" : "border-muted-foreground/30"}`}>
+          <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selected.size === 0 ? "bg-primary border-primary" : "border-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"}`}>
             {selected.size === 0 && <Check className="w-2.5 h-2.5 text-primary-foreground" />}
           </div>
           Все
@@ -844,7 +844,7 @@ function MultiSelectPopover({
             onClick={() => onToggle(item.id)}
             data-testid={`${testId}-item-${item.id}`}
           >
-            <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selected.has(item.id) ? "bg-primary border-primary" : "border-muted-foreground/30"}`}>
+            <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selected.has(item.id) ? "bg-primary border-primary" : "border-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"}`}>
               {selected.has(item.id) && <Check className="w-2.5 h-2.5 text-primary-foreground" />}
             </div>
             <span className="truncate">{item.name}</span>
@@ -989,7 +989,7 @@ function OfTab() {
                   onClick={() => setSelectedAreas(new Set())}
                   data-testid="button-zof-filter-area-all"
                 >
-                  <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedAreas.size === 0 ? "bg-primary border-primary" : "border-muted-foreground/30"}`}>
+                  <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedAreas.size === 0 ? "bg-primary border-primary" : "border-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"}`}>
                     {selectedAreas.size === 0 && <Check className="w-2.5 h-2.5 text-primary-foreground" />}
                   </div>
                   Все участки
@@ -1001,7 +1001,7 @@ function OfTab() {
                     onClick={() => setSelectedAreas(toggleSetItem(selectedAreas, a.id))}
                     data-testid={`button-zof-filter-area-${a.id}`}
                   >
-                    <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedAreas.has(a.id) ? "bg-primary border-primary" : "border-muted-foreground/30"}`}>
+                    <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedAreas.has(a.id) ? "bg-primary border-primary" : "border-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"}`}>
                       {selectedAreas.has(a.id) && <Check className="w-2.5 h-2.5 text-primary-foreground" />}
                     </div>
                     {a.name}
@@ -1023,7 +1023,7 @@ function OfTab() {
                   onClick={() => setSelectedMonths(new Set())}
                   data-testid="button-zof-filter-month-all"
                 >
-                  <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedMonths.size === 0 ? "bg-primary border-primary" : "border-muted-foreground/30"}`}>
+                  <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedMonths.size === 0 ? "bg-primary border-primary" : "border-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"}`}>
                     {selectedMonths.size === 0 && <Check className="w-2.5 h-2.5 text-primary-foreground" />}
                   </div>
                   Все месяцы
@@ -1035,7 +1035,7 @@ function OfTab() {
                     onClick={() => setSelectedMonths(toggleSetItem(selectedMonths, m))}
                     data-testid={`button-zof-filter-month-${m}`}
                   >
-                    <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedMonths.has(m) ? "bg-primary border-primary" : "border-muted-foreground/30"}`}>
+                    <div className={`w-3.5 h-3.5 rounded-sm border flex items-center justify-center ${selectedMonths.has(m) ? "bg-primary border-primary" : "border-[color-mix(in_oklab,var(--muted-foreground)_30%,transparent)]"}`}>
                       {selectedMonths.has(m) && <Check className="w-2.5 h-2.5 text-primary-foreground" />}
                     </div>
                     {m}
@@ -1046,7 +1046,7 @@ function OfTab() {
           </div>
 
           {filteredAreas.length > 0 && (
-            <Card className="bg-primary/5 border-primary/20">
+            <Card className="bg-[color-mix(in_oklab,var(--primary)_5%,transparent)] border-[color-mix(in_oklab,var(--primary)_20%,transparent)]">
               <CardContent className="py-3 px-4">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
@@ -1098,7 +1098,7 @@ function OfTab() {
                       return (
                         <div key={monthKey} className="border rounded-lg">
                           <button
-                            className="flex items-center justify-between w-full px-3 py-2 text-left hover:bg-muted/50 rounded-lg"
+                            className="flex items-center justify-between w-full px-3 py-2 text-left hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded-lg"
                             onClick={() => toggleMonth(monthKey)}
                             data-testid={`button-zof-toggle-month-${monthKey}`}
                           >
@@ -1124,7 +1124,7 @@ function OfTab() {
                                 </thead>
                                 <tbody>
                                   {monthData.employees.map((emp, i) => (
-                                    <tr key={i} className="border-b last:border-0 hover:bg-muted/30" data-testid={`row-zof-employee-${area.id}-${monthData.month}-${i}`}>
+                                    <tr key={i} className="border-b last:border-0 hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]" data-testid={`row-zof-employee-${area.id}-${monthData.month}-${i}`}>
                                       <td className="py-1.5 text-xs">
                                         <div className="flex items-center gap-2">
                                           <span>{emp.fio}</span>
diff --git a/client-di2/src/pages/settings.tsx b/client-di2/src/pages/settings.tsx
index b441b46..95c9ff5 100644
--- a/client-di2/src/pages/settings.tsx
+++ b/client-di2/src/pages/settings.tsx
@@ -469,7 +469,7 @@ function NotificationsTab() {
                 const isEditing = editingIndex === index;
                 const isSaved = chat.id.trim().length > 0 && chat.name.trim().length > 0;
                 return isEditing ? (
-                <div key={index} className="flex items-start gap-2 p-3 border border-border rounded-md bg-muted/30">
+                <div key={index} className="flex items-start gap-2 p-3 border border-border rounded-md bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]">
                   <div className="flex-1 space-y-2">
                     <Input
                       placeholder="Название (например, Отдел продаж)"
@@ -511,7 +511,7 @@ function NotificationsTab() {
                   </Button>
                 </div>
                 ) : (
-                <div key={index} className="flex items-center gap-2 px-3 py-2 border border-border rounded-md bg-muted/30">
+                <div key={index} className="flex items-center gap-2 px-3 py-2 border border-border rounded-md bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]">
                   <div className="flex-1 min-w-0">
                     <span className="text-sm font-medium text-foreground">{chat.name || "Без названия"}</span>
                     <span className="text-xs text-muted-foreground ml-2">{chat.id}</span>
@@ -1289,7 +1289,7 @@ function AiTab() {
                 return (
                   <div key={idx} className="border border-border rounded-md" data-testid={`log-entry-${idx}`}>
                     <button
-                      className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-muted/50 transition-colors"
+                      className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] transition-colors"
                       onClick={() => setExpandedLog(isExpanded ? null : idx)}
                       data-testid={`button-expand-log-${idx}`}
                     >
@@ -1317,7 +1317,7 @@ function AiTab() {
                           <div>
                             <p className="text-xs font-medium text-muted-foreground mb-1">SQL запросы ({entry.sqlQueries.length}):</p>
                             {entry.sqlQueries.map((sql, si) => (
-                              <pre key={si} className="text-xs bg-muted/50 rounded p-2 overflow-x-auto font-mono mb-1">{sql}</pre>
+                              <pre key={si} className="text-xs bg-[color-mix(in_oklab,var(--muted)_50%,transparent)] rounded p-2 overflow-x-auto font-mono mb-1">{sql}</pre>
                             ))}
                           </div>
                         )}
@@ -1532,7 +1532,7 @@ function TableConfigTab() {
                         const dbType = incCol?.type || expCol?.type || "?";
                         const currentLabel = editingLabels[col] !== undefined ? editingLabels[col] : (config.columnLabels[col] || "");
                         return (
-                          <tr key={col} className="border-b border-border last:border-0 hover:bg-muted/30">
+                          <tr key={col} className="border-b border-border last:border-0 hover:bg-[color-mix(in_oklab,var(--muted)_30%,transparent)]">
                             <td className="px-3 py-1.5">
                               <code className="text-xs font-mono">{col}</code>
                             </td>
diff --git a/client-di2/src/themes/Di2ThemeProvider.tsx b/client-di2/src/themes/Di2ThemeProvider.tsx
new file mode 100644
index 0000000..0b755fb
--- /dev/null
+++ b/client-di2/src/themes/Di2ThemeProvider.tsx
@@ -0,0 +1,227 @@
+/**
+ * Di2ThemeProvider — мост тем/скинов iistwin в субапп DI2.
+ * Порт логики client/src/themes/ThemeProvider.tsx без useAuth/useQuery:
+ * приоритет скина — localStorage['skin'] → скин организации → 'iistwin'.
+ * Ключи localStorage ('skin'/'theme') общие с основным приложением —
+ * выбор пользователя синхронизируется между iistwin и /di2 автоматически.
+ */
+
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import type { Skin } from "@skin/tokens";
+import { generateSkinCss } from "@skin/tokens";
+import { BUILT_IN_SKINS, DEFAULT_SKIN_ID, getBuiltInSkinById, isBuiltInSkin } from "@skin";
+
+const THEME_STORAGE_KEY = "theme";
+const SKIN_STORAGE_KEY = "skin";
+
+export type Theme = "light" | "dark";
+
+interface Di2ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+  skinId: string;
+  setSkinId: (skinId: string) => void;
+  availableSkins: Skin[];
+}
+
+const Di2ThemeContext = createContext<Di2ThemeContextType | undefined>(undefined);
+
+function getSystemTheme(): Theme {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function getInitialTheme(): Theme {
+  if (typeof window === "undefined") return "light";
+  const stored = localStorage.getItem(THEME_STORAGE_KEY);
+  if (stored === "light" || stored === "dark") return stored;
+  return getSystemTheme();
+}
+
+async function fetchJson<T>(url: string): Promise<T | null> {
+  try {
+    const res = await fetch(url, { credentials: "include" });
+    if (!res.ok) return null;
+    return (await res.json()) as T;
+  } catch {
+    return null;
+  }
+}
+
+/** Вставляет или обновляет runtime CSS для пользовательского скина. */
+function applyRuntimeSkinCss(skinId: string, theme: Theme, skinTokens?: Skin["tokens"]) {
+  if (!skinTokens || !skinTokens[theme]) {
+    const style = document.getElementById("skin-runtime");
+    if (style) style.textContent = "";
+    return;
+  }
+
+  // Единый генератор с основным приложением (flatten токенов + переменные Темы 2.0)
+  const css = generateSkinCss({ id: skinId, name: skinId, tokens: skinTokens }, theme);
+
+  let style = document.getElementById("skin-runtime");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "skin-runtime";
+    document.head.appendChild(style);
+  }
+  style.textContent = css;
+}
+
+interface Di2ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export function Di2ThemeProvider({ children }: Di2ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(getInitialTheme);
+  const [skinId, setSkinIdState] = useState<string>(DEFAULT_SKIN_ID);
+  const [orgSkinId, setOrgSkinId] = useState<string | null>(null);
+  const [customSkinsMap, setCustomSkinsMap] = useState<Record<string, Skin>>({});
+
+  // Список скинов организации (встроенные + кастомные) — для валидации id из localStorage
+  useEffect(() => {
+    let cancelled = false;
+    fetchJson<{ success: boolean; skins: Array<{ id: string; name: string; description?: string; isEditable: boolean; isBuiltIn: boolean }> }>(
+      "/api/organization/skins"
+    ).then((data) => {
+      if (cancelled || !data?.skins) return;
+      const map: Record<string, Skin> = {};
+      for (const item of data.skins) {
+        if (item.isBuiltIn) continue;
+        map[item.id] = {
+          id: item.id,
+          name: item.name,
+          description: item.description,
+          isEditable: item.isEditable,
+          tokens: {} as Skin["tokens"], // токены подгружаются отдельно при выборе
+        };
+      }
+      setCustomSkinsMap(map);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Активный скин организации (fallback, если в localStorage нет валидного выбора)
+  useEffect(() => {
+    let cancelled = false;
+    fetchJson<{ success: boolean; skinId: string; skin?: Skin }>("/api/organization/current-skin").then((data) => {
+      if (cancelled || !data?.skinId) return;
+      setOrgSkinId(data.skinId);
+      // Если организационный скин кастомный — сразу сохраняем его токены
+      if (data.skin && !isBuiltInSkin(data.skinId)) {
+        setCustomSkinsMap((prev) => ({ ...prev, [data.skinId]: data.skin! }));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Инициализация skinId: localStorage > организационный > default (как в основном клиенте)
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const allSkinIds = new Set([...BUILT_IN_SKINS.map((s) => s.id), ...Object.keys(customSkinsMap)]);
+    const stored = localStorage.getItem(SKIN_STORAGE_KEY);
+
+    if (stored && allSkinIds.has(stored)) {
+      setSkinIdState(stored);
+    } else if (orgSkinId && allSkinIds.has(orgSkinId)) {
+      setSkinIdState(orgSkinId);
+    } else {
+      setSkinIdState(DEFAULT_SKIN_ID);
+    }
+  }, [orgSkinId, customSkinsMap]);
+
+  // Токены текущего кастомного скина (встроенные уже есть в generated-skins.css)
+  const isCurrentCustom = Boolean(skinId) && !isBuiltInSkin(skinId) && !customSkinsMap[skinId]?.tokens?.light;
+  useEffect(() => {
+    if (!isCurrentCustom) return;
+    let cancelled = false;
+    fetchJson<{ success: boolean; skin: Skin }>(`/api/organization/skins/${encodeURIComponent(skinId)}`).then((data) => {
+      if (cancelled || !data?.skin) return;
+      setCustomSkinsMap((prev) => ({ ...prev, [data.skin.id]: data.skin }));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isCurrentCustom, skinId]);
+
+  const setTheme = useCallback((newTheme: Theme) => {
+    setThemeState(newTheme);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(THEME_STORAGE_KEY, newTheme);
+    }
+  }, []);
+
+  const setSkinId = useCallback((newSkinId: string) => {
+    setSkinIdState(newSkinId);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(SKIN_STORAGE_KEY, newSkinId);
+    }
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === "light" ? "dark" : "light");
+  }, [theme, setTheme]);
+
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-skin", skinId);
+    root.setAttribute("data-theme", theme);
+    root.classList.remove("light", "dark");
+    root.classList.add(theme);
+
+    // Для встроенных скинов CSS уже есть в generated-skins.css.
+    // Для пользовательских — генерируем runtime.
+    const customSkin = customSkinsMap[skinId];
+    applyRuntimeSkinCss(skinId, theme, customSkin?.tokens);
+  }, [theme, skinId, customSkinsMap]);
+
+  // Слушаем системную тему, если нет явного сохранённого выбора
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e: MediaQueryListEvent) => {
+      if (!localStorage.getItem(THEME_STORAGE_KEY)) {
+        setThemeState(e.matches ? "dark" : "light");
+      }
+    };
+    media.addEventListener("change", handler);
+    return () => media.removeEventListener("change", handler);
+  }, []);
+
+  const availableSkins = useMemo(() => {
+    const custom = Object.values(customSkinsMap);
+    return [...BUILT_IN_SKINS, ...custom];
+  }, [customSkinsMap]);
+
+  const value: Di2ThemeContextType = {
+    theme,
+    setTheme,
+    toggleTheme,
+    skinId,
+    setSkinId,
+    availableSkins,
+  };
+
+  return <Di2ThemeContext.Provider value={value}>{children}</Di2ThemeContext.Provider>;
+}
+
+export function useDi2Theme() {
+  const context = useContext(Di2ThemeContext);
+  if (!context) {
+    throw new Error("useDi2Theme must be used within a Di2ThemeProvider");
+  }
+  return context;
+}
+
+/** Удобный хук только для текущего скина. */
+export function useDi2Skin() {
+  const { skinId, setSkinId, availableSkins } = useDi2Theme();
+  const skin = availableSkins.find((s) => s.id === skinId) ?? getBuiltInSkinById(DEFAULT_SKIN_ID)!;
+  return { skinId, skin, setSkinId, availableSkins };
+}
diff --git a/client-di2/tailwind.config.ts b/client-di2/tailwind.config.ts
index f03f31b..26666fe 100644
--- a/client-di2/tailwind.config.ts
+++ b/client-di2/tailwind.config.ts
@@ -1,5 +1,12 @@
 import type { Config } from "tailwindcss";
 
+// Конфиг Tailwind субаппа DI2.
+// Цвета переведены на формат основного клиента iistwin: CSS-переменные содержат
+// полные значения из скинов (hsl(...)), поэтому <alpha-value> НЕ используется.
+// Модификаторы прозрачности семантических цветов (bg-muted/50 и т.п.) заменены
+// в исходниках на arbitrary values с color-mix — Tailwind v3 не умеет применять
+// alpha-модификаторы к var()-цветам и молча не генерирует такие классы.
+
 export default {
   darkMode: ["class"],
   // Глобы относительно cwd сборки (корень репозитория) — npm-скрипты всегда запускаются оттуда
@@ -7,74 +14,86 @@ export default {
   theme: {
     extend: {
       borderRadius: {
-        lg: ".5625rem", /* 9px */
-        md: ".375rem", /* 6px */
-        sm: ".1875rem", /* 3px */
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
       },
       colors: {
         // Flat / base colors (regular buttons)
-        background: "hsl(var(--background) / <alpha-value>)",
-        foreground: "hsl(var(--foreground) / <alpha-value>)",
-        border: "hsl(var(--border) / <alpha-value>)",
-        input: "hsl(var(--input) / <alpha-value>)",
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
         card: {
-          DEFAULT: "hsl(var(--card) / <alpha-value>)",
-          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
-          border: "hsl(var(--card-border) / <alpha-value>)",
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)",
+          border: "var(--card-border)",
         },
         popover: {
-          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
-          border: "hsl(var(--popover-border) / <alpha-value>)",
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)",
+          border: "var(--popover-border)",
         },
         primary: {
-          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
-          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
           border: "var(--primary-border)",
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)",
           border: "var(--secondary-border)",
         },
         muted: {
-          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)",
           border: "var(--muted-border)",
         },
         accent: {
-          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
-          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)",
           border: "var(--accent-border)",
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+          DEFAULT: "var(--destructive)",
+          foreground: "var(--destructive-foreground)",
           border: "var(--destructive-border)",
         },
-        ring: "hsl(var(--ring) / <alpha-value>)",
+        warning: {
+          DEFAULT: "var(--warning)",
+          foreground: "var(--warning-foreground)",
+        },
+        success: {
+          DEFAULT: "var(--success)",
+          foreground: "var(--success-foreground)",
+        },
+        info: {
+          DEFAULT: "var(--info)",
+          foreground: "var(--info-foreground)",
+        },
         chart: {
-          "1": "hsl(var(--chart-1) / <alpha-value>)",
-          "2": "hsl(var(--chart-2) / <alpha-value>)",
-          "3": "hsl(var(--chart-3) / <alpha-value>)",
-          "4": "hsl(var(--chart-4) / <alpha-value>)",
-          "5": "hsl(var(--chart-5) / <alpha-value>)",
+          "1": "var(--chart-1)",
+          "2": "var(--chart-2)",
+          "3": "var(--chart-3)",
+          "4": "var(--chart-4)",
+          "5": "var(--chart-5)",
         },
         sidebar: {
-          ring: "hsl(var(--sidebar-ring) / <alpha-value>)",
-          DEFAULT: "hsl(var(--sidebar) / <alpha-value>)",
-          foreground: "hsl(var(--sidebar-foreground) / <alpha-value>)",
-          border: "hsl(var(--sidebar-border) / <alpha-value>)",
+          ring: "var(--sidebar-ring)",
+          DEFAULT: "var(--sidebar)",
+          foreground: "var(--sidebar-foreground)",
+          border: "var(--sidebar-border)",
         },
         "sidebar-primary": {
-          DEFAULT: "hsl(var(--sidebar-primary) / <alpha-value>)",
-          foreground: "hsl(var(--sidebar-primary-foreground) / <alpha-value>)",
+          DEFAULT: "var(--sidebar-primary)",
+          foreground: "var(--sidebar-primary-foreground)",
           border: "var(--sidebar-primary-border)",
         },
         "sidebar-accent": {
-          DEFAULT: "hsl(var(--sidebar-accent) / <alpha-value>)",
-          foreground: "hsl(var(--sidebar-accent-foreground) / <alpha-value>)",
-          border: "var(--sidebar-accent-border)"
+          DEFAULT: "var(--sidebar-accent)",
+          foreground: "var(--sidebar-accent-foreground)",
+          border: "var(--sidebar-accent-border)",
         },
         status: {
           online: "rgb(34 197 94)",
diff --git a/client-di2/tsconfig.json b/client-di2/tsconfig.json
index d48e6d0..14394e5 100644
--- a/client-di2/tsconfig.json
+++ b/client-di2/tsconfig.json
@@ -18,7 +18,9 @@
     "types": ["node", "vite/client"],
     "paths": {
       "@/*": ["./src/*"],
-      "@shared/*": ["./shared/*"]
+      "@shared/*": ["./shared/*"],
+      "@skin": ["../client/src/themes/index.ts"],
+      "@skin/*": ["../client/src/themes/*"]
     }
   }
 }
diff --git a/vite.config.di2.ts b/vite.config.di2.ts
index 757d794..e8c8966 100644
--- a/vite.config.di2.ts
+++ b/vite.config.di2.ts
@@ -13,6 +13,8 @@ export default defineConfig({
     alias: {
       "@": path.resolve(import.meta.dirname, "client-di2", "src"),
       "@shared": path.resolve(import.meta.dirname, "client-di2", "shared"),
+      // Общий код тем/скинов iistwin (чистый TS + generated-skins.css) — единый источник токенов
+      "@skin": path.resolve(import.meta.dirname, "client", "src", "themes"),
     },
   },
   build: {