/* ═══════════════════════════════════════════════════════════════════════
   ЛИД-ГЕН · ДИЗАЙН-ТОКЕНЫ
   Все цвета, шрифты, размеры приложения. Меняй здесь — меняется везде.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── ЦВЕТА: ФОНЫ ───────────────────────────────────────────────────── */
  --bg-base:       #0A0A0B;   /* фон страницы, самый тёмный */
  --bg-surface:    #131316;   /* фон карточек, чуть светлее */
  --bg-elevated:   #1B1B1F;   /* фон модалок, выпадашек, ховеров */
  --bg-overlay:    rgba(10, 10, 11, 0.85);  /* затемнение под модалками */

  /* ─── ЦВЕТА: ГРАНИЦЫ ────────────────────────────────────────────────── */
  --border-subtle: #1F1F23;   /* почти невидимая граница */
  --border-soft:   #27272D;   /* стандартная граница карточек */
  --border-strong: #3A3A42;   /* активная граница инпута */

  /* ─── ЦВЕТА: ТЕКСТ ──────────────────────────────────────────────────── */
  --text-primary:    #F4F4F5;   /* главный текст */
  --text-secondary:  #A1A1AA;   /* подписи, метки */
  --text-tertiary:   #71717A;   /* приглушённый текст, плейсхолдеры */
  --text-disabled:   #52525B;   /* выключенные элементы */

  /* ─── ЦВЕТ-АКЦЕНТ (lime, как в референсе 3) ─────────────────────────── */
  --accent:          #B4E50D;   /* главный зелёный, lime */
  --accent-hover:    #C7F11F;   /* при наведении */
  --accent-pressed:  #9DCC0A;   /* при нажатии */
  --accent-soft:     rgba(180, 229, 13, 0.12);  /* фон ховера, активной вкладки */
  --accent-text:     #0A0A0B;   /* текст на акцентном фоне (тёмный) */

  /* ─── СЕМАНТИЧЕСКИЕ ЦВЕТА (статусы, теги) ───────────────────────────── */
  --color-success:   #10B981;   /* зелёный — выиграно, активно */
  --color-warning:   #F59E0B;   /* жёлтый — ожидание, в работе */
  --color-danger:    #EF4444;   /* красный — проиграно, ошибка */
  --color-info:      #3B82F6;   /* синий — информация, новый */

  /* фоны для тегов (чуть прозрачные) */
  --color-success-bg: rgba(16, 185, 129, 0.12);
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-danger-bg:  rgba(239, 68, 68, 0.12);
  --color-info-bg:    rgba(59, 130, 246, 0.12);

  /* ─── KAD-КАТЕГОРИИ (наш отраслевой код) ────────────────────────────── */
  --kad-green:  #10B981;
  --kad-yellow: #F59E0B;
  --kad-blue:   #3B82F6;
  --kad-red:    #EF4444;

  --kad-green-bg:  rgba(16, 185, 129, 0.12);
  --kad-yellow-bg: rgba(245, 158, 11, 0.12);
  --kad-blue-bg:   rgba(59, 130, 246, 0.12);
  --kad-red-bg:    rgba(239, 68, 68, 0.12);

  /* ─── РАЗМЕРЫ ШРИФТА ────────────────────────────────────────────────── */
  --font-xs:   11px;   /* мелкие подписи, теги */
  --font-sm:   13px;   /* подписи, метки */
  --font-md:   14px;   /* основной текст */
  --font-lg:   16px;   /* акценты, имена */
  --font-xl:   20px;   /* заголовки секций */
  --font-2xl:  28px;   /* заголовки страниц */
  --font-3xl:  36px;   /* большие цифры в карточках */
  --font-4xl:  48px;   /* hero-цифры */

  /* ─── ВЕСА ШРИФТА ───────────────────────────────────────────────────── */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ─── РАДИУСЫ СКРУГЛЕНИЙ ────────────────────────────────────────────── */
  --radius-sm:   6px;    /* теги, мелкие чипы */
  --radius-md:   8px;    /* кнопки, инпуты */
  --radius-lg:   12px;   /* карточки */
  --radius-xl:   16px;   /* большие блоки, модалки */
  --radius-full: 9999px; /* полные круги, аватары */

  /* ─── ОТСТУПЫ (кратные 4px) ─────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ─── ТЕНИ ──────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow:  0 0 24px rgba(180, 229, 13, 0.25);  /* зелёное свечение */

  /* ─── АНИМАЦИИ ──────────────────────────────────────────────────────── */
  --transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── РАЗМЕРЫ КОМПОНЕНТОВ ───────────────────────────────────────────── */
  --sidebar-width:     244px;
  --header-height:     64px;
  --content-max:       1440px;

  /* ─── Z-INDEX (порядок наложения) ───────────────────────────────────── */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-overlay:   30;
  --z-modal:     40;
  --z-toast:     50;
}

/* ─── ТИПОГРАФИКА: Inter ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-md);
  font-weight: var(--weight-normal);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* убираем стандартный outline, добавим свой ниже */
*:focus { outline: none; }

/* доступный focus-ring для клавиатурной навигации */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* убираем синюю подсветку при тапе на iOS */
* { -webkit-tap-highlight-color: transparent; }

/* стандартная скругляемость скроллбара (опционально) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

img { max-width: 100%; display: block; }