/* ==========================================================================
   HRScreen — дизайн-токены портала рекрутера. v2, август 2026.
   Основано на бренд-буке HRScreen: #6A4CFF, #A78BFA, #121732, #1E1F2E,
   #F2F4F8, #6B7280, Montserrat.

   Подключать ПЕРЕД app.css:
     <link rel="stylesheet" href="/static/hrscreen-tokens.css">
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* --- Бренд: чернила (хром) + фиолетовый (акцент) ----------------------- */
  --ink-900: #121732;   /* шапка, заголовки, тёмные поверхности */
  --ink-800: #1E1F2E;   /* графит: кнопка создания, вторая тёмная поверхность */
  --on-ink: #F2F4F8;   /* текст на тёмной поверхности: рельс вакансии, шапка. Светлый в обеих темах: поверхность тёмная всегда */
  --ink-700: #2F3550;

  --accent:       #6A4CFF;   /* основное действие, срочное, счётчик */
  --accent-hover: #7C61FF;
  --accent-deep:  #5438D6;   /* нажатие, текст на светлом фоне акцента */
  --accent-soft:  #A78BFA;   /* второй план внутри акцентных состояний, тёмная тема */
  --accent-bg:    #EFEBFF;
  --accent-tint:  #F6F3FF;   /* фон активной строки списка */
  --accent-ring:  rgba(106, 76, 255, .28);

  /* Подпись поверх сплошной заливки: в тёмной теме заливки светлеют, и белая
     надпись на них нечитаема. Канальная запись — для утилит Tailwind. */
  --on-solid: #FFFFFF;
  --on-solid-rgb: 255 255 255;

  /* --- Нейтральные (шкала бренд-бука) ----------------------------------- */
  --n-0:   #FFFFFF;   /* лист, карточка */
  --n-50:  #F7F8FB;   /* рельс, вложенный блок */
  --n-100: #F2F4F8;   /* фон страницы, чип */
  --n-200: #E4E7EE;   /* линия, рамка карточки */
  --n-300: #CBD0DB;   /* рамка поля */
  /* Тускло — но всё-таки читаемо. Прежний #9BA2B0 давал на белом контраст
     2,6:1 при норме 4,5: даты и подписи в лентах приходилось разбирать,
     напрягая зрение, а в тёмной теме тот же токен давно стоял на 4,2:1 —
     то есть светлая тема была единственной, где текст не читался. */
  --n-400: #767E8D;   /* тускло, плейсхолдер — 4,1:1 на белом */
  --n-500: #6B7280;   /* мета */
  --n-600: #4A5060;   /* вторичный текст */
  --n-700: #2A2F3C;   /* основной текст */

  /* --- Семантика (фиолетовый занят действием, поэтому не участвует) ------ */
  --ok:    #047857;  --ok-bg:   #D9F2E7;
  --warn:  #B45309;  --warn-bg: #FEF6E7;
  --err:   #C2362B;  --err-bg:  #FDECEC;
  --info:  #1D4ED8;  --info-bg: #E4EBFC;

  /* --- Стадии воронки (цвет всегда с подписью) -------------------------- */
  --stage-new:       #2F3550;
  --stage-screening: #1D4ED8;
  --stage-phone:     #0E7490;
  --stage-interview: #B45309;
  --stage-offer:     #DB2777;
  --stage-hired:     #047857;
  --stage-rejected:  #9BA2B0;

  /* --- Каналы ----------------------------------------------------------- */
  --ch-hh:  #C2362B;  --ch-hh-bg:  #FDECEC;
  --ch-max: #DB2777;  --ch-max-bg: #FCE7F3;
  --ch-tg:  #0E7490;  --ch-tg-bg:  #E3F3F7;

  /* --- Виды событий календаря ------------------------------------------- */
  --cal-call:      #2F3550;
  --cal-interview: #1D4ED8;
  --cal-task:      #6B7280;
  --cal-busy:      #CBD0DB;

  /* --- Типографика ------------------------------------------------------ */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-micro:   11px;
  --fs-caption: 12px;
  --fs-ui:      13px;   /* рабочий размер плотных списков */
  --fs-body:    14px;
  --fs-h4:      15px;
  --fs-h3:      18px;
  --fs-h2:      22px;
  --fs-h1:      28px;

  --tracking-h: -0.025em;  /* от 22px и выше */

  /* --- Сетка 4px -------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px;

  /* --- Радиусы ---------------------------------------------------------- */
  --r-xs:   4px;    /* метка канала */
  --r-sm:   6px;    /* кнопка, поле, пузырь */
  --r:      8px;    /* карточка, всплывающая панель */
  --r-lg:   12px;   /* панель-колонка, модалка */
  --r-pill: 100px;  /* бейдж стадии, счётчик */

  /* --- Тени и кольцо фокуса -------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(18, 23, 50, .05);
  --sh:    0 2px 8px rgba(18, 23, 50, .08);
  --sh-lg: 0 12px 28px -10px rgba(18, 23, 50, .28);
  --ring:  0 0 0 3px var(--accent-ring);

  /* --- Размеры ---------------------------------------------------------- */
  --h-control:    32px;
  --h-control-sm: 26px;
  --h-row:        52px;   /* строка списка: 52–56 */
  --h-nav:        44px;

  /* --- Движение --------------------------------------------------------- */
  --ease:  cubic-bezier(.4, 0, .2, 1);
  --dur:   120ms;   /* наведение, фокус */
  --dur-2: 180ms;   /* панель, тост */
  --dur-3: 220ms;   /* подмена содержимого htmx */

  /* Канальная запись для утилит Tailwind: конфиг ссылается на неё,
     поэтому переключение темы меняет и утилиты (светлая тема). */
  --ink-900-rgb: 18 23 50;
  --ink-800-rgb: 30 31 46;
  --ink-700-rgb: 47 53 80;
  --accent-rgb: 106 76 255;
  --accent-hover-rgb: 124 97 255;
  --accent-deep-rgb: 84 56 214;
  --accent-soft-rgb: 167 139 250;
  --accent-bg-rgb: 239 235 255;
  --accent-tint-rgb: 246 243 255;
  --n-0-rgb: 255 255 255;
  --n-50-rgb: 247 248 251;
  --n-100-rgb: 242 244 248;
  --n-200-rgb: 228 231 238;
  --n-300-rgb: 203 208 219;
  --n-400-rgb: 118 126 141;
  --n-500-rgb: 107 114 128;
  --n-600-rgb: 74 80 96;
  --n-700-rgb: 42 47 60;
  --ok-rgb: 4 120 87;
  --ok-bg-rgb: 217 242 231;
  --warn-rgb: 180 83 9;
  --warn-bg-rgb: 254 246 231;
  --err-rgb: 194 54 43;
  --err-bg-rgb: 253 236 236;
  --info-rgb: 29 78 216;
  --info-bg-rgb: 228 235 252;
  --stage-new-rgb: 47 53 80;
  --stage-screening-rgb: 29 78 216;
  --stage-phone-rgb: 14 116 144;
  --stage-interview-rgb: 180 83 9;
  --stage-offer-rgb: 219 39 119;
  --stage-hired-rgb: 4 120 87;
  --stage-rejected-rgb: 155 162 176;
  --ch-hh-rgb: 194 54 43;
  --ch-max-rgb: 219 39 119;
  --ch-tg-rgb: 14 116 144;
}

/* ==========================================================================
   Тёмная тема. Не инверсия: чернила становятся фоном, акцент светлеет до
   #A78BFA, глубину задаёт светлая рамка, а не тень.
   Включение: <html data-theme="dark">.
   ========================================================================== */
[data-theme="dark"] {
  --n-0:   #191D33;
  --n-50:  #0D1226;
  --n-100: #252A45;
  --n-200: rgba(255, 255, 255, .12);
  --n-300: rgba(255, 255, 255, .20);
  --n-400: #7A7F94;
  --n-500: #8B90A8;
  --n-600: #B9BDCF;
  --n-700: #F2F4F8;

  --ink-900: #0D1226;
  --ink-800: #191D33;
  --on-ink: #F2F4F8;   /* текст на тёмной поверхности: рельс вакансии, шапка. Светлый в обеих темах: поверхность тёмная всегда */

  --accent:       #A78BFA;
  --accent-hover: #BBA5FF;
  --accent-deep:  #6A4CFF;
  --accent-bg:    rgba(167, 139, 250, .16);
  --accent-tint:  rgba(167, 139, 250, .10);

  --ok:   #6EE7B7;  --ok-bg:   rgba(52, 211, 153, .16);
  --warn: #FCD34D;  --warn-bg: rgba(251, 191, 36, .16);
  --err:  #FCA5A5;  --err-bg:  rgba(248, 113, 113, .16);
  --info: #93C5FD;  --info-bg: rgba(96, 165, 250, .16);

  --sh-sm: none;
  --sh:    none;
  --sh-lg: 0 12px 28px -10px rgba(0, 0, 0, .6);

  /* Канальная запись для утилит Tailwind: конфиг ссылается на неё,
     поэтому переключение темы меняет и утилиты (тёмная тема). */
  --ink-900-rgb: 13 18 38;
  --ink-800-rgb: 25 29 51;
  --accent-rgb: 167 139 250;
  --accent-hover-rgb: 187 165 255;
  --accent-deep-rgb: 106 76 255;
  --accent-bg-rgb: 48 47 83;
  --accent-tint-rgb: 39 40 71;
  --n-0-rgb: 25 29 51;
  --n-50-rgb: 13 18 38;
  --n-100-rgb: 37 42 69;
  --n-200-rgb: 53 56 75;
  --n-300-rgb: 71 74 92;
  --n-400-rgb: 122 127 148;
  --n-500-rgb: 139 144 168;
  --n-600-rgb: 185 189 207;
  --n-700-rgb: 242 244 248;
  --ok-rgb: 110 231 183;
  --ok-bg-rgb: 29 58 67;
  --warn-rgb: 252 211 77;
  --warn-bg-rgb: 61 55 49;
  --err-rgb: 252 165 165;
  --err-bg-rgb: 61 42 61;
  --info-rgb: 147 197 253;
  --info-bg-rgb: 36 51 83;
  /* Текст на сплошной заливке: в тёмной теме заливки светлые */
  --on-solid: #121732;
  --on-solid-rgb: 18 23 50;

  /* Кольцо фокуса тоже светлеет, иначе клавиатурная навигация не видна */
  --accent-ring: rgba(167, 139, 250, .45);

  /* accent-deep служит цветом текста на подложке accent-bg/tint —
     в тёмной теме «сильнее» значит светлее, а не темнее */
  --accent-deep: #C4B5FD;
  --accent-deep-rgb: 196 181 253;

  /* Графит кнопки создания должен отличаться от листа карточки */
  --ink-800-rgb: 42 48 80;

  /* Стадии и каналы сохраняют оттенок, но светлеют: тёмная точка стадии
     на тёмном чипе не читается */
  --stage-new-rgb:       107 118 168;
  --stage-screening-rgb:  96 165 250;
  --stage-phone-rgb:      34 211 238;
  --stage-interview-rgb: 251 191  36;
  --stage-offer-rgb:     244 114 182;
  --stage-hired-rgb:      52 211 153;
  --ch-hh-rgb:  248 113 113;
  --ch-max-rgb: 244 114 182;
  --ch-tg-rgb:   34 211 238;

}

/* Нативные контролы (списки, поля, полосы прокрутки) красит браузер, а не мы:
   без color-scheme они остаются светлыми на тёмной странице. */
[data-theme="dark"]  { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* ==========================================================================
   База
   ========================================================================== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  background: var(--n-100);
  color: var(--n-700);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  line-height: 1.5;
}

a { color: var(--accent-deep); text-decoration: none; }

/* Ссылка с заливкой — это кнопка, и вести себя как ссылка она не должна.
   `a:hover` специфичнее одиночного класса (0,1,1 против 0,1,0), поэтому при
   наведении он перекрашивал надпись в цвет ссылки. На сплошной кнопке цвет
   ссылки и есть цвет её фона: надпись пропадала целиком — одинаково в
   светлой теме и в тёмной. Подчёркивание у кнопки лишнее по той же причине.

   Признак кнопки — заданный фон. Обычные текстовые ссылки его не задают и
   ведут себя как раньше. */
a:hover:not([class*="bg-"]) {
    color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
a[class*="bg-"]:hover { text-decoration: none; }

/* Числа, которые сравнивают глазами — всегда табличные */
.num, .cal-time, .chip-num, .unread-dot { font-variant-numeric: tabular-nums; }

:focus-visible { outline: none; box-shadow: var(--ring); }

/* ==========================================================================
   Компоненты — минимальный набор, остальное живёт классами Tailwind
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: var(--h-control); padding: 0 14px;
  border: 0; border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-ui); font-weight: 500;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary       { background: var(--accent); color: var(--on-solid); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active{ background: var(--accent-deep); }
.btn--create        { background: var(--ink-800); color: #fff; }
.btn--create:hover  { background: var(--ink-900); }
.btn--secondary     { background: var(--n-0); color: var(--n-700); border: 1px solid var(--n-300); }
.btn--secondary:hover { background: var(--n-50); border-color: var(--n-400); }
.btn--quiet         { background: transparent; color: var(--n-600); padding: 0 10px; }
.btn--quiet:hover   { background: var(--n-100); color: var(--n-700); }
.btn--danger        { background: transparent; color: var(--err); padding: 0 10px; }
.btn--danger:hover  { background: var(--err-bg); }
.btn--sm            { height: var(--h-control-sm); font-size: var(--fs-caption); padding: 0 10px; }
.btn:disabled       { opacity: .4; cursor: not-allowed; }

.input {
  height: var(--h-control); padding: 0 10px;
  border: 1px solid var(--n-300); border-radius: var(--r-sm);
  background: var(--n-0); color: var(--n-700);
  font-family: inherit; font-size: var(--fs-ui);
}
.input::placeholder { color: var(--n-400); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.input[aria-invalid="true"] { border-color: var(--err); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: 600;
  background: var(--n-100); color: var(--n-500);
}
.badge--ok   { background: var(--ok-bg);   color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--err  { background: var(--err-bg);  color: var(--err); }
.badge__dot  { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.card {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r);
  padding: var(--s-3);
  box-shadow: var(--sh-sm);
}
.card--clickable { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card--clickable:hover { border-color: var(--n-300); box-shadow: var(--sh); }
.card--panel { border-radius: var(--r-lg); padding: 0; }