/* ============================================================
   TalentToday — словарь токенов
   Итерация-2 «Бусины» (сентябрь 2026). Имена итерации-1 сохранены —
   порт кодмодом по именам; меняются значения. Новые имена — явным списком
   в разделе «НОВЫЕ ТОКЕНЫ». Тёмная тема — атрибутом [data-theme="dark"].
   Референс: design_handoff_language/ (README, канвасы «Направление B»).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Поверхности — тёплые чернила вместо zinc (оттенок ~75°, хрома 0,01–0,02) */
  --background:      #f4f1eb;  /* полотно */
  --surface:         #fcfbf9;  /* карточка, поле ввода */
  --surface-raised:  #efebe4;  /* вложенная поверхность: врезка, hover строки, тег */
  --surface-overlay: #ffffff;  /* поповер, меню, диалог — единственная поверхность с тенью */

  --border:          #cfc8bc;  /* сильная линейка, рамка контрола */
  --border-subtle:   #e6e1d8;  /* карточка, строки таблицы */

  --foreground:      #1c1915;  /* чернила · 16:1 */
  --text-secondary:  #5b5449;  /* подписи, мета · 7,3:1 */
  --muted:           #7a7265;  /* плейсхолдер, выключенное · 4,75:1 */

  /* Бренд. #F36D00 фиксирован (правка дизайнера, июль 2026), одинаков в темах.
     Оранжевый значит «движение вперёд»: волна, бусина «ты здесь», главная кнопка,
     теги, подчёркивание ссылок. Текст на кнопке — чернила (5,8:1), как чёрное
     и оранжевое в логотипе; белый 3:1 остаётся допустимым по решению дизайнера. */
  --brand:            #f36d00;
  --brand-hover:      #dd6300;
  --brand-emphasis:       #f36d00;  /* заливка главной кнопки = бренд */
  --brand-emphasis-hover: #dd6300;
  --brand-text:       #c85400;  /* оранжевый текст ≥ 4,5:1 на белом: только счётчики и акценты 600 */
  --brand-soft:       #fbe6d6;  /* «апельсиновая» карточка следующего шага, аватар, ореол бусины */
  --brand-foreground: #1c1915;  /* текст на бренде — чернила */

  /* Статусы: bg / fg / border. Приглушены под тёплые нейтрали; платформенные,
     не меняются на клиентских отборах. */
  --success:        #2f7d4f;
  --success-bg:     #e8f3ea;
  --success-fg:     #236a40;
  --success-border: #b7d9c0;
  --success-solid:  #2f7d4f;
  --success-solid-fg: #ffffff;

  --warning:        #b8710a;
  --warning-bg:     #fbf1dc;
  --warning-fg:     #8a5507;
  --warning-border: #e8cf95;

  --danger:         #c3392b;
  --danger-foreground: #ffffff;
  --danger-bg:      #fbe9e6;
  --danger-fg:      #a32f22;
  --danger-border:  #ebb9b2;

  --info:           #2e6fa3;
  --info-bg:        #e6eff7;
  --info-fg:        #275e8a;
  --info-border:    #b2cce3;

  /* Типографика: Onest — интерфейс (родная кириллица), JetBrains Mono — все числа,
     даты, коды, ключи. Фолбэк — системный стек через next/font. */
  --font-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Радиусы. Карточка 12, контрол 10 (кнопка-пилюля — --radius-pill), знак 999. */
  --radius-card:    12px;
  --radius-control: 10px;
  --radius-pill:    999px;

  /* Тени: у карточек — рамка border-subtle, тени нет. Тень только у оверлея. */
  --shadow-card:    none;
  --shadow-overlay: 0 8px 24px -8px rgb(28 25 21 / 0.28), 0 0 0 1px var(--border);

  /* Сайдбар «Графит» — принят в итерации-1, не зависит от темы.
     Плашка «tt» и активный пункт — единственный оранжевый в сайдбаре. */
  --side-bg:            #191613;
  --side-border:        #2c2823;
  --side-fg:            #c9c1b5;
  --side-fg-strong:     #f2ede5;
  --side-muted:         #7f776b;
  --side-hover:         #221f1b;
  --side-active-bg:     #2a2622;
  --side-active-fg:     #f2ede5;
  --side-raised:        #201d19;
  --side-raised-border: #302b26;
  --side-badge-bg:      #2a2622;
  --side-badge-fg:      #c9c1b5;
  --side-brand:         #f36d00;

  /* ---------- НОВЫЕ ТОКЕНЫ (итерация-2, явный список) ---------- */
  /* Шкала кеглей одним набором; 10 и 11 px (--text-3xs / --text-2xs) удалены. */
  --text-xs:   12px; --leading-xs:   16px;  /* мета, шапка таблицы, чип */
  --text-sm:   13px; --leading-sm:   18px;  /* базовый кегль админки */
  --text-base: 14px; --leading-base: 20px;  /* формы, абзацы */
  --text-md:   16px; --leading-md:   24px;  /* кандидат: текст и поля */
  --text-lg:   20px; --leading-lg:   28px;  /* заголовок раздела */
  --text-xl:   28px; --leading-xl:   34px;  /* H1 кандидата */

  /* Бусина — знак системы, вырос из волны точек логотипа FutureToday. */
  --bead:       8px;   /* базовая бусина: волна, точка в чипе */
  --bead-cur:   14px;  /* «ты здесь»: текущий этап */
  --bead-halo:  4px;   /* ореол текущей бусины (brand-soft) */
  --bead-gap:   6px;   /* шаг волны между бусинами */

  /* Тинты для клиентских отборов и ореолов вычисляются из --brand */
  --brand-tint:  color-mix(in oklab, var(--brand) 12%, var(--surface));
  --brand-ring:  color-mix(in oklab, var(--brand) 35%, transparent);

  --measure: 64ch;
  --motion-fast: 120ms; /* @kind other */
  --motion-surface: 200ms; /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);       /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);  /* @kind other */
}

[data-theme="dark"] {
  --background:      #141210;
  --surface:         #1b1916;
  --surface-raised:  #24211d;
  --surface-overlay: #2b2823;

  --border:          #3a3530;
  --border-subtle:   #2a2622;

  --foreground:      #ece7df;
  --text-secondary:  #a9a094;
  --muted:           #8a8174;

  --brand:            #f36d00;
  --brand-hover:      #ff7d14;
  --brand-emphasis:       #f36d00;
  --brand-emphasis-hover: #ff7d14;
  --brand-text:       #ff8a2e;
  --brand-soft:       #3a2210;
  --brand-foreground: #1c1915;

  --success:        #5fb87f;
  --success-bg:     #16301f;
  --success-fg:     #8fd5a6;
  --success-border: #2b6b45;
  --success-solid:  #3e9a63;
  --success-solid-fg: #0b1a10;

  --warning:        #e0a23a;
  --warning-bg:     #33240a;
  --warning-fg:     #f0c060;
  --warning-border: #7a5613;

  --danger:         #e06a5c;
  --danger-foreground: #1c0a08;
  --danger-bg:      #3a1714;
  --danger-fg:      #f0a199;
  --danger-border:  #8a3a31;

  --info:           #6aa6db;
  --info-bg:        #10263a;
  --info-fg:        #9cc5ea;
  --info-border:    #2a5a85;

  --shadow-card:    none;
  --shadow-overlay: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 0 0 1px var(--border);
  --brand-tint:  color-mix(in oklab, var(--brand) 20%, var(--surface));
  color-scheme: dark;
}

/* Клиентский отбор: проект задаёт --brand, остальное выводится.
   --brand-foreground считается по контрасту (белый или чернила ≥ 4,5:1) и пишется в атрибут. */
[data-client-brand] {
  --brand-soft: var(--brand-tint);
  --brand-emphasis: var(--brand);
  --brand-emphasis-hover: color-mix(in oklab, var(--brand) 90%, #000);
  --brand-hover: var(--brand-emphasis-hover);
  --brand-text: color-mix(in oklab, var(--brand) 80%, #000);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; /* @kind other */ --motion-surface: 0ms; /* @kind other */ }
}

/* ============================================================
   Примитивы — референс для Tailwind-классов (имена классов = имена в макетах)
   ============================================================ */
.tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; font: 500 var(--text-sm)/var(--leading-sm) var(--font-sans); border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; color: var(--foreground); background: transparent; transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
.tt-btn--primary { background: var(--brand-emphasis); color: var(--brand-foreground); }
.tt-btn--primary:hover { background: var(--brand-emphasis-hover); }
.tt-btn--secondary { border-color: var(--border); }
.tt-btn--secondary:hover { background: var(--surface-raised); }
.tt-btn--ghost { color: var(--text-secondary); }
.tt-btn--ghost:hover { background: var(--surface-raised); color: var(--foreground); }
.tt-btn--ink { background: var(--foreground); color: var(--surface); }
.tt-btn--danger { color: var(--danger-fg); border-color: var(--danger-border); }
.tt-btn--danger:hover { background: var(--danger-bg); }
.tt-btn--lg { height: 44px; padding: 0 20px; font-size: var(--text-md); line-height: var(--leading-md); }
.tt-btn--sm { height: 26px; padding: 0 10px; font-size: var(--text-xs); }
.tt-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.tt-input { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; font: 400 var(--text-sm)/var(--leading-sm) var(--font-sans); border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--surface); color: var(--foreground); }
.tt-input::placeholder, .tt-input .ph { color: var(--muted); }
.tt-input--lg { height: 44px; font-size: var(--text-md); line-height: var(--leading-md); }
.tt-input:focus-within, .tt-input.is-focus { border-color: var(--foreground); box-shadow: 0 0 0 3px var(--brand-ring); }
.tt-input.is-error { border-color: var(--danger); }

.tt-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.tt-card--tint { background: var(--brand-soft); border-color: transparent; }
.tt-card__t { display: flex; align-items: center; gap: 8px; font: 600 var(--text-sm)/var(--leading-sm) var(--font-sans); }
.tt-card__t::before { content: ''; width: var(--bead); height: var(--bead); border-radius: 50%; background: var(--brand); flex: none; }

/* Бусина-чип: круглый левый конец (бусина), правый — 6px. tone задаёт цвет бусины. */
.tt-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 7px; border-radius: var(--radius-pill) 6px 6px var(--radius-pill); font: 500 var(--text-xs)/var(--leading-xs) var(--font-sans); background: var(--surface-raised); color: var(--text-secondary); white-space: nowrap; }
.tt-chip::before { content: ''; width: var(--bead); height: var(--bead); border-radius: 50%; background: var(--muted); flex: none; }
.tt-chip--sm { height: 20px; font-size: 11px; padding: 0 8px 0 6px; }
.tt-chip--brand { background: var(--brand-soft); color: var(--foreground); } .tt-chip--brand::before { background: var(--brand); }
.tt-chip--ink { background: var(--foreground); color: var(--surface); } .tt-chip--ink::before { background: var(--brand); }
.tt-chip--success { background: var(--success-bg); color: var(--success-fg); } .tt-chip--success::before { background: var(--success); }
.tt-chip--warning { background: var(--warning-bg); color: var(--warning-fg); } .tt-chip--warning::before { background: var(--warning); }
.tt-chip--danger { background: var(--danger-bg); color: var(--danger-fg); } .tt-chip--danger::before { background: var(--danger); }
.tt-chip--info { background: var(--info-bg); color: var(--info-fg); } .tt-chip--info::before { background: var(--info); }
.tt-chip--outline { background: transparent; border: 1px solid var(--border); } .tt-chip--outline::before { background: transparent; border: 1.5px solid var(--muted); box-sizing: border-box; }
.tt-chip--hollow::before { background: transparent; border: 1.5px solid currentColor; box-sizing: border-box; }

/* Тег — апельсиновая бусина без точки */
.tt-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--foreground); font: 500 var(--text-xs)/var(--leading-xs) var(--font-sans); white-space: nowrap; }
.tt-tag--add { background: transparent; border: 1px dashed var(--border); color: var(--text-secondary); }

/* Вердикт ЦО: чернильная пилюля с бусиной. П1 — бренд, П2 — контур, Отказ — danger */
.tt-verdict { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 8px; border-radius: var(--radius-pill); background: var(--foreground); color: var(--surface); font: 600 var(--text-sm)/var(--leading-sm) var(--font-sans); white-space: nowrap; }
.tt-verdict::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; box-sizing: border-box; }
.tt-verdict--p2::before { background: transparent; border: 2px solid var(--brand); }
.tt-verdict--no { background: var(--danger); color: #fff; } .tt-verdict--no::before { background: #fff; }
.tt-verdict--none { background: transparent; color: var(--muted); border: 1px dashed var(--border); } .tt-verdict--none::before { background: transparent; border: 1.5px solid var(--muted); }

/* Волна: бусины на нити. Пройденные растут к текущей, текущая — --bead-cur с ореолом, будущие — контур */
.tt-wave { display: inline-flex; align-items: center; gap: var(--bead-gap); height: var(--bead-cur); position: relative; }
.tt-wave::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.tt-wave i { position: relative; display: block; width: var(--bead); height: var(--bead); border-radius: 50%; background: var(--brand); box-sizing: border-box; }
.tt-wave i.next { background: var(--surface); border: 1.5px solid var(--border); }
.tt-wave i.cur { width: var(--bead-cur); height: var(--bead-cur); box-shadow: 0 0 0 var(--bead-halo) var(--brand-soft); }
.tt-wave.is-closed i { background: var(--muted); } .tt-wave.is-closed i.cur { background: var(--danger); box-shadow: 0 0 0 var(--bead-halo) var(--danger-bg); }

/* Балл 1–3: три бусины + число моно */
.tt-score { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--text-sm)/1 var(--font-mono); }
.tt-score i { display: inline-block; width: var(--bead); height: var(--bead); border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--border); box-sizing: border-box; margin-right: 3px; }
.tt-score i.on { background: var(--brand); border-color: var(--brand); }

/* Лента показателей: чернильная полоса, моно-числа, бусины-разделители */
.tt-strip { display: flex; align-items: center; gap: 20px; padding: 0 18px; height: 40px; border-radius: var(--radius-card); background: var(--foreground); color: var(--surface); font: 400 var(--text-sm)/1 var(--font-sans); }
.tt-strip b { font: 600 var(--text-md)/1 var(--font-mono); }
.tt-strip i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; }

/* Аватар с инициалами на brand-soft */
.tt-av { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--foreground); font: 600 var(--text-xs)/1 var(--font-sans); flex: none; }

/* Числа: моно, табличные */
.tt-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.tt-kbd { font: 500 var(--text-xs)/var(--leading-xs) var(--font-mono); padding: 0 5px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text-secondary); }

/* Ссылки — чернила с оранжевым подчёркиванием */
.tt-link, .tt-prose a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.tt-link:hover, .tt-prose a:hover { text-decoration-thickness: 2px; }

:where(button, a, input, select, textarea, [role="button"]):focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }