/* =============================================================
   KapitalOS · Design Tokens
   Единый источник правды для лендинга и будущих экранов системы
   (Обзор / Поставки / Продажи / Остатки / Транзакции / Отчёты / Настройки)
   Стиль: светлый минимализм · trustworthy fintech
   ============================================================= */

:root {
  /* ---------- Цвет: нейтральная шкала ---------- */
  --slate-50:  #F7F9FC;
  --slate-100: #EEF2F8;
  --slate-150: #E5EAF1;
  --slate-200: #D8E0EA;
  --slate-300: #C2CCDA;
  --slate-400: #8A93A3;
  --slate-500: #5B6678;
  --slate-600: #414B5C;
  --slate-700: #2B3340;
  --slate-800: #1A202B;
  --slate-900: #0B1220;
  --white:     #FFFFFF;

  /* ---------- Цвет: бренд ---------- */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-400: #4F6BF0;
  --brand-500: #2563EB;   /* интерактив / ссылки */
  --brand-600: #1E40AF;   /* основной бренд / CTA */
  --brand-700: #1B3A9E;
  --brand-800: #16307F;

  /* ---------- Цвет: семантика прибыли/убытка ---------- */
  --profit-600: #059669;  /* прибыль / рост */
  --profit-soft: #ECFDF5;
  --loss-600:   #DC2626;  /* убыток / падение */
  --loss-soft:  #FEF2F2;
  --warn-600:   #D97706;  /* предупреждение / валютный риск */
  --warn-soft:  #FFFBEB;
  --info-600:   #0EA5E9;
  --info-soft:  #F0F9FF;

  /* ---------- Семантические роли (используем ИХ, не сырые hex) ---------- */
  --bg:           var(--slate-50);   /* фон приложения */
  --bg-elevated:  var(--white);      /* карточки / поверхности */
  --bg-muted:     var(--slate-100);  /* приглушённый блок */
  --bg-inset:     #F2F5FA;           /* поля ввода / вложенные блоки */

  --text:         var(--slate-900);
  --text-muted:   var(--slate-500);
  --text-subtle:  var(--slate-400);
  --text-on-brand:var(--white);

  --border:        var(--slate-150);
  --border-strong: var(--slate-200);

  --primary:        var(--brand-600);
  --primary-hover:  var(--brand-700);
  --primary-soft:   var(--brand-50);
  --link:           var(--brand-500);

  --ring: rgba(37, 99, 235, 0.45);

  --positive: var(--profit-600);
  --positive-soft: var(--profit-soft);
  --negative: var(--loss-600);
  --negative-soft: var(--loss-soft);
  --warning: var(--warn-600);
  --warning-soft: var(--warn-soft);

  /* Бренд-градиенты (точечно: hero, акценты) */
  --grad-brand: linear-gradient(135deg, #2563EB 0%, #1E40AF 60%, #16307F 100%);
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 70%);

  /* ---------- Типографика ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code",
               "Roboto Mono", Menlo, monospace;

  /* Шкала размеров (rem от 16px) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  3.75rem;   /* 60 */

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-base:  1.6;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ---------- Отступы (шкала 4/8) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Вертикальный ритм секций */
  --section-y: clamp(3rem, 6vw, 5.5rem);

  /* ---------- Радиусы ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-full: 999px;

  /* ---------- Тени (мягкие, для светлой темы) ---------- */
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.05);
  --shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.06), 0 1px 2px rgba(11, 18, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 18, 32, 0.07), 0 2px 4px rgba(11, 18, 32, 0.04);
  --shadow-lg: 0 12px 32px rgba(11, 18, 32, 0.10), 0 4px 8px rgba(11, 18, 32, 0.05);
  --shadow-xl: 0 28px 60px rgba(11, 18, 32, 0.16), 0 8px 16px rgba(11, 18, 32, 0.06);
  --shadow-brand: 0 12px 28px rgba(30, 64, 175, 0.28);

  /* ---------- Слои ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-assistant: 1000;
  --z-toast: 1100;

  /* ---------- Анимация ---------- */
  --t-fast: 130ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Раскладка ---------- */
  --container: 1200px;
  --container-narrow: 880px;
  --nav-h: 68px;
}

/* Брейкпоинты (для справки, используются в media queries):
   sm 480 · md 768 · lg 1024 · xl 1280 */