/* ════════════════════════════════════════════════════════════════
   FINESEP UI KIT · kit.css
   Библиотека компонентов дизайн-системы. Единственный источник
   стилей для веб-версии; параметры зеркалят мобильное приложение
   (reference/app — источник правды).

   Использование:
     <div class="fs-scope" data-theme="light|dark"> …компоненты… </div>
   Все классы с префиксом .fs-. Никаких сырых hex в продуктовом коде —
   только переменные этого файла.
   ════════════════════════════════════════════════════════════════ */

.fs-scope{
  /* ── Палитра: нейтральные ── */
  --fs-white:#FFFFFF;
  --fs-black:#0E0E10;          /* фирменный «чёрный» поверхностей */
  --fs-ink:#111113;            /* основной текст */

  /* ── Семантика поверхностей ── */
  --fs-bg:#FFFFFF;             /* фон экрана */
  --fs-bg-soft:#F4F4F6;        /* filled-поля, soft-кнопки, подложки иконок */
  --fs-bg-card:#F4F4F6;        /* карточки (проект, чип счёта) */
  --fs-bg-sheet:#FFFFFF;       /* шторки, диалоги */
  --fs-fg:#111113;             /* текст основной */
  --fs-fg-2:#7A7A81;           /* текст вторичный */
  --fs-fg-3:#9A9AA0;           /* подписи, плейсхолдеры */
  --fs-line:#ECECEF;           /* разделители */
  --fs-line-2:#E2E2E6;         /* рамки контролов */
  --fs-line-3:#D6D6DB;         /* рамки outline-чипов */
  --fs-inverse:#0E0E10;        /* инверсная поверхность (CTA, актив) */
  --fs-on-inverse:#FFFFFF;
  --fs-scrim:rgba(8,8,10,.45);

  /* ── Деньги и статусы ── */
  --fs-income:#1EA446;         /* доход: крупные суммы, стрелки, эндпоинт */
  --fs-income-soft:#E3F5E8;
  --fs-expense:#E5484D;        /* расход: стрелки, маски, эндпоинт */
  --fs-expense-soft:#FFEAEC;
  --fs-debt:#7C5CFC;           /* долг + активные иконки сегментов */
  --fs-debt-soft:#ECE8FE;
  --fs-transfer:#7A7A81;       /* перевод — нейтрален */
  --fs-notify:#2797FF;         /* точка уведомлений (бренд-синий) */
  --fs-risk:#D4374D;           /* «Риск кассового разрыва» */
  --fs-pend:#B26B00;           /* статус «ожидает оплаты» (счёт/план) */
  --fs-pend-soft:#FDEACB;
  --fs-new-bg:#F7AFEC;         /* бейдж new / В разработке */
  --fs-new-fg:#3D0F38;
  --fs-pro-grad:linear-gradient(90deg,#FFD9C8 0%,#FFC2B4 55%,#FFB1A8 100%);
  --fs-personal-grad:linear-gradient(45deg,#FDFBFB 0%,#EBEDEE 100%);

  /* ── Навигация (чёрная в обеих темах) ── */
  --fs-nav-bg:#070708;
  --fs-nav-fg:#FFFFFF;
  --fs-nav-muted:#8A8A8E;

  /* ── Desktop-сайдбар (Attio-стиль: серая колонка, активный — белая пилюля) ── */
  --fs-bg-side:#F7F7F9;
  --fs-side-hover:#EEEEF1;
  --fs-side-active:#FFFFFF;
  --fs-side-shadow:0 1px 2px rgba(16,16,22,.07),0 0 0 1px rgba(16,16,22,.04);

  /* ── Типографика ── */
  --fs-font-display:"Inter Tight","Inter",system-ui,sans-serif; /* заголовки, деньги */
  --fs-font-text:"Inter","Inter Tight",system-ui,sans-serif;    /* текст, UI */

  /* ── Геометрия ── */
  --fs-r-10:10px;  /* саб-тогглы */
  --fs-r-12:12px;  /* чипы категории-теги, мелкие карточки */
  --fs-r-14:14px;  /* soft-кнопки, бордер-селекты */
  --fs-r-16:16px;  /* CTA, поля, ячейки дат, иконки операций */
  --fs-r-20:20px;  /* сегмент-контейнер, сторис, диалоги */
  --fs-r-24:24px;  /* плитки сервисов, numpad */
  --fs-r-28:28px;  /* шторки (верх) */
  --fs-r-32:32px;  /* карточки проектов, лист контента */
  --fs-r-full:999px;

  /* ── Резиновые размеры (мобайл→планшет): меньше на узком, кап на крупном ── */
  --fs-tap:clamp(48px,40px + 2.1vw,56px);      /* высота CTA/полей: 48 на 320px → 56 на 768+ */
  --fs-screen-pad:clamp(16px,8px + 2.5vw,28px); /* боковой отступ контента (.screen) */

  --fs-dur:180ms;
  --fs-ease:cubic-bezier(.2,0,0,1);

  font-family:var(--fs-font-text);
  color:var(--fs-fg);
  -webkit-font-smoothing:antialiased;
}

/* Shared dark palette for app and public authentication. */
.fs-scope[data-theme=dark] {
  --fs-bg:#000;
  --fs-bg-soft:#1A1A1A;
  --fs-bg-card:#141414;
  --fs-bg-sheet:#141414;
  --fs-bg-side:#141414;
  --fs-fg:#F4F4F6;
  --fs-fg-2:#A0A0A8;
  --fs-fg-3:#777780;
  --fs-line:#242428;
  --fs-line-2:#333338;
  --fs-line-3:#44444C;
  --fs-inverse:#F4F4F6;
  --fs-on-inverse:#111113;
  --fs-side-active:#242428;
  --fs-side-hover:#242428;
}