/* Generated by @kit/ui. Tokens and fonts are bundled for MV3 and static sites. */

@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./fonts/geologica-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('./fonts/geologica-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./fonts/geologica-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('./fonts/geologica-latin-700-normal.woff2') format('woff2');
}

/**
 * Hirify UI Kit — dist/tokens.css
 * ============================================================================
 * ПЛОСКИЙ, framework-agnostic слой дизайн-токенов Hirify Design System.
 * Чистый CSS custom properties — БЕЗ Tailwind, БЕЗ сборки у потребителя.
 *
 * Единый источник значений темы на все продукты: подключается напрямую
 * из статик-HTML, Vue, React, Blade — откуда угодно:
 *
 *     <link rel="stylesheet" href=".../@hirify/ui-kit/dist/tokens.css">
 *   или (bundler):
 *     import '@hirify/ui-kit/tokens.css';
 *
 * НЕ КОПИРОВАТЬ значения к себе — ссылаться на этот файл (иначе токены разъедутся).
 *
 * Тёмная тема — двойной селектор: [data-theme='dark'] (канон стека) И .dark
 * (текущая Blade-конвенция кита). Работает при любой из двух конвенций.
 *
 * Эталон визуала — docs/design-reference.md (ADE «Hirify Referral»).
 * Значения зеркалятся из resources/css/theme.css (тот его @import-ит как источник
 * raw-цветов). Радиусы/тени/шрифты продублированы здесь намеренно (для статик-
 * потребителя без Tailwind) — держать в синхроне с @theme в theme.css.
 */

:root {
    /* ---- Шрифты (бренд B2C; файлы грузит потребитель, иначе fallback) ---- */
    --font-sans:
        Geologica, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
        sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ---- Радиусы (эталон Referral: острова 20 · контролы 8 · теги/инпуты 6) ---- */
    --radius-tag: 6px;
    --radius-control: 8px;
    --radius-island: 20px;
    --radius-header: 20px;
    --radius-app: 20px; /* back-compat алиас острова */

    /* ---- Тени: фирменная мягкая слоёная (НЕ тяжёлая) ---- */
    --shadow-island: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
    --shadow-island-lg: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 28px rgba(16, 24, 40, 0.1);
    --shadow-header: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);

    /* ---- Поверхности (light): серая канва под почти-белыми островами ---- */
    --surface-soft: #fafafb;
    --surface-primary: #f6f6f6;
    --surface-secondary: #f2f2f2;
    --surface-tertiary: #e9e9e9;
    --surface-quartery: #d1d1d1;
    --surface-hover: #f1f5f9;
    --surface-muted: var(--surface-secondary);
    --surface-sunken: var(--surface-quartery);
    --surface-active: var(--surface-secondary);
    --bg-color: #ffffff;

    /* ---- Текст (иерархия весом/размером, не цветом) ---- */
    --text: #1f2937;
    --text-soft: #1f2937;
    --text-soft-2: #48566a;
    --text-secondary: #595959;
    --text-light: #78716c;
    --text-quartery: #8f8f8f;

    /* ---- CTA (жёлтый, дефицитный акцент, ≤1/экран в light) ---- */
    --cta: #fde047;
    --cta-hover: #e0b200;
    --cta-text: #1f2937;
    --cta-subtle: #fff8dc;

    /* ---- Interactive (синий: ссылки/навигация/AI, НЕ primary-кнопки) ---- */
    --interactive: #2563eb;
    --interactive-hover: #1d4ed8;
    --interactive-subtle: #ebf0fd;

    /* ---- Чат-баблы (монохром: исходящие графит, входящие светло-серые) ---- */
    --bubble-out: #2d2f33;
    --bubble-out-text: #f4f4f5;
    --bubble-in: #edeff3;
    --bubble-in-text: #303b4b;

    /* ---- Бордеры (≤1px, только когда отступ/фон недостаточны) ---- */
    --border-color: #e8e8e8;
    --border-strong: #d1d1d1;

    /* ---- Инпуты ---- */
    --input-bg: #f9f9fa;
    --input-hover: #f4f4f4;
    --input-disabled: #eeeeee;

    /* ---- Статусы (пилюли/алерты: *-subtle фон + *-text текст) ---- */
    --status-success: #5e9b7e;
    --status-success-light: #d8e8de;
    --status-success-subtle: #f0fdf4;
    --status-success-border: #bbf7d0;
    --status-success-text: #166534;
    --status-warning: #f97316;
    --status-warning-subtle: #fff7ed;
    --status-warning-border: #fed7aa99;
    --status-warning-text: #9a3412;
    --status-danger: #ee5463;
    --status-danger-subtle: #fef2f2;
    --status-danger-border: #fecaca;
    --status-danger-text: #991b1b;
    --status-info: #3b82f6;
    --status-info-subtle: #eff6ff;

    /* ---- Disabled / overlay ---- */
    --disabled: #c5c5c5;
    --disabled-text: #9b9b9b;
    --overlay: rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Тёмная тема — оба селектора. Переопределяет только то, что меняется;
   остальное каскадит из :root.
   ============================================================ */
[data-theme='dark'],
.dark {
    --surface-soft: #232a33;
    --surface-primary: #1c222a;
    --surface-secondary: #272f3a;
    --surface-tertiary: #2d333b;
    --surface-quartery: #3f4753;
    --surface-hover: var(--surface-tertiary);
    --surface-muted: var(--surface-secondary);
    --surface-sunken: var(--surface-quartery);
    --surface-active: var(--surface-quartery);
    --bg-color: #272f3a;

    --text: #e0e0e0;
    --text-soft: #e0e0e0;
    --text-soft-2: #c4ccd6;
    --text-secondary: #a0a8b4;
    --text-light: #6b7280;
    --text-quartery: #6b7280;

    /* В dark primary инвертируется в жёлтый (нейтраль-рабочая-лошадка, не акцент) */
    --cta: #facc15;
    --cta-hover: #eab308;
    --cta-text: #1f2937;
    --cta-subtle: rgba(250, 204, 21, 0.1);

    --interactive: #60a5fa;
    --interactive-hover: #93c5fd;
    --interactive-subtle: rgba(96, 165, 250, 0.1);

    --bubble-out: #3f4651;
    --bubble-out-text: #eef1f4;
    --bubble-in: #2a313b;
    --bubble-in-text: #e0e0e0;

    --border-color: #2d333b;
    --border-strong: #3f4753;

    --input-bg: #2d333b;
    --input-hover: #333d49;
    --input-disabled: #1f242c;

    --status-success: #4ade80;
    --status-success-subtle: rgba(74, 222, 128, 0.08);
    --status-warning: #fb923c;
    --status-warning-subtle: rgba(249, 115, 22, 0.08);
    --status-danger: #f87171;
    --status-danger-subtle: rgba(248, 113, 113, 0.1);
    --status-info: #60a5fa;
    --status-info-subtle: rgba(96, 165, 250, 0.1);

    /* Текст и рамка пилюли в тёмной: без этих шести каскадит светлая тема —
       #991b1b по тёмной подложке и светло-розовая рамка. Текст берёт ту же
       краску, что --status-* выше; рамка — она же на низкой альфе. */
    --status-success-text: #4ade80;
    --status-success-border: rgba(74, 222, 128, 0.25);
    --status-warning-text: #fb923c;
    --status-warning-border: rgba(251, 146, 60, 0.25);
    --status-danger-text: #f87171;
    --status-danger-border: rgba(248, 113, 113, 0.25);

    --disabled: #4b5563;
    --disabled-text: #6b7280;

    --overlay: rgba(0, 0, 0, 0.6);
}


/* Remove this block when @hirify/ui-kit publishes primary-btn-* tokens. */
:root {
  --primary-btn-bg: #1f2937;
  --primary-btn-text: #e8e8e8;
}

[data-theme='dark'],
.dark {
  --primary-btn-bg: #facc15;
  --primary-btn-text: #1f2937;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(html) {
  color-scheme: light;
  background: var(--surface-primary);
  color: var(--text);
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

:where(html[data-theme='dark'], html.dark) {
  color-scheme: dark;
}

:where(body.el-app) {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--surface-primary);
  color: var(--text);
}

/* Chrome sets its own body font on extension pages, so inheritance from html loses there.
   This rule needs real specificity: a :where() rule would lose to that body font too. */
body.el-app {
  font-family: var(--font-sans);
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(a) {
  color: var(--interactive);
}

:where(a:hover) {
  color: var(--interactive-hover);
}

:where(:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--interactive) 40%, transparent);
  outline-offset: 2px;
}

.el-page {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
  padding-block: 32px 64px;
}

.el-popup {
  width: 360px;
  max-width: 100vw;
  padding: 16px;
}

.el-options {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
  padding-block: 32px;
}

.el-stack {
  display: grid;
  gap: 16px;
}

.el-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}

.el-island {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-island);
  background: var(--surface-soft);
  box-shadow: var(--shadow-island);
  padding: 24px;
}

.el-island--raised {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-island-lg);
}

.el-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}

.el-brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--text);
  color: var(--surface-soft);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.el-heading {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.el-heading--compact {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.el-copy {
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.65;
}

.el-copy--small {
  font-size: 14px;
}

.el-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: 10px 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease,
    transform 120ms ease;
}

.el-button:active {
  transform: scale(0.98);
}

.el-button:disabled,
.el-button[aria-disabled='true'] {
  background: var(--disabled);
  color: var(--disabled-text);
  cursor: not-allowed;
  transform: none;
}

.el-button--primary {
  background: var(--primary-btn-bg);
  color: var(--primary-btn-text);
}

.el-button--primary:hover {
  background: color-mix(in srgb, var(--primary-btn-bg) 88%, var(--bg-color));
  color: var(--primary-btn-text);
}

.el-button--secondary {
  border-color: var(--border-color);
  background: var(--surface-secondary);
  color: var(--text);
}

.el-button--secondary:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.el-field {
  display: grid;
  gap: 8px;
}

.el-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.el-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--input-bg);
  color: var(--text);
  padding: 10px 12px;
}

.el-input:hover {
  background: var(--input-hover);
}

.el-input:focus {
  border-color: var(--border-strong);
}

.el-tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-tag);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
}

.el-divider {
  height: 1px;
  border: 0;
  background: var(--border-color);
}

@media (max-width: 640px) {
  .el-page,
  .el-options {
    width: min(100% - 24px, 1120px);
    padding-block: 20px 40px;
  }

  .el-island {
    border-radius: var(--radius-header);
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}