/* SintexPro Operate UI — токены. Файл генерируется: scripts/build_tokens.py. Руками не править.
   Тема: по умолчанию как в системе; явный выбор — атрибут data-theme="light|dark" на <html>.
   Плотность: data-density="compact" на <html>. Чернильная зона (всегда тёмная): класс .op-ink. */

:root {
  color-scheme: light;
  --op-canvas: #f3f6f9;
  --op-surface: #ffffff;
  --op-surface-2: #f7f9fb;
  --op-surface-hover: #eef3f7;
  --op-surface-selected: #e6f6fa;
  --op-border: #dfe6ee;
  --op-border-strong: #c5d0dc;
  --op-border-input: #7d8ea2;
  --op-text: #0b1522;
  --op-text-2: #3c4c60;
  --op-text-3: #5b6b7f;
  --op-text-disabled: #9aa8b7;
  --op-link: #00708f;
  --op-link-hover: #005670;
  --op-accent: #007a9e;
  --op-accent-hover: #006a8a;
  --op-accent-pressed: #005a75;
  --op-on-accent: #ffffff;
  --op-accent-soft: #e0f7fc;
  --op-accent-soft-border: #99dbea;
  --op-accent-text: #00667f;
  --op-focus: #0086b0;
  --op-neutral-fg: #44546a;
  --op-neutral-bg: #edf1f5;
  --op-neutral-border: #cfd8e2;
  --op-info-fg: #1f5fcc;
  --op-info-bg: #e8f0fe;
  --op-info-border: #b9cff7;
  --op-warning-fg: #8a5600;
  --op-warning-bg: #fff3d6;
  --op-warning-border: #f0d48f;
  --op-success-fg: #0d7440;
  --op-success-bg: #e3f5ea;
  --op-success-border: #a9dcbc;
  --op-critical-fg: #b8232f;
  --op-critical-bg: #fde8ea;
  --op-critical-border: #f2b5bb;
  --op-terminal-fg: #5f6f82;
  --op-terminal-border: #808fa2;
  --op-chart-1: #0a8fb5;
  --op-chart-2: #eda100;
  --op-chart-3: #2a78d6;
  --op-chart-4: #1baf7a;
  --op-chart-5: #4a3aa7;
  --op-chart-6: #e87ba4;
  --op-chart-grid: #e3e9f0;
  --op-scrim: rgb(11 21 34 / 0.48);
  --op-shadow-overlay: 0 12px 32px rgb(11 21 34 / 0.16), 0 2px 6px rgb(11 21 34 / 0.08);
  --op-skeleton: #e6ecf2;
  --op-skeleton-shine: #f3f6f9;
  --op-chart-axis: #5b6b7f;
  --op-chart-label: #3c4c60;
  --op-sidebar-bg: #0b1a2d;
  --op-sidebar-border: #16273d;
  --op-font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --op-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --op-font-brand: "Unbounded", "Manrope", "Segoe UI", system-ui, sans-serif;
  --op-fs-xs: 12px;
  --op-lh-xs: 16px;
  --op-fs-sm: 13px;
  --op-lh-sm: 18px;
  --op-fs-md: 14px;
  --op-lh-md: 20px;
  --op-fs-lg: 16px;
  --op-lh-lg: 24px;
  --op-fs-xl: 18px;
  --op-lh-xl: 26px;
  --op-fs-2xl: 22px;
  --op-lh-2xl: 28px;
  --op-fs-3xl: 28px;
  --op-lh-3xl: 34px;
  --op-fw-regular: 400;
  --op-fw-medium: 500;
  --op-fw-semibold: 600;
  --op-fw-bold: 700;
  --op-space-0: 0;
  --op-space-1: 4px;
  --op-space-2: 8px;
  --op-space-3: 12px;
  --op-space-4: 16px;
  --op-space-5: 20px;
  --op-space-6: 24px;
  --op-space-8: 32px;
  --op-space-10: 40px;
  --op-space-12: 48px;
  --op-space-16: 64px;
  --op-radius-xs: 4px;
  --op-radius-sm: 6px;
  --op-radius-md: 8px;
  --op-radius-lg: 12px;
  --op-radius-pill: 999px;
  --op-dur-fast: 120ms;
  --op-dur: 180ms;
  --op-dur-slow: 240ms;
  --op-ease: cubic-bezier(0.2, 0, 0, 1);
  --op-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --op-sidebar-w: 248px;
  --op-rail-w: 64px;
  --op-topbar-h: 52px;
  --op-content-max: 1440px;
  --op-form-max: 760px;
  --op-prose-max: 68ch;
  --op-gutter: 24px;
  --op-z-sticky: 10;
  --op-z-nav: 30;
  --op-z-overlay: 40;
  --op-z-dialog: 50;
  --op-z-toast: 60;
  --op-control-h: 36px;
  --op-control-h-sm: 32px;
  --op-control-h-lg: 44px;
  --op-cell-py: 10px;
  --op-cell-px: 12px;
  --op-panel-p: 20px;
  --op-gap: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --op-canvas: #070c15;
    --op-surface: #0c1320;
    --op-surface-2: #111a2a;
    --op-surface-hover: #142033;
    --op-surface-selected: #0d2230;
    --op-border: #1c2a3d;
    --op-border-strong: #2b3d55;
    --op-border-input: #5b7392;
    --op-text: #e8eff7;
    --op-text-2: #a8b7c8;
    --op-text-3: #8193a8;
    --op-text-disabled: #56667b;
    --op-link: #4fe0ff;
    --op-link-hover: #8beeff;
    --op-accent: #00d9ff;
    --op-accent-hover: #5ce6ff;
    --op-accent-pressed: #00b8d9;
    --op-on-accent: #00141d;
    --op-accent-soft: #0b2a35;
    --op-accent-soft-border: #11576b;
    --op-accent-text: #4fe0ff;
    --op-focus: #00f5ff;
    --op-neutral-fg: #b4c2d1;
    --op-neutral-bg: #18222f;
    --op-neutral-border: #2b3a4d;
    --op-info-fg: #6aa8ff;
    --op-info-bg: #13233d;
    --op-info-border: #24406b;
    --op-warning-fg: #f5b740;
    --op-warning-bg: #2a2210;
    --op-warning-border: #5a4514;
    --op-success-fg: #4cd68c;
    --op-success-bg: #0f2a1e;
    --op-success-border: #1d5238;
    --op-critical-fg: #ff7480;
    --op-critical-bg: #2f141a;
    --op-critical-border: #6a2630;
    --op-terminal-fg: #8fa0b5;
    --op-terminal-border: #5a6d86;
    --op-chart-1: #139abb;
    --op-chart-2: #c98500;
    --op-chart-3: #3987e5;
    --op-chart-4: #199e70;
    --op-chart-5: #9085e9;
    --op-chart-6: #d55181;
    --op-chart-grid: #1c2a3d;
    --op-scrim: rgb(2 6 12 / 0.72);
    --op-shadow-overlay: 0 16px 40px rgb(0 0 0 / 0.5), 0 0 0 1px #2b3d55;
    --op-skeleton: #162234;
    --op-skeleton-shine: #1d2c42;
    --op-chart-axis: #8193a8;
    --op-chart-label: #a8b7c8;
    --op-sidebar-bg: #050911;
    --op-sidebar-border: #121c2b;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --op-canvas: #070c15;
  --op-surface: #0c1320;
  --op-surface-2: #111a2a;
  --op-surface-hover: #142033;
  --op-surface-selected: #0d2230;
  --op-border: #1c2a3d;
  --op-border-strong: #2b3d55;
  --op-border-input: #5b7392;
  --op-text: #e8eff7;
  --op-text-2: #a8b7c8;
  --op-text-3: #8193a8;
  --op-text-disabled: #56667b;
  --op-link: #4fe0ff;
  --op-link-hover: #8beeff;
  --op-accent: #00d9ff;
  --op-accent-hover: #5ce6ff;
  --op-accent-pressed: #00b8d9;
  --op-on-accent: #00141d;
  --op-accent-soft: #0b2a35;
  --op-accent-soft-border: #11576b;
  --op-accent-text: #4fe0ff;
  --op-focus: #00f5ff;
  --op-neutral-fg: #b4c2d1;
  --op-neutral-bg: #18222f;
  --op-neutral-border: #2b3a4d;
  --op-info-fg: #6aa8ff;
  --op-info-bg: #13233d;
  --op-info-border: #24406b;
  --op-warning-fg: #f5b740;
  --op-warning-bg: #2a2210;
  --op-warning-border: #5a4514;
  --op-success-fg: #4cd68c;
  --op-success-bg: #0f2a1e;
  --op-success-border: #1d5238;
  --op-critical-fg: #ff7480;
  --op-critical-bg: #2f141a;
  --op-critical-border: #6a2630;
  --op-terminal-fg: #8fa0b5;
  --op-terminal-border: #5a6d86;
  --op-chart-1: #139abb;
  --op-chart-2: #c98500;
  --op-chart-3: #3987e5;
  --op-chart-4: #199e70;
  --op-chart-5: #9085e9;
  --op-chart-6: #d55181;
  --op-chart-grid: #1c2a3d;
  --op-scrim: rgb(2 6 12 / 0.72);
  --op-shadow-overlay: 0 16px 40px rgb(0 0 0 / 0.5), 0 0 0 1px #2b3d55;
  --op-skeleton: #162234;
  --op-skeleton-shine: #1d2c42;
  --op-chart-axis: #8193a8;
  --op-chart-label: #a8b7c8;
  --op-sidebar-bg: #050911;
  --op-sidebar-border: #121c2b;
}

/* Чернильная зона: боковая панель, бренд-панель входа. Всегда тёмные значения. */
.op-ink {
  color-scheme: dark;
  --op-canvas: #070c15;
  --op-surface: #0c1320;
  --op-surface-2: #111a2a;
  --op-surface-hover: #142033;
  --op-surface-selected: #0d2230;
  --op-border: #1c2a3d;
  --op-border-strong: #2b3d55;
  --op-border-input: #5b7392;
  --op-text: #e8eff7;
  --op-text-2: #a8b7c8;
  --op-text-3: #8193a8;
  --op-text-disabled: #56667b;
  --op-link: #4fe0ff;
  --op-link-hover: #8beeff;
  --op-accent: #00d9ff;
  --op-accent-hover: #5ce6ff;
  --op-accent-pressed: #00b8d9;
  --op-on-accent: #00141d;
  --op-accent-soft: #0b2a35;
  --op-accent-soft-border: #11576b;
  --op-accent-text: #4fe0ff;
  --op-focus: #00f5ff;
  --op-neutral-fg: #b4c2d1;
  --op-neutral-bg: #18222f;
  --op-neutral-border: #2b3a4d;
  --op-info-fg: #6aa8ff;
  --op-info-bg: #13233d;
  --op-info-border: #24406b;
  --op-warning-fg: #f5b740;
  --op-warning-bg: #2a2210;
  --op-warning-border: #5a4514;
  --op-success-fg: #4cd68c;
  --op-success-bg: #0f2a1e;
  --op-success-border: #1d5238;
  --op-critical-fg: #ff7480;
  --op-critical-bg: #2f141a;
  --op-critical-border: #6a2630;
  --op-terminal-fg: #8fa0b5;
  --op-terminal-border: #5a6d86;
  --op-chart-1: #139abb;
  --op-chart-2: #c98500;
  --op-chart-3: #3987e5;
  --op-chart-4: #199e70;
  --op-chart-5: #9085e9;
  --op-chart-6: #d55181;
  --op-chart-grid: #1c2a3d;
  --op-scrim: rgb(2 6 12 / 0.72);
  --op-shadow-overlay: 0 16px 40px rgb(0 0 0 / 0.5), 0 0 0 1px #2b3d55;
  --op-skeleton: #162234;
  --op-skeleton-shine: #1d2c42;
  --op-chart-axis: #8193a8;
  --op-chart-label: #a8b7c8;
}

:root[data-density="compact"] {
  --op-control-h: 32px;
  --op-control-h-sm: 28px;
  --op-control-h-lg: 40px;
  --op-cell-py: 6px;
  --op-cell-px: 10px;
  --op-panel-p: 16px;
  --op-gap: 12px;
}

/* Сенсорные экраны: цели не меньше 44px независимо от плотности */
@media (pointer: coarse) {
  :root, :root[data-density="compact"] {
    --op-control-h: 44px;
    --op-control-h-sm: 40px;
  }
}

@media (max-width: 720px) {
  :root { --op-gutter: 16px; }
}