/* ==========================================================================
   Vortex System – Design tokens
   Источник: Figma HR_KIT (Untitled UI), fileKey OgcxkxtVplyWrGypgirXNO
   Значения выгружены напрямую из переменных и стилей Figma (Light mode).
   Правило: в компонентах используются ТОЛЬКО семантические токены
   (--text-*, --bg-*, --border-*, --fg-*, --button-*). Примитивы (--color-*)
   напрямую в компонентах не используются – только внутри этого файла
   и для цветных бейджей.
   ========================================================================== */

:root {
  /* ---------- Primitives: base ---------- */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ---------- Primitives: gray (light mode) ---------- */
  --color-gray-25: #FDFDFD;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E9EAEB;
  --color-gray-300: #D5D7DA;
  --color-gray-400: #A4A7AE;
  --color-gray-500: #717680;
  --color-gray-600: #535862;
  --color-gray-700: #414651;
  --color-gray-800: #252B37;
  --color-gray-900: #181D27;
  --color-gray-950: #0A0D12;

  /* ---------- Primitives: brand ----------
     Чтобы сменить фирменный цвет, достаточно заменить эту шкалу.
     Всё остальное ссылается на неё. */
  --color-brand-25: #FCFAFF;
  --color-brand-50: #F9F5FF;
  --color-brand-100: #F4EBFF;
  --color-brand-200: #E9D7FE;
  --color-brand-300: #D6BBFB;
  --color-brand-400: #B692F6;
  --color-brand-500: #9E77ED;
  --color-brand-600: #7F56D9;
  --color-brand-700: #6941C6;
  --color-brand-800: #53389E;
  --color-brand-900: #42307D;
  --color-brand-950: #2C1C5F;

  /* ---------- Primitives: error ---------- */
  --color-error-25: #FFFBFA;
  --color-error-50: #FEF3F2;
  --color-error-100: #FEE4E2;
  --color-error-200: #FECDCA;
  --color-error-300: #FDA29B;
  --color-error-400: #F97066;
  --color-error-500: #F04438;
  --color-error-600: #D92D20;
  --color-error-700: #B42318;
  --color-error-800: #912018;
  --color-error-900: #7A271A;
  --color-error-950: #55160C;

  /* ---------- Primitives: warning ---------- */
  --color-warning-25: #FFFCF5;
  --color-warning-50: #FFFAEB;
  --color-warning-100: #FEF0C7;
  --color-warning-200: #FEDF89;
  --color-warning-300: #FEC84B;
  --color-warning-400: #FDB022;
  --color-warning-500: #F79009;
  --color-warning-600: #DC6803;
  --color-warning-700: #B54708;
  --color-warning-800: #93370D;
  --color-warning-900: #7A2E0E;
  --color-warning-950: #4E1D09;

  /* ---------- Primitives: success ---------- */
  --color-success-25: #F6FEF9;
  --color-success-50: #ECFDF3;
  --color-success-100: #DCFAE6;
  --color-success-200: #ABEFC6;
  --color-success-300: #75E0A7;
  --color-success-400: #47CD89;
  --color-success-500: #17B26A;
  --color-success-600: #079455;
  --color-success-700: #067647;
  --color-success-800: #085D3A;
  --color-success-900: #074D31;
  --color-success-950: #053321;

  /* ---------- Primitives for colored badges (utility colors) ----------
     В светлой теме utility-{color}-{step} = {color}-{step}.
     Используются только для бейджей: отделы, типы отсутствий, статусы. */
  --color-gray-blue-50: #F8F9FC;
  --color-gray-blue-100: #EAECF5;
  --color-gray-blue-200: #D5D9EB;
  --color-gray-blue-300: #B3B8DB;
  --color-gray-blue-400: #717BBC;
  --color-gray-blue-500: #4E5BA6;
  --color-gray-blue-600: #3E4784;
  --color-gray-blue-700: #363F72;

  --color-blue-light-50: #F0F9FF;
  --color-blue-light-100: #E0F2FE;
  --color-blue-light-200: #B9E6FE;
  --color-blue-light-300: #7CD4FD;
  --color-blue-light-400: #36BFFA;
  --color-blue-light-500: #0BA5EC;
  --color-blue-light-600: #0086C9;
  --color-blue-light-700: #026AA2;

  --color-blue-50: #EFF8FF;
  --color-blue-100: #D1E9FF;
  --color-blue-200: #B2DDFF;
  --color-blue-300: #84CAFF;
  --color-blue-400: #53B1FD;
  --color-blue-500: #2E90FA;
  --color-blue-600: #1570EF;
  --color-blue-700: #175CD3;

  --color-indigo-50: #EEF4FF;
  --color-indigo-100: #E0EAFF;
  --color-indigo-200: #C7D7FE;
  --color-indigo-300: #A4BCFD;
  --color-indigo-400: #8098F9;
  --color-indigo-500: #6172F3;
  --color-indigo-600: #444CE7;
  --color-indigo-700: #3538CD;

  --color-purple-50: #F4F3FF;
  --color-purple-100: #EBE9FE;
  --color-purple-200: #D9D6FE;
  --color-purple-300: #BDB4FE;
  --color-purple-400: #9B8AFB;
  --color-purple-500: #7A5AF8;
  --color-purple-600: #6938EF;
  --color-purple-700: #5925DC;

  --color-pink-50: #FDF2FA;
  --color-pink-100: #FCE7F6;
  --color-pink-200: #FCCEEE;
  --color-pink-300: #FAA7E0;
  --color-pink-400: #F670C7;
  --color-pink-500: #EE46BC;
  --color-pink-600: #DD2590;
  --color-pink-700: #C11574;

  --color-orange-50: #FEF6EE;
  --color-orange-100: #FDEAD7;
  --color-orange-200: #F9DBAF;
  --color-orange-300: #F7B27A;
  --color-orange-400: #F38744;
  --color-orange-500: #EF6820;
  --color-orange-600: #E04F16;
  --color-orange-700: #B93815;

  /* ======================================================================
     SEMANTIC TOKENS (Light mode)
     ====================================================================== */

  /* ---------- Text ---------- */
  --text-primary: var(--color-gray-900);
  --text-primary-on-brand: var(--color-white);
  --text-secondary: var(--color-gray-700);
  --text-secondary-hover: var(--color-gray-800);
  --text-secondary-on-brand: var(--color-brand-200);
  --text-tertiary: var(--color-gray-600);
  --text-tertiary-hover: var(--color-gray-700);
  --text-tertiary-on-brand: var(--color-brand-200);
  --text-quaternary: var(--color-gray-500);
  --text-quaternary-on-brand: var(--color-brand-300);
  --text-white: var(--color-white);
  --text-disabled: var(--color-gray-500);
  --text-placeholder: var(--color-gray-500);
  --text-placeholder-subtle: var(--color-gray-300);
  --text-brand-primary: var(--color-brand-900);
  --text-brand-secondary: var(--color-brand-700);
  --text-brand-tertiary: var(--color-brand-600);
  --text-brand-tertiary-alt: var(--color-brand-600);
  --text-error-primary: var(--color-error-600);
  --text-warning-primary: var(--color-warning-600);
  --text-success-primary: var(--color-success-600);

  /* ---------- Border ---------- */
  --border-primary: var(--color-gray-300);      /* инпуты, чекбоксы, группы кнопок */
  --border-secondary: var(--color-gray-200);    /* карточки, таблицы, разделители – основной */
  --border-tertiary: var(--color-gray-100);     /* очень тонкие разделители */
  --border-disabled: var(--color-gray-300);
  --border-disabled-subtle: var(--color-gray-200);
  --border-brand: var(--color-brand-500);
  --border-brand-alt: var(--color-brand-600);
  --border-error: var(--color-error-500);
  --border-error-subtle: var(--color-error-300);

  /* ---------- Foreground (иконки и не-текстовые элементы) ---------- */
  --fg-primary: var(--color-gray-900);
  --fg-secondary: var(--color-gray-700);
  --fg-secondary-hover: var(--color-gray-800);
  --fg-tertiary: var(--color-gray-600);
  --fg-tertiary-hover: var(--color-gray-700);
  --fg-quaternary: var(--color-gray-500);
  --fg-quaternary-hover: var(--color-gray-600);
  --fg-quinary: var(--color-gray-400);
  --fg-quinary-hover: var(--color-gray-500);
  --fg-senary: var(--color-gray-300);
  --fg-white: var(--color-white);
  --fg-disabled: var(--color-gray-400);
  --fg-disabled-subtle: var(--color-gray-300);
  --fg-brand-primary: var(--color-brand-600);
  --fg-brand-primary-alt: var(--color-brand-600);
  --fg-brand-secondary: var(--color-brand-500);
  --fg-error-primary: var(--color-error-600);
  --fg-error-secondary: var(--color-error-500);
  --fg-warning-primary: var(--color-warning-600);
  --fg-warning-secondary: var(--color-warning-500);
  --fg-success-primary: var(--color-success-600);
  --fg-success-secondary: var(--color-success-500);

  /* ---------- Background ---------- */
  --bg-primary: var(--color-white);
  --bg-primary-alt: var(--color-white);
  --bg-primary-hover: var(--color-gray-50);
  --bg-primary-solid: var(--color-gray-950);    /* тултипы */
  --bg-secondary: var(--color-gray-50);
  --bg-secondary-alt: var(--color-gray-50);
  --bg-secondary-hover: var(--color-gray-100);
  --bg-secondary-subtle: var(--color-gray-25);
  --bg-secondary-solid: var(--color-gray-600);
  --bg-tertiary: var(--color-gray-100);
  --bg-quaternary: var(--color-gray-200);       /* треки прогресс-баров, слайдеров */
  --bg-active: var(--color-gray-50);            /* активный пункт меню/дропдауна */
  --bg-disabled: var(--color-gray-100);
  --bg-disabled-subtle: var(--color-gray-50);
  --bg-overlay: var(--color-gray-950);          /* подложка модалок, применять с opacity */
  --bg-brand-primary: var(--color-brand-50);
  --bg-brand-primary-alt: var(--color-brand-50);
  --bg-brand-secondary: var(--color-brand-100);
  --bg-brand-solid: var(--color-brand-600);
  --bg-brand-solid-hover: var(--color-brand-700);
  --bg-error-primary: var(--color-error-50);
  --bg-error-secondary: var(--color-error-100);
  --bg-error-solid: var(--color-error-600);
  --bg-warning-primary: var(--color-warning-50);
  --bg-warning-secondary: var(--color-warning-100);
  --bg-warning-solid: var(--color-warning-600);
  --bg-success-primary: var(--color-success-50);
  --bg-success-secondary: var(--color-success-100);
  --bg-success-solid: var(--color-success-600);

  /* ---------- Buttons (component colors) ---------- */
  --button-primary-fg: var(--color-white);
  --button-primary-bg: var(--color-brand-600);
  --button-primary-bg-hover: var(--color-brand-700);

  --button-secondary-fg: var(--color-gray-700);
  --button-secondary-fg-hover: var(--color-gray-800);
  --button-secondary-bg: var(--color-white);
  --button-secondary-bg-hover: var(--color-gray-50);
  --button-secondary-border: var(--color-gray-300);

  --button-secondary-color-fg: var(--color-brand-700);
  --button-secondary-color-fg-hover: var(--color-brand-800);
  --button-secondary-color-bg: var(--color-white);
  --button-secondary-color-bg-hover: var(--color-brand-50);
  --button-secondary-color-border: var(--color-brand-300);

  --button-tertiary-fg: var(--color-gray-600);
  --button-tertiary-fg-hover: var(--color-gray-700);
  --button-tertiary-bg-hover: var(--color-gray-50);

  --button-tertiary-color-fg: var(--color-brand-700);
  --button-tertiary-color-fg-hover: var(--color-brand-800);
  --button-tertiary-color-bg-hover: var(--color-brand-50);

  --button-primary-error-fg: var(--color-white);
  --button-primary-error-bg: var(--color-error-600);
  --button-primary-error-bg-hover: var(--color-error-700);

  --button-secondary-error-fg: var(--color-error-700);
  --button-secondary-error-fg-hover: var(--color-error-800);
  --button-secondary-error-bg: var(--color-white);
  --button-secondary-error-bg-hover: var(--color-error-50);
  --button-secondary-error-border: var(--color-error-300);

  --button-tertiary-error-fg: var(--color-error-700);
  --button-tertiary-error-fg-hover: var(--color-error-800);
  --button-tertiary-error-bg-hover: var(--color-error-50);

  /* ---------- Navigation / avatars / tooltips ---------- */
  --nav-item-icon-fg: var(--color-gray-500);
  --nav-item-icon-fg-active: var(--color-gray-500);
  --avatar-bg: var(--color-gray-100);
  --avatar-profile-photo-border: var(--color-white);
  --avatar-contrast-border: rgba(0, 0, 0, 0.08);
  --tooltip-supporting-text: var(--color-gray-300);
  --toggle-border: var(--color-gray-300);

  /* ======================================================================
     EFFECTS
     ====================================================================== */
  --shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(10, 13, 18, 0.10), 0 1px 2px -1px rgba(10, 13, 18, 0.10);
  --shadow-md: 0 4px 6px -1px rgba(10, 13, 18, 0.10), 0 2px 4px -2px rgba(10, 13, 18, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 2px 2px -1px rgba(10, 13, 18, 0.04);
  --shadow-xl: 0 20px 24px -4px rgba(10, 13, 18, 0.08), 0 8px 8px -4px rgba(10, 13, 18, 0.03), 0 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  --shadow-2xl: 0 24px 48px -12px rgba(10, 13, 18, 0.18), 0 4px 4px -2px rgba(10, 13, 18, 0.04);
  --shadow-3xl: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0 5px 5px -2.5px rgba(10, 13, 18, 0.04);

  /* Кнопки в стиле кита (лёгкий объём). Для плоского стиля заменить на --shadow-xs. */
  --shadow-xs-skeuomorphic: 0 1px 2px 0 rgba(10, 13, 18, 0.05), inset 0 -2px 0 0 rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.18);

  /* Focus rings: белый зазор 2px + цветное кольцо 4px */
  --focus-ring: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-brand-500);
  --focus-ring-error: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-error-500);
  --focus-ring-shadow-xs: var(--focus-ring), var(--shadow-xs);
  --focus-ring-shadow-xs-skeuomorphic: var(--focus-ring), var(--shadow-xs-skeuomorphic);
  --focus-ring-error-shadow-xs: var(--focus-ring-error), var(--shadow-xs);

  /* ======================================================================
     TYPOGRAPHY  (Inter, с кириллицей)
     ====================================================================== */
  --font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-display: var(--font-family-body);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-xs-size: 12px;       --text-xs-line: 18px;
  --text-sm-size: 14px;       --text-sm-line: 20px;
  --text-md-size: 16px;       --text-md-line: 24px;   /* базовый размер */
  --text-lg-size: 18px;       --text-lg-line: 28px;
  --text-xl-size: 20px;       --text-xl-line: 30px;
  --display-xs-size: 24px;    --display-xs-line: 32px;
  --display-sm-size: 30px;    --display-sm-line: 38px;  /* максимум для заголовков страниц портала */
  --display-md-size: 36px;    --display-md-line: 44px;
  --display-lg-size: 48px;    --display-lg-line: 60px;
  --display-xl-size: 60px;    --display-xl-line: 72px;
  --display-2xl-size: 72px;   --display-2xl-line: 90px;
  --display-tracking: -0.02em; /* только для display-md и крупнее */

  /* ======================================================================
     RADIUS
     ====================================================================== */
  --radius-none: 0px;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 9999px;

  /* ======================================================================
     SPACING  (шаг 4px, других значений не использовать)
     ====================================================================== */
  --spacing-none: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;
  --spacing-10xl: 128px;
  --spacing-11xl: 160px;

  /* ======================================================================
     WIDTHS / CONTAINERS
     ====================================================================== */
  --width-xxs: 320px;
  --width-xs: 384px;
  --width-sm: 480px;    /* модалки: маленькая */
  --width-md: 560px;    /* модалки: средняя */
  --width-lg: 640px;    /* модалки: большая */
  --width-xl: 768px;
  --width-2xl: 1024px;
  --width-3xl: 1280px;
  --width-4xl: 1440px;
  --width-5xl: 1600px;
  --width-6xl: 1920px;

  --container-padding-mobile: 16px;
  --container-padding-desktop: 32px;
  --container-max-width-desktop: 1280px;
  --paragraph-max-width: 720px;  /* статьи базы знаний */
}