/* ============================================================
   Data Extractor — дизайн-токены
   Источник: pb-extractor/pbextractor/static/app.css (тема МЦ),
   палитра сайта client.dm-tmn.ru/new.
   Единственный источник правды для цветов, типографики, отступов.
   Подключать первым, до components.css.
   ============================================================ */

:root{
  /* ---------- палитра (сырые значения, в разметке не использовать) ---------- */
  --dx-navy-900:#0A0F1A;
  --dx-navy-800:#0E1626;
  --dx-navy-700:#121C2E;
  --dx-navy-600:#141E31;
  --dx-navy-500:#18243A;
  --dx-ink-900:#06101F;   /* текст на светлой кнопке */
  --dx-white-050:#E8EEF8;
  --dx-white-200:#9FB0C9;
  --dx-white-400:#8798B3;

  --dx-blue-500:#4E9BFF;
  --dx-blue-400:#6FAEFF;  /* hover основной кнопки */
  --dx-blue-300:#7FC0FF;
  --dx-green-500:#3FD6A0;
  --dx-green-300:#8CF0CE;
  --dx-red-500:#FF6B7A;
  --dx-red-400:#FF8793;   /* hover опасной кнопки */
  --dx-red-300:#FFA3AD;
  --dx-amber-500:#F5B94E;

  /* фирменные цвета логотипа МЦ — только для знака, не для UI */
  --dx-brand-cyan:#29ABE2;
  --dx-brand-blue:#0071BC;

  /* ---------- поверхности ---------- */
  --dx-surface-base:var(--dx-navy-900);     /* фон страницы */
  --dx-surface-raised:var(--dx-navy-800);
  --dx-surface-sunken:var(--dx-navy-700);
  --dx-surface-card:var(--dx-navy-600);
  --dx-surface-card-top:var(--dx-navy-500); /* верх градиента карточки */
  --dx-surface-field:rgba(6,11,20,.6);      /* фон поля ввода */
  --dx-surface-inset:rgba(0,0,0,.25);       /* pre, вложенные блоки */
  --dx-surface-subtle:rgba(255,255,255,.015);
  --dx-surface-header:rgba(10,15,26,.82);   /* липкая шапка + blur */
  --dx-surface-scrim:rgba(3,6,12,.72);      /* подложка модалки */

  --dx-card-gradient:linear-gradient(180deg,var(--dx-surface-card-top),var(--dx-surface-card));
  --dx-surface-disabled:rgba(255,255,255,.06);
  --dx-row-alt:rgba(255,255,255,.025);   /* раскрытая строка таблицы */
  --dx-selection:rgba(78,155,255,.30);
  --dx-switch-knob:var(--dx-text-strong);
  --dx-skel-base:rgba(255,255,255,.05);
  --dx-skel-shine:rgba(255,255,255,.07);
  --dx-kpi-gradient:linear-gradient(180deg,rgba(78,155,255,.10),rgba(255,255,255,.018));
  --dx-kpi-line:rgba(78,155,255,.26);
  --dx-banner-danger:linear-gradient(90deg,rgba(255,107,122,.14),rgba(255,107,122,.03));
  --dx-banner-info:linear-gradient(90deg,rgba(78,155,255,.14),rgba(78,155,255,.03));
  --dx-banner-warn:linear-gradient(90deg,rgba(245,185,78,.16),rgba(245,185,78,.03));
  --dx-ring-neutral:rgba(107,124,150,.15);
  --dx-ring-ok:rgba(63,214,160,.16);
  --dx-ring-danger:rgba(255,107,122,.16);
  --dx-ring-warn:rgba(245,185,78,.18);
  --dx-page-glow:
    radial-gradient(1000px 600px at 85% -10%,rgba(78,155,255,.12),transparent 62%),
    radial-gradient(700px 500px at -10% 30%,rgba(63,214,160,.05),transparent 60%);

  /* ---------- текст ---------- */
  --dx-text-strong:var(--dx-white-050);   /* основной */
  --dx-text-muted:var(--dx-white-200);    /* подписи, вторичный */
  --dx-text-faint:var(--dx-white-400);    /* минимум, контраст ≥4.5:1 на карточке */
  --dx-text-on-accent:var(--dx-ink-900);
  --dx-text-link:var(--dx-blue-300);

  /* ---------- границы ---------- */
  --dx-border:rgba(255,255,255,.08);      /* разделители, рамка карточки */
  --dx-border-strong:rgba(255,255,255,.14);/* поля, кнопки-призраки */
  --dx-border-hover:rgba(255,255,255,.24);

  /* ---------- акценты и состояния ---------- */
  --dx-accent:var(--dx-blue-500);
  --dx-accent-hover:var(--dx-blue-400);
  --dx-accent-soft:var(--dx-blue-300);
  --dx-accent-line:rgba(78,155,255,.35);
  --dx-accent-edge:rgba(78,155,255,.55);  /* рамка при наведении */
  --dx-accent-tint:rgba(78,155,255,.12);
  --dx-accent-wash:rgba(78,155,255,.10);  /* фон призрачной кнопки при наведении */
  --dx-accent-ring:rgba(78,155,255,.18);
  --dx-accent-focus:rgba(78,155,255,.70);

  --dx-ok:var(--dx-green-500);
  --dx-ok-soft:var(--dx-green-300);
  --dx-ok-line:rgba(63,214,160,.38);
  --dx-ok-tint:rgba(63,214,160,.07);

  --dx-danger:var(--dx-red-500);
  --dx-danger-hover:var(--dx-red-400);
  --dx-danger-soft:var(--dx-red-300);
  --dx-danger-line:rgba(255,107,122,.40);
  --dx-danger-edge:rgba(255,107,122,.60);
  --dx-danger-tint:rgba(255,107,122,.07);
  --dx-danger-focus:rgba(255,107,122,.70);
  --dx-text-on-danger:#1A0508;
  --dx-danger-btn-bg:var(--dx-danger);
  --dx-danger-btn-bg-hover:var(--dx-danger-hover);
  --dx-danger-btn-ink:var(--dx-text-on-danger);
  --dx-danger-btn-line:transparent;

  --dx-warn:var(--dx-amber-500);
  --dx-warn-line:rgba(245,185,78,.50);
  --dx-warn-tint:rgba(245,185,78,.16);

  /* ---------- типографика ---------- */
  --dx-font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,
    'Helvetica Neue',Arial,sans-serif;
  --dx-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --dx-fs-h1:clamp(28px,3.3vw,42px);
  --dx-fs-h2:clamp(21px,2.1vw,27px);
  --dx-fs-h3:18px;
  --dx-fs-lead:clamp(15.5px,1.4vw,18px);  /* .sub */
  --dx-fs-body:16px;
  --dx-fs-ui:15px;                         /* кнопки, табы, таблицы */
  --dx-fs-sm:14px;                         /* .quiet, подписи */
  --dx-fs-xs:13px;                         /* пилюли, подсказки */
  --dx-fs-label:13.5px;
  --dx-fs-caps:12px;                       /* надзаголовки таблиц */

  --dx-fw-regular:400;
  --dx-fw-medium:500;
  --dx-fw-semibold:600;
  --dx-fw-bold:700;
  --dx-fw-black:800;

  --dx-lh-tight:1.12;   /* заголовки */
  --dx-lh-snug:1.45;
  --dx-lh-body:1.6;

  --dx-ls-display:-.03em;
  --dx-ls-heading:-.02em;
  --dx-ls-caps:.16em;
  --dx-ls-eyebrow:.22em;

  /* ---------- сетка и отступы ---------- */
  --dx-wrap:1200px;
  --dx-gutter:clamp(20px,5vw,48px);
  --dx-header-h:72px;

  --dx-space-1:4px;
  --dx-space-2:8px;
  --dx-space-3:12px;
  --dx-space-4:16px;
  --dx-space-5:20px;
  --dx-space-6:26px;
  --dx-space-7:32px;
  --dx-space-8:40px;
  --dx-block-gap:clamp(40px,5vw,60px);   /* между смысловыми блоками */
  --dx-card-pad:24px 26px;

  /* ---------- радиусы ---------- */
  --dx-radius-card:16px;
  --dx-radius-banner:14px;
  --dx-radius-field:12px;
  --dx-radius-chip:8px;
  --dx-radius-pill:100px;

  /* ---------- тени и фокус ---------- */
  --dx-shadow-accent:0 20px 50px -26px rgba(78,155,255,.95);
  --dx-focus:2px solid var(--dx-blue-300);
  --dx-focus-offset:3px;

  /* ---------- анимация ---------- */
  --dx-ease:cubic-bezier(.4,0,.2,1);
  --dx-dur-fast:.2s;
  --dx-dur:.25s;

  /* ---------- слои ---------- */
  --dx-z-header:50;
  --dx-z-dialog:100;
}

/* ============================================================
   СВЕТЛАЯ ТЕМА
   Включается атрибутом на <html>: <html data-dx-theme="light">.
   Переопределяются только смысловые токены — палитра и компоненты
   не трогаются. Автопереключение по системной настройке — ниже.
   ============================================================ */
[data-dx-theme="light"]{
  /* палитра светлой темы */
  --dx-paper-000:#FFFFFF;
  --dx-paper-050:#F6F8FC;
  --dx-paper-100:#EEF2F8;
  --dx-paper-200:#E3E9F2;
  --dx-slate-900:#0E1626;
  --dx-slate-700:#3D4C63;
  --dx-slate-500:#5B6B84;

  /* акценты темнее, чтобы держать контраст на белом */
  --dx-blue-ink:#1B72C4;
  --dx-blue-ink-hover:#15619F;
  --dx-blue-ink-text:#0A5C9E;   /* текст акцентом — темнее заливки, для контраста */
  --dx-green-ink:#0E7A57;
  --dx-red-ink:#C0303F;
  --dx-red-ink-hover:#A32531;
  --dx-amber-ink:#8A5A00;

  /* поверхности */
  --dx-surface-base:var(--dx-paper-050);
  --dx-surface-raised:var(--dx-paper-000);
  --dx-surface-sunken:var(--dx-paper-100);
  --dx-surface-card:var(--dx-paper-000);
  --dx-surface-card-top:var(--dx-paper-000);
  --dx-surface-field:var(--dx-paper-000);
  --dx-surface-inset:var(--dx-paper-100);
  --dx-surface-subtle:rgba(14,22,38,.012);
  --dx-surface-header:rgba(246,248,252,.86);
  --dx-surface-scrim:rgba(14,22,38,.40);
  --dx-surface-disabled:rgba(14,22,38,.05);
  --dx-row-alt:rgba(14,22,38,.028);

  --dx-card-gradient:linear-gradient(180deg,var(--dx-paper-000),var(--dx-paper-000));
  --dx-page-glow:
    radial-gradient(1000px 600px at 85% -10%,rgba(27,114,196,.07),transparent 62%),
    radial-gradient(700px 500px at -10% 30%,rgba(14,122,87,.04),transparent 60%);

  /* текст */
  --dx-text-strong:var(--dx-slate-900);
  --dx-text-muted:var(--dx-slate-700);
  --dx-text-faint:var(--dx-slate-500);
  --dx-text-on-accent:#FFFFFF;
  --dx-text-on-danger:#FFFFFF;
  --dx-text-link:var(--dx-blue-ink-text);

  /* границы — на светлом заметнее, чем полупрозрачный белый на тёмном */
  --dx-border:rgba(14,22,38,.10);
  --dx-border-strong:rgba(14,22,38,.18);
  --dx-border-hover:rgba(14,22,38,.32);

  /* акцент */
  --dx-accent:var(--dx-blue-ink);
  --dx-accent-hover:var(--dx-blue-ink-hover);
  --dx-accent-soft:var(--dx-blue-ink-text);
  --dx-accent-line:rgba(27,114,196,.32);
  --dx-accent-edge:rgba(27,114,196,.55);
  --dx-accent-tint:rgba(27,114,196,.09);
  --dx-accent-wash:rgba(27,114,196,.07);
  --dx-accent-ring:rgba(27,114,196,.16);
  --dx-accent-focus:rgba(27,114,196,.65);

  /* состояния */
  --dx-ok:var(--dx-green-ink);
  --dx-ok-soft:var(--dx-green-ink);
  --dx-ok-line:rgba(14,122,87,.34);
  --dx-ok-tint:rgba(14,122,87,.07);

  --dx-danger:var(--dx-red-ink);
  --dx-danger-hover:var(--dx-red-ink-hover);
  --dx-danger-soft:var(--dx-red-ink);
  --dx-danger-line:rgba(192,48,63,.34);
  --dx-danger-edge:rgba(192,48,63,.55);
  --dx-danger-tint:rgba(192,48,63,.06);
  --dx-danger-focus:rgba(192,48,63,.65);
  /* Кнопка опасного действия на светлом — светлая заливка с тёмным текстом:
     белый текст на насыщенном красном читается хуже и давит на макет. */
  --dx-danger-btn-bg:#FBE8EA;
  --dx-danger-btn-bg-hover:#F6D7DB;
  --dx-danger-btn-ink:#8E1F2B;
  --dx-danger-btn-line:rgba(142,31,43,.28);

  --dx-warn:var(--dx-amber-ink);
  --dx-warn-line:rgba(138,90,0,.40);
  --dx-warn-tint:rgba(138,90,0,.09);

  /* производное */
  --dx-selection:rgba(27,114,196,.18);
  --dx-switch-knob:#FFFFFF;
  --dx-skel-base:rgba(14,22,38,.07);
  --dx-skel-shine:rgba(255,255,255,.65);
  --dx-kpi-gradient:linear-gradient(180deg,rgba(27,114,196,.07),rgba(255,255,255,0));
  --dx-kpi-line:rgba(27,114,196,.22);
  --dx-banner-danger:linear-gradient(90deg,rgba(192,48,63,.10),rgba(192,48,63,.02));
  --dx-banner-info:linear-gradient(90deg,rgba(27,114,196,.10),rgba(27,114,196,.02));
  --dx-banner-warn:linear-gradient(90deg,rgba(138,90,0,.12),rgba(138,90,0,.02));
  --dx-ring-neutral:rgba(91,107,132,.18);
  --dx-ring-ok:rgba(14,122,87,.18);
  --dx-ring-danger:rgba(192,48,63,.18);
  --dx-ring-warn:rgba(138,90,0,.20);

  /* тень вместо свечения: на светлом свечение не читается */
  --dx-shadow-accent:0 10px 22px -16px rgba(14,22,38,.35);
}

/* ============================================================
   Совместимость с pb-extractor: старые короткие имена.
   Даёт подключить систему в существующее приложение без правки
   его CSS. В новых приложениях использовать только --dx-*.
   ============================================================ */
:root{
  --bg0:var(--dx-surface-base);   --bg1:var(--dx-surface-raised); --bg2:var(--dx-surface-sunken);
  --card:var(--dx-surface-card);  --card2:var(--dx-surface-card-top);
  --line:var(--dx-border);        --line2:var(--dx-border-strong);
  --tx:var(--dx-text-strong);     --tx2:var(--dx-text-muted);     --tx3:var(--dx-text-faint);
  --blue:var(--dx-accent);        --blue2:var(--dx-accent-soft);
  --green:var(--dx-ok);           --green2:var(--dx-ok-soft);
  --red:var(--dx-danger);         --red2:var(--dx-danger-soft);
  --amber:var(--dx-warn);
  --disp:var(--dx-font);
  --wrap:var(--dx-wrap);          --gut:var(--dx-gutter);
  --head:var(--dx-header-h);      --r:var(--dx-radius-card);
}