/* =========================================================
   Тема «808 Checker» для компонентов 808 Utilities
   ---------------------------------------------------------
   Компоненты, размеры и радиусы взяты из UI-кита 808 Utilities
   (Preclinic, Bootstrap 5.3.3), шрифт - из макета Figma.
   Цвета заменены палитрой из Figma-макета «808 Checker».

   Основной цвет макета - градиент
   linear-gradient(90deg, #33414E 0%, #2C3B49 100%).
   Им залиты меню, кнопки, активные вкладки, плитки и hero.
   Там, где нужен один цвет (рамки, галочки, иконки), - #33414E.

   Как заменены цвета 808 -> Figma:
     #2E37A4  основной (индиго)        -> --primary    #33414E (+ градиент)
     #00D3C7  второй (бирюзовый)       -> --accent     = основной (второго цвета в макете нет)
     #009EFB  синий (hover, info)      -> --info       #3D78B0
     #333448  текст                    -> --ink        #12182A
     rgba(51,52,72,.5) вторичный текст -> --muted      #8593A4
     rgba(46,55,164,.5) текст подменю  -> --text-2     #8593A4
     rgba(46,55,164,.05) подложки      -> --muted-bg   #F0F3F6
     rgba(46,55,164,.1) рамки полей    -> --border     #DAE0E7
     rgba(46,55,164,.3) плейсхолдеры   -> --muted-2    #A4AAB7
     #55CE63 / #00D3C7 успех           -> --success    #3F8F5F
     #F62D51 / #FE0000 / #FF3667 ошибка -> --error     #CC3220
     #FFBC34 / #FF9B01 предупреждение  -> --warning    #C08A34
     фон страницы (серо-голубой)       -> --page-bg    #F1F4F7
     градиент кнопки входа             -> --primary-gradient
   ========================================================= */

:root {
  /* --- Основной цвет (Figma) --- */
  --primary: #33414e;
  --primary-dark: #2c3b49;
  --primary-gradient: linear-gradient(90deg, #33414e 0%, #2c3b49 100%);
  /* Наведения и нажатия в макете нет: чуть светлее и чуть темнее основного */
  --primary-hover: #3d4c5a;
  --primary-hover-gradient: linear-gradient(90deg, #3d4c5a 0%, #34434f 100%);
  --primary-press: #222e3a;
  --primary-soft: rgba(51, 65, 78, 0.1);

  /* --- Neutral / Surface / Border (Figma) --- */
  --page-bg: #f1f4f7;
  --paper: #fefefe;
  --ink: #12182a;
  --muted: #8593a4;
  --muted-2: #a4aab7;
  --border: #dae0e7;
  --muted-bg: #f0f3f6;
  --toggle-off: #a8afb9;

  /* --- Hero: в макете hero-блоки залиты основным градиентом --- */
  --hero-gradient: var(--primary-gradient);

  /* Старые имена из первой версии кита - на основной цвет */
  --dark-1: var(--primary);
  --dark-2: var(--primary-dark);
  --ink-hover: var(--primary-hover);
  --ink-press: var(--primary-press);

  /* --- Дополнительный текст (Figma) --- */
  --ink-2: #12182a;
  --text-2: #8593a4;
  --text-3: #444444;
  --neutral-bg: #ececea; /* фон статуса «Не регулярно» */

  /* --- Статусы (Figma) --- */
  --success: #3f8f5f;
  --success-bg: #e7f2ec;
  --warning: #c08a34;
  --warning-bg: #f7ecd9;
  --error: #cc3220;
  --error-bg: #f8e9e7;
  --info: #3d78b0;
  --info-bg: #e6eef7;

  /* --- Акцент: в новом макете отдельного цвета нет, это основной цвет --- */
  --accent: var(--primary);
  --accent-dark: var(--primary-dark);
  --accent-bg: var(--muted-bg);
  --accent-soft: var(--primary-soft);

  /* --- Тени --- */
  --shadow-soft: 0 0 3px var(--border);
  --shadow-card: 0 15px 16px rgba(130, 126, 126, 0.1);
  --shadow-sidebar: 5px 20px 14px rgba(18, 24, 42, 0.05);
  --shadow-header: 0 0 14px rgba(164, 170, 183, 0.25);

  /* --- Bootstrap 5.3: переменные темы --- */
  /* Шрифт макета - Helvetica Neue, файлы подключены в fonts.css */
  --font-main: "Helvetica Neue", Arial, sans-serif;
  /* Логотип «808 CHECKER» в макете набран Outfit Bold */
  --font-logo: "Outfit", var(--font-main);
  --bs-font-sans-serif: var(--font-main);
  --bs-body-font-family: var(--font-main);
  --bs-body-color: #12182a;
  --bs-body-color-rgb: 18, 24, 42;
  /* Фон body задаётся в style.css; эта переменная - фон полей, списков и модалок */
  --bs-body-bg: #fefefe;
  --bs-body-bg-rgb: 254, 254, 254;
  --bs-emphasis-color: #12182a;
  --bs-secondary-color: #8593a4;
  --bs-tertiary-color: #a4aab7;
  --bs-secondary-bg: #f0f3f6;
  --bs-tertiary-bg: #f0f3f6;
  --bs-heading-color: inherit;
  --bs-border-color: #dae0e7;
  --bs-border-color-translucent: rgba(18, 24, 42, 0.1);

  --bs-link-color: #12182a;
  --bs-link-color-rgb: 18, 24, 42;
  --bs-link-hover-color: #33414e;
  --bs-link-hover-color-rgb: 51, 65, 78;
  --bs-focus-ring-color: rgba(51, 65, 78, 0.25);

  --bs-primary: #33414e;
  --bs-primary-rgb: 51, 65, 78;
  --bs-secondary: #33414e;
  --bs-secondary-rgb: 51, 65, 78;
  --bs-success: #3f8f5f;
  --bs-success-rgb: 63, 143, 95;
  --bs-info: #3d78b0;
  --bs-info-rgb: 61, 120, 176;
  --bs-warning: #c08a34;
  --bs-warning-rgb: 192, 138, 52;
  --bs-danger: #cc3220;
  --bs-danger-rgb: 204, 50, 32;
  --bs-light: #f0f3f6;
  --bs-light-rgb: 240, 243, 246;
  --bs-dark: #12182a;
  --bs-dark-rgb: 18, 24, 42;

  --bs-primary-text-emphasis: #12182a;
  --bs-primary-bg-subtle: #f0f3f6;
  --bs-primary-border-subtle: #dae0e7;
  --bs-secondary-text-emphasis: #33414e;
  --bs-secondary-bg-subtle: #f0f3f6;
  --bs-secondary-border-subtle: #dae0e7;
  --bs-success-text-emphasis: #3f8f5f;
  --bs-success-bg-subtle: #e7f2ec;
  --bs-success-border-subtle: #c5ddcf;
  --bs-info-text-emphasis: #3d78b0;
  --bs-info-bg-subtle: #e6eef7;
  --bs-info-border-subtle: #c5d7ea;
  --bs-warning-text-emphasis: #c08a34;
  --bs-warning-bg-subtle: #f7ecd9;
  --bs-warning-border-subtle: #ecd6b0;
  --bs-danger-text-emphasis: #cc3220;
  --bs-danger-bg-subtle: #f8e9e7;
  --bs-danger-border-subtle: #efc9c3;
  --bs-light-text-emphasis: #444444;
  --bs-light-bg-subtle: #f0f3f6;
  --bs-light-border-subtle: #dae0e7;
  --bs-dark-text-emphasis: #12182a;
  --bs-dark-bg-subtle: #dae0e7;
  --bs-dark-border-subtle: #a4aab7;

  --bs-form-valid-color: #3f8f5f;
  --bs-form-valid-border-color: #3f8f5f;
  --bs-form-invalid-color: #cc3220;
  --bs-form-invalid-border-color: #cc3220;
}