/* Дизайн-токены «Сенсор.Портал».
 *
 * Перенесены из web/src/design/tokens.css портала без изменения значений —
 * чтобы страницу потом можно было механически вставить в портал React-ом:
 * ни одного собственного цвета или размера, только эти переменные.
 * Взято подмножество, которое реально нужно табличному экрану.
 */
:root {
  color-scheme: light;

  /* Фирменная пара из утверждённых образцов: других брендовых цветов нет. */
  --c-brand-50: color-mix(in srgb, #D7EFF9 42%, #ffffff);
  --c-brand-100: #D7EFF9;
  --c-brand-500: #29B2E9;
  --c-brand-600: #29B2E9;
  --c-brand-700: color-mix(in srgb, #29B2E9 64%, #062f43);
  --c-brand-800: color-mix(in srgb, #29B2E9 36%, #062f43);
  --c-brand-solid: #29B2E9;
  --c-brand-solid-hover: color-mix(in srgb, #29B2E9 82%, #062f43);
  --c-on-solid: #062f43;
  --g-brand: linear-gradient(135deg, #29B2E9 0%, #D7EFF9 100%);
  --g-page: radial-gradient(circle at 86% 4%, color-mix(in srgb, #29B2E9 16%, transparent), transparent 34%), #D7EFF9;

  /* Нейтрали */
  --c-bg: #D7EFF9;
  --c-surface: #ffffff;
  --c-surface-2: color-mix(in srgb, #D7EFF9 34%, #ffffff);
  --c-surface-3: color-mix(in srgb, #D7EFF9 66%, #ffffff);
  --c-border: color-mix(in srgb, #29B2E9 20%, #D7EFF9);
  --c-border-strong: color-mix(in srgb, #29B2E9 42%, #D7EFF9);
  --c-text: #071e28;
  --c-text-2: color-mix(in srgb, #29B2E9 18%, #354b54);
  --c-text-3: color-mix(in srgb, #29B2E9 20%, #50636b);
  --c-count-bg: color-mix(in srgb, #D7EFF9 76%, #ffffff);
  --c-topbar-bg: rgba(255, 255, 255, 0.82);
  --c-overlay: rgba(6, 47, 67, 0.52);

  /* Статусы */
  --c-ok: #15803d;      --c-ok-bg: #f0fdf4;
  --c-warn: #b45309;    --c-warn-bg: #fffbeb; --c-warn-border: #fed7aa;
  --c-danger: #b91c1c;  --c-danger-bg: #fef2f2;
  --c-info: #0369a1;    --c-info-bg: #f0f9ff;

  /* Геометрия */
  --r-card: 14px;
  --r-ctl: 9px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(6, 47, 67, 0.06);
  --shadow-2: 0 10px 32px rgba(6, 47, 67, 0.13);
  --shadow-3: 0 24px 64px rgba(6, 47, 67, 0.24);

  /* Шкала отступов — всё кратно 4 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  /* Минимум под поле даты: «01.09.2026» плюс иконка календаря и отступы.
     Меньше — и браузер обрезает год. */
  --date-w: 10.5rem;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* Типографика */
  --font: 'Golos Text', system-ui, sans-serif;
  --font-display: 'Unbounded', 'Golos Text', sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px;
  --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 28px;

  /* Интерактивность и слои */
  --focus-ring: 0 0 0 3px rgba(41, 178, 233, 0.24);
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms var(--ease-standard);
  --t-base: 220ms var(--ease-out);
  --z-sticky: 30;
  --z-dropdown: 50;
  --z-overlay: 70;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --c-brand-50: color-mix(in srgb, #29B2E9 13%, #0a1820);
  --c-brand-100: color-mix(in srgb, #29B2E9 24%, #0a1820);
  --c-brand-700: #D7EFF9;
  --c-brand-800: #D7EFF9;
  --c-brand-solid-hover: color-mix(in srgb, #29B2E9 84%, #D7EFF9);
  --g-page: radial-gradient(circle at 86% 4%, rgba(41, 178, 233, .13), transparent 34%), #091820;

  --c-bg: #091820;
  --c-surface: #10242d;
  --c-surface-2: color-mix(in srgb, #29B2E9 8%, #10242d);
  --c-surface-3: color-mix(in srgb, #29B2E9 14%, #10242d);
  --c-border: color-mix(in srgb, #29B2E9 22%, #10242d);
  --c-border-strong: color-mix(in srgb, #29B2E9 38%, #10242d);
  --c-text: #f4fbfe;
  --c-text-2: #D7EFF9;
  --c-text-3: #D7EFF9;
  --c-count-bg: color-mix(in srgb, #29B2E9 13%, #10242d);
  --c-topbar-bg: rgba(16, 33, 38, 0.88);
  --c-overlay: rgba(2, 10, 12, 0.72);

  --c-ok: #86efac;      --c-ok-bg: #132f23;
  --c-warn: #fcd34d;    --c-warn-bg: #352b14; --c-warn-border: #725322;
  --c-danger: #fca5a5;  --c-danger-bg: #3a1c20;
  --c-info: #7dd3fc;    --c-info-bg: #112f3c;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 10px 32px rgba(0, 0, 0, 0.32);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.48);
  --focus-ring: 0 0 0 3px rgba(41, 178, 233, 0.28);
}

@media (prefers-contrast: more) {
  :root {
    --c-border: #b8c6c9;
    --c-border-strong: #8da3a8;
    --c-text-2: #3f5a61;
    --c-text-3: #4c656b;
  }
  html[data-theme='dark'] {
    --c-border: #58767d;
    --c-border-strong: #79969c;
    --c-text-2: #d2dfe1;
    --c-text-3: #bdcdd0;
  }
}