/* ==========================================================================
   electro: дизайн-токены
   Светлая и тёмная темы задаются через light-dark().
   Тема выбирается: системная (prefers-color-scheme) или вручную
   через атрибут <html data-theme="light|dark">.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Типографика --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 650;

  /* --- Отступы --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* --- Радиусы --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Размеры --- */
  --tap: 2.75rem;            /* минимальная область нажатия 44px */
  --header-h: 3.5rem;
  --container: 76rem;
  --gutter: 1rem;

  /* --- Движение --- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;

  /* --- Нейтральные цвета --- */
  --c-bg: light-dark(#f3f5f8, #0e131a);
  --c-surface: light-dark(#ffffff, #171d26);
  --c-surface-2: light-dark(#eef1f5, #1f2733);
  --c-surface-3: light-dark(#e3e8ef, #293243);
  --c-border: light-dark(#d9dee7, #2d3646);
  --c-input-border: light-dark(#8691a3, #6b778c);
  --c-text: light-dark(#18202c, #e8ecf2);
  --c-text-muted: light-dark(#556073, #a3aebf);
  --c-overlay: rgb(8 12 18 / 0.58);

  /* --- Акцент: янтарный (бренд) --- */
  --c-accent: light-dark(#f7b500, #f2b01e);
  --c-accent-hover: light-dark(#e3a400, #ffc741);
  --c-on-accent: #1d1500;
  --c-accent-soft: light-dark(#fff3cf, #3b2e0c);

  /* --- Акцент: синий (ссылки, фокус, вторичное) --- */
  --c-blue: light-dark(#1d5bbf, #7db0ff);
  --c-blue-soft: light-dark(#e3edfb, #1b2d4d);
  --c-focus: light-dark(#1d5bbf, #8ab8ff);

  /* --- Семантика --- */
  --c-danger: light-dark(#b42318, #ff8f85);
  --c-on-danger: light-dark(#ffffff, #2a0a07);
  /* Заливка опасных кнопок: белый текст, контраст не ниже 4,5:1 в обеих темах */
  --c-danger-solid: light-dark(#b42318, #c92f24);
  --c-danger-solid-hover: light-dark(#a31d14, #d93a2f);
  --c-danger-solid-active: light-dark(#8f1910, #ad2118);
  --c-danger-text: light-dark(#a4180e, #ffa8a0);
  --c-danger-soft: light-dark(#fde8e6, #3f1d1b);
  --c-danger-border: light-dark(#e4a6a1, #7a3631);
  --c-success-text: light-dark(#0f6a3a, #8fe0b4);
  --c-success-soft: light-dark(#d8f3e3, #15382a);
  --c-warn-text: light-dark(#7a4b00, #ffd978);

  /* --- Тени --- */
  --shadow-color: light-dark(rgb(16 24 40 / 0.1), rgb(0 0 0 / 0.55));
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 4px 14px var(--shadow-color);
  --shadow-lg: 0 18px 48px var(--shadow-color);

  /* --- Статусы заявок: фон, текст, точка --- */
  --st-new-bg: light-dark(#dfeafc, #1b2d4d);
  --st-new-fg: light-dark(#153f86, #b3d0ff);
  --st-new-dot: light-dark(#2563eb, #6ea8ff);

  --st-assigned-bg: light-dark(#e9e3fb, #2b2350);
  --st-assigned-fg: light-dark(#43289a, #d3c8ff);
  --st-assigned-dot: light-dark(#6d4fd6, #9d86ff);

  --st-in_progress-bg: light-dark(#ffefc2, #4a3710);
  --st-in_progress-fg: light-dark(#6e4300, #ffdc84);
  --st-in_progress-dot: light-dark(#e69a00, #f2b01e);

  --st-done-bg: light-dark(#d8f3e3, #15382a);
  --st-done-fg: light-dark(#0f5f35, #a9ebc7);
  --st-done-dot: light-dark(#1f9d5c, #4cc58a);

  --st-closed-bg: light-dark(#e5e8ee, #2a3240);
  --st-closed-fg: light-dark(#333d4c, #c9d1dd);
  --st-closed-dot: light-dark(#6b7689, #8a96a8);

  --st-cancelled-bg: light-dark(#fbe0de, #4a1f1d);
  --st-cancelled-fg: light-dark(#8f1d14, #ffb9b2);
  --st-cancelled-dot: light-dark(#d92d20, #ff6b5e);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
}