/* Токени теми Будпрокат CRM — ЄДИНЕ місце, де живуть значення кольору.
 *
 * :root — світла тема, .dark — темна. Вони знято з продукту один в один
 * (packages/ui/src/styles/theme.css, тікет BP-1272), тому правка тут
 * відповідає правці в коді: на сторінці є кнопка «Експортувати», вона
 * віддає готовий блок .dark для вставки назад у CRM.
 */
:root {
  --color-bg: #fafafa;
  --color-canvas: #f5f5f4;
  --color-card: #ffffff;
  --color-shell: oklch(0.94 0 0);
  --color-border: #e1ddd9;
  --color-border-strong: #cfcbc6;
  --color-border-hover: color-mix(in oklab, #0c0a09 25%, transparent);
  --color-border-focus: color-mix(in oklab, #0c0a09 50%, transparent);
  --color-fg: #0c0a09;
  --color-fg-2: #292524;
  --color-muted: #f5f5f4;
  --color-muted-fg: #78716c;
  --color-subtle: #a8a29e;
  --color-primary: #0c0a09;
  --color-primary-fg: #fafaf9;
  --color-on-solid: #ffffff;
  --color-accent: oklch(0.55 0.13 250);
  --color-accent-soft: oklch(0.96 0.02 250);
  --color-accent-soft-hover: oklch(0.945 0.025 250);
  --color-accent-fg: oklch(0.32 0.13 250);
  --color-success: oklch(0.55 0.13 150);
  --color-success-soft: oklch(0.96 0.04 150);
  --color-success-fg: oklch(0.32 0.10 150);
  --color-warning: oklch(0.65 0.14 70);
  --color-warning-soft: oklch(0.96 0.04 80);
  --color-warning-fg: oklch(0.42 0.12 60);
  --color-notice: oklch(0.72 0.17 88);
  --color-notice-soft: oklch(0.97 0.04 90);
  --color-notice-fg: oklch(0.44 0.14 78);
  --color-danger: oklch(0.58 0.20 28);
  --color-danger-soft: oklch(0.96 0.03 25);
  --color-danger-fg: oklch(0.42 0.18 28);
  --color-violet: oklch(0.55 0.18 295);
  --color-violet-soft: oklch(0.96 0.03 295);
  --color-violet-fg: oklch(0.36 0.18 295);
  --color-info: oklch(0.82 0.16 95);
  --color-info-soft: oklch(0.96 0.05 95);
  --color-info-fg: oklch(0.52 0.13 95);
  --color-teal: oklch(0.56 0.09 195);
  --color-teal-soft: oklch(0.96 0.04 195);
  --color-teal-fg: oklch(0.42 0.09 195);
  --color-kind-single: var(--color-card);
  --color-kind-single-fg: var(--color-fg);
  --color-kind-single-ring: var(--color-border-strong);
  --color-kind-component: oklch(0.93 0.03 75);
  --color-kind-component-fg: oklch(0.42 0.08 75);
  --color-kind-component-ring: oklch(0.86 0.05 75);
  --color-kind-element: oklch(0.93 0.05 290);
  --color-kind-element-fg: oklch(0.42 0.13 290);
  --color-kind-element-ring: oklch(0.86 0.07 290);
  --color-kind-consumable: oklch(0.93 0.05 230);
  --color-kind-consumable-fg: oklch(0.40 0.10 230);
  --color-kind-consumable-ring: oklch(0.86 0.07 230);
  --color-brand-navy: #1a1f3a;
  --color-brand-navy-2: #0f1428;
  --color-brand-red: #e63946;
  --color-brand-red-soft: oklch(0.96 0.04 25);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow-xs: 0 1px 0 rgba(15, 15, 15, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 15, 15, 0.06), 0 1px 2px rgba(15, 15, 15, 0.04);
  --shadow-lg: 0 12px 30px rgba(15, 15, 15, 0.08), 0 2px 6px rgba(15, 15, 15, 0.04);
  --shadow-popover: 0 0 0 1px rgba(15, 15, 15, 0.04), 0 8px 24px -6px rgba(15, 15, 15, 0.10), 0 4px 8px -2px rgba(15, 15, 15, 0.05);
  --shadow-dialog: 0 0 0 1px rgba(15, 15, 15, 0.04), 0 24px 64px -12px rgba(15, 15, 15, 0.18), 0 12px 24px -8px rgba(15, 15, 15, 0.10);
  --shadow-drawer: 0 -1px 0 rgba(15, 15, 15, 0.05), 0 -12px 28px -20px rgba(15, 15, 15, 0.16), 0 -32px 64px -32px rgba(15, 15, 15, 0.1);
  --shadow-bar: 0 -2px 6px -2px rgba(15, 15, 15, 0.1), 0 -14px 24px -12px rgba(15, 15, 15, 0.08);
  --font-sans: 'Inter', 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-headline: 17px;
  --text-title: 15px;
  --text-body: 13px;
  --text-label: 11.5px;
  --text-mono: 11px;
  --color-shell-hover: oklch(0.92 0 0);
  --color-shell-active: oklch(0.9 0 0);
  --color-on-brand: oklch(0.98 0 0);
  --color-on-brand-2: oklch(0.95 0 0);
  --color-on-brand-muted: oklch(0.75 0 0);
  --color-on-brand-subtle: oklch(0.7 0 0);
  --color-background: var(--color-bg);
  --color-foreground: var(--color-fg);
  --color-card-foreground: var(--color-fg);
  --color-popover: var(--color-card);
  --color-popover-foreground: var(--color-fg);
  --color-muted-foreground: var(--color-muted-fg);
  --color-accent-foreground: var(--color-accent-fg);
  --color-primary-foreground: var(--color-primary-fg);
  --color-secondary: var(--color-muted);
  --color-secondary-foreground: var(--color-fg);
  --color-destructive: var(--color-danger);
  --color-destructive-foreground: var(--color-danger-fg);
  --color-input: var(--color-border);
  --color-ring: var(--color-accent);
  --color-sidebar: var(--color-shell);
  --color-sidebar-foreground: var(--color-fg);
  --color-sidebar-border: var(--color-border);
  --text-input: 13px;
}

.dark {
  color-scheme: dark;
  --color-shell: oklch(0.165 0.005 60);
  --color-canvas: oklch(0.185 0.005 60);
  --color-bg: oklch(0.205 0.005 60);
  --color-card: oklch(0.245 0.005 60);
  --color-muted: oklch(0.275 0.005 60);
  --color-border: oklch(0.31 0.005 60);
  --color-border-strong: oklch(0.4 0.006 60);
  --color-border-hover: color-mix(in oklab, #fafaf9 28%, transparent);
  --color-border-focus: color-mix(in oklab, #fafaf9 52%, transparent);
  --color-fg: oklch(0.96 0.002 60);
  --color-fg-2: oklch(0.88 0.003 60);
  --color-muted-fg: oklch(0.7 0.006 60);
  --color-subtle: oklch(0.56 0.006 60);
  --color-primary: oklch(0.93 0.003 60);
  --color-primary-fg: oklch(0.18 0.004 60);
  --color-on-solid: oklch(0.18 0.004 60);
  --color-accent: oklch(0.68 0.13 250);
  --color-accent-soft: oklch(0.285 0.04 250);
  --color-accent-soft-hover: oklch(0.315 0.045 250);
  --color-accent-fg: oklch(0.82 0.1 250);
  --color-success: oklch(0.7 0.14 150);
  --color-success-soft: oklch(0.285 0.04 150);
  --color-success-fg: oklch(0.82 0.13 150);
  --color-warning: oklch(0.76 0.14 70);
  --color-warning-soft: oklch(0.285 0.04 70);
  --color-warning-fg: oklch(0.85 0.12 75);
  --color-notice: oklch(0.8 0.16 88);
  --color-notice-soft: oklch(0.285 0.04 90);
  --color-notice-fg: oklch(0.88 0.14 88);
  --color-danger: oklch(0.65 0.19 28);
  --color-danger-soft: oklch(0.285 0.05 25);
  --color-danger-fg: oklch(0.8 0.14 28);
  --color-violet: oklch(0.7 0.16 295);
  --color-violet-soft: oklch(0.285 0.05 295);
  --color-violet-fg: oklch(0.84 0.12 295);
  --color-info: oklch(0.82 0.16 95);
  --color-info-soft: oklch(0.285 0.045 95);
  --color-info-fg: oklch(0.88 0.13 95);
  --color-teal: oklch(0.7 0.09 195);
  --color-teal-soft: oklch(0.285 0.035 195);
  --color-teal-fg: oklch(0.82 0.08 195);
  --color-kind-component: oklch(0.3 0.03 75);
  --color-kind-component-fg: oklch(0.85 0.06 75);
  --color-kind-component-ring: oklch(0.38 0.04 75);
  --color-kind-element: oklch(0.3 0.05 290);
  --color-kind-element-fg: oklch(0.86 0.08 290);
  --color-kind-element-ring: oklch(0.4 0.06 290);
  --color-kind-consumable: oklch(0.3 0.05 230);
  --color-kind-consumable-fg: oklch(0.86 0.07 230);
  --color-kind-consumable-ring: oklch(0.4 0.06 230);
  --color-shell-hover: oklch(0.215 0.005 60);
  --color-shell-active: oklch(0.245 0.005 60);
  --color-brand-red-soft: oklch(0.285 0.05 25);
  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-popover: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px -6px rgba(0, 0, 0, 0.6), 0 4px 8px -2px rgba(0, 0, 0, 0.45);
  --shadow-dialog: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px -12px rgba(0, 0, 0, 0.7), 0 12px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-drawer: 0 -1px 0 rgba(255, 255, 255, 0.07), 0 -12px 28px -20px rgba(0, 0, 0, 0.6), 0 -32px 64px -32px rgba(0, 0, 0, 0.45);
  --shadow-bar: 0 -2px 6px -2px rgba(0, 0, 0, 0.5), 0 -14px 24px -12px rgba(0, 0, 0, 0.4);
}