/* © 2026 ООО «Спецэкоэра». Все права защищены. */
/* =====================================================================
   «Сервисные программы» 2.0 — дизайн-токены
   Единственный источник цветов, шрифтов, отступов, радиусов, теней и анимаций.
   Тема: светлая по умолчанию; тёмная — по prefers-color-scheme или
   по атрибуту <html data-theme="dark">. Явный data-theme="light" побеждает
   системную тёмную тему.
   Контраст текстовых пар проверен скриптом tools/contrast_check.py (WCAG AA).
   ===================================================================== */

:root {
  color-scheme: light;

  /* ---- Палитра бренда (сырые значения, в компонентах не использовать) ---- */
  --blue-50:  #eef4fc;
  --blue-100: #d9e6f8;
  --blue-500: #2a6fd1;
  --blue-600: #1a5bb8;
  --blue-700: #134a9a;
  --blue-900: #0b2340;
  --teal-50:  #e6f6f4;
  --teal-500: #12a594;
  --teal-600: #0d8577;
  --teal-700: #0a6b60;

  /* ---- Поверхности ---- */
  --bg:          #f4f6f9;   /* фон приложения */
  --surface:     #ffffff;   /* карточки, таблицы */
  --surface-2:   #f7f9fb;   /* вложенные блоки, шапки таблиц */
  --surface-3:   #edf1f5;   /* hover, треки */
  --overlay:     rgba(11, 22, 38, .48);
  --border:      #e1e6ed;
  --border-strong: #c9d2dd;

  /* ---- Текст ---- */
  --text:   #0f1b2a;        /* основной, 16.9:1 на surface */
  --text-2: #44546a;        /* вторичный, 7.6:1 */
  --text-3: #5f6e82;        /* подписи, 5.2:1 */
  --text-inverse: #ffffff;

  /* ---- Акцент ---- */
  --primary:        #1a5bb8; /* кнопки, ссылки; белый текст 6.6:1 */
  --primary-hover:  #134a9a;
  --primary-soft:   #eaf1fb;
  --primary-soft-text: #134a9a;
  --accent:         #0d8577; /* бирюза: ИИ, интеграции, «живые» элементы */
  --accent-soft:    #e3f5f2;
  --accent-text:    #0a6b60;
  --focus-ring:     0 0 0 3px rgba(42, 111, 209, .35);

  /* ---- Семантика (всегда в паре с иконкой и словом) ---- */
  --success: #177a43;  --success-soft: #e6f4ec;  --success-text: #146c3b;
  --warning: #b35c00;  --warning-soft: #fff3e0;  --warning-text: #8f4a00;
  --danger:  #c42b1c;  --danger-soft:  #fdecea;  --danger-text:  #a82416;
  --info:    #1f6fc5;  --info-soft:    #e8f1fc;  --info-text:    #175aa3;
  --neutral-soft: #eef1f5; --neutral-text: #44546a;

  /* ---- Боковое меню (тёмно-синее в обеих темах) ---- */
  --side-bg:      #0c1f36;
  --side-bg-2:    #12294a;
  --side-text:    #c4d1e3;
  --side-text-2:  #8ea2bf;
  --side-active:  #ffffff;
  --side-active-bg: rgba(255,255,255,.10);
  --side-border:  rgba(255,255,255,.08);

  /* ---- Данные (графики): категориальные слоты, фиксированный порядок ---- */
  --series-1: #2a78d6;  /* синий */
  --series-2: #eb6834;  /* оранжевый */
  --series-3: #1baf7a;  /* аква */
  --series-4: #eda100;
  --seq-0: #eef4fc; --seq-1: #c5dbf5; --seq-2: #8db8ec; --seq-3: #4f8fdc; --seq-4: #1a5bb8; --seq-5: #0f3b7a;
  --grid: #e7ebf0;
  --axis: #5f6e82;

  /* ---- Типографика ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PT Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "PT Mono", monospace;
  --fs-xs: 12px;  --lh-xs: 16px;
  --fs-sm: 13px;  --lh-sm: 18px;
  --fs-md: 14px;  --lh-md: 20px;   /* основной текст интерфейса */
  --fs-lg: 16px;  --lh-lg: 24px;
  --fs-xl: 20px;  --lh-xl: 28px;   /* заголовок экрана на телефоне */
  --fs-2xl: 24px; --lh-2xl: 32px;  /* заголовок экрана */
  --fs-3xl: 30px; --lh-3xl: 38px;  /* KPI-число */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tracking-tight: -0.01em;

  /* ---- Отступы (шаг 4px) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Радиусы ---- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;

  /* ---- Тени ---- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --shadow-lg: 0 16px 40px -8px rgba(16, 24, 40, .22), 0 6px 12px -6px rgba(16, 24, 40, .10);

  /* ---- Размеры ---- */
  --side-w: 248px;
  --side-w-collapsed: 72px;
  --top-h: 60px;
  --control-h: 38px;
  --control-h-lg: 48px;   /* сенсорные элементы в кабинете инженера */
  --content-max: 1600px;

  /* ---- Анимации ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

  /* ---- Фирменный градиент (малыми дозами: логотип, активный пункт, главная кнопка, графики) ---- */
  --brand-1: #1f63c9;
  --brand-2: #12a594;
  --brand-grad: linear-gradient(135deg, #1f63c9 0%, #1886b5 55%, #12a594 100%);
  --brand-grad-btn: linear-gradient(180deg, #2268cc 0%, #1a5bb8 100%);
  --brand-glow: 0 6px 20px -6px rgba(31, 99, 201, .55);
  --card-border: rgba(15, 27, 42, .07);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px -10px rgba(16, 24, 40, .10);
  --shadow-card-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 32px -12px rgba(16, 24, 40, .18);
  --bg-glow-1: rgba(31, 99, 201, .07);
  --bg-glow-2: rgba(18, 165, 148, .07);
  --noise-opacity: .025;

  /* ---- Слои ---- */
  --z-side: 30; --z-top: 40; --z-drawer: 60; --z-modal: 70; --z-palette: 80; --z-tour: 90; --z-toast: 100; --z-tip: 110;
}

/* ---------- Тёмная тема: значения подобраны отдельно, а не инверсией ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1218; --surface: #141b24; --surface-2: #19222d; --surface-3: #222d3a;
    --overlay: rgba(0, 0, 0, .6);
    --border: #263241; --border-strong: #354457;
    --text: #e8eef5; --text-2: #b0bdcc; --text-3: #8f9fb3; --text-inverse: #0d1218;
    --primary: #4d8fe8; --primary-hover: #6aa3ef; --primary-soft: #16294a; --primary-soft-text: #9cc2f5;
    --accent: #2cc2ae; --accent-soft: #0f2e2b; --accent-text: #5fd8c6;
    --focus-ring: 0 0 0 3px rgba(106, 163, 239, .45);
    --success: #3cbf74; --success-soft: #0f2a1c; --success-text: #6fd59a;
    --warning: #f0a83c; --warning-soft: #2f2210; --warning-text: #f5c06e;
    --danger:  #f07466; --danger-soft:  #34171a; --danger-text:  #f59a8f;
    --info:    #5fa8f2; --info-soft:    #132842; --info-text:    #8cc0f6;
    --neutral-soft: #1f2935; --neutral-text: #b0bdcc;
    --side-bg: #0a0f15; --side-bg-2: #111923; --side-text: #b6c3d4; --side-text-2: #7f90a6;
    --side-active-bg: rgba(255,255,255,.08); --side-border: rgba(255,255,255,.06);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --seq-0: #142033; --seq-1: #173a66; --seq-2: #1f5596; --seq-3: #3577c9; --seq-4: #66a0ec; --seq-5: #a9cbf6;
    --grid: #222d3a; --axis: #8f9fb3;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 6px 16px -4px rgba(0,0,0,.55);
    --shadow-lg: 0 20px 48px -8px rgba(0,0,0,.7);
    --brand-grad-btn: linear-gradient(180deg, #5c9bf0 0%, #4d8fe8 100%);
    --brand-glow: 0 6px 22px -6px rgba(77, 143, 232, .55);
    --card-border: rgba(255, 255, 255, .06);
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px -14px rgba(0, 0, 0, .7);
    --shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -14px rgba(0, 0, 0, .8);
    --bg-glow-1: rgba(77, 143, 232, .10);
    --bg-glow-2: rgba(44, 194, 174, .07);
    --noise-opacity: .035;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1218; --surface: #141b24; --surface-2: #19222d; --surface-3: #222d3a;
  --overlay: rgba(0, 0, 0, .6);
  --border: #263241; --border-strong: #354457;
  --text: #e8eef5; --text-2: #b0bdcc; --text-3: #8f9fb3; --text-inverse: #0d1218;
  --primary: #4d8fe8; --primary-hover: #6aa3ef; --primary-soft: #16294a; --primary-soft-text: #9cc2f5;
  --accent: #2cc2ae; --accent-soft: #0f2e2b; --accent-text: #5fd8c6;
  --focus-ring: 0 0 0 3px rgba(106, 163, 239, .45);
  --success: #3cbf74; --success-soft: #0f2a1c; --success-text: #6fd59a;
  --warning: #f0a83c; --warning-soft: #2f2210; --warning-text: #f5c06e;
  --danger:  #f07466; --danger-soft:  #34171a; --danger-text:  #f59a8f;
  --info:    #5fa8f2; --info-soft:    #132842; --info-text:    #8cc0f6;
  --neutral-soft: #1f2935; --neutral-text: #b0bdcc;
  --side-bg: #0a0f15; --side-bg-2: #111923; --side-text: #b6c3d4; --side-text-2: #7f90a6;
  --side-active-bg: rgba(255,255,255,.08); --side-border: rgba(255,255,255,.06);
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --seq-0: #142033; --seq-1: #173a66; --seq-2: #1f5596; --seq-3: #3577c9; --seq-4: #66a0ec; --seq-5: #a9cbf6;
  --grid: #222d3a; --axis: #8f9fb3;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 6px 16px -4px rgba(0,0,0,.55);
  --shadow-lg: 0 20px 48px -8px rgba(0,0,0,.7);
  --brand-grad-btn: linear-gradient(180deg, #5c9bf0 0%, #4d8fe8 100%);
  --brand-glow: 0 6px 22px -6px rgba(77, 143, 232, .55);
  --card-border: rgba(255, 255, 255, .06);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px -14px rgba(0, 0, 0, .7);
  --shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -14px rgba(0, 0, 0, .8);
  --bg-glow-1: rgba(77, 143, 232, .10);
  --bg-glow-2: rgba(44, 194, 174, .07);
  --noise-opacity: .035;
}

/* ---------- Меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}