/* ==========================================================================
   VMK Design System · TOKENS
   --------------------------------------------------------------------------
   Единственный источник правды для всей визуальной системы.
   Поменял переменную здесь — поменялось везде: на /prices, /admin
   и на витрине /design-system.html.

   Структура:
     1. Цвета · примитивы (raw hex)
     2. Цвета · бренд + состояния (flame + hover)
     3. Цвета · семантика (green/red + soft/border варианты)
     4. Цвета · служебные (overlay, shadow, white tints)
     5. Типографика (шрифты, размеры, трекинг)
     6. Отступы (4px-grid)
     7. Границы и радиусы
     8. Переходы и анимации
     9. Z-index
   ========================================================================== */

:root {
  /* === 1. ЦВЕТА · ПРИМИТИВЫ ============================================== */
  --bg:        #0A0A0A;   /* основной фон страницы                       */
  --bg-2:      #111111;   /* фон секций (moex, legal, panels)   · +20%   */
  --surface:   #141414;   /* плавающие плоскости, попап-меню    · +20%   */
  --surface-2: #1E1E1E;   /* hover-состояние плоскостей         · +20+15%*/
  --line:      #242424;   /* тонкая разделительная линия        · +20+15%*/
  --line-2:    #313131;   /* основная разделительная линия      · +20+15%*/
  --fg:        #FFFFFF;   /* основной текст                     · +15%   */
  --fg-2:      #DCDCDC;   /* вторичный текст                    · +15%   */
  --muted:     #6E6E6E;   /* приглушённый текст, captions       */
  --muted-2:   #444444;   /* очень приглушённый, плейсхолдеры   */

  /* === 2. ЦВЕТА · БРЕНД + СОСТОЯНИЯ ====================================== */
  --flame:        #FF5A1F;   /* акцент бренда                       */
  --flame-hover:  #FF7340;   /* hover на залитой акцентной кнопке   */
  --flame-rgb:    255 90 31; /* space-separated, для rgb(var(...) / a) */
  --flame-soft:   rgba(255, 90, 31, 0.08);   /* фоновая подсветка   */
  --flame-glow:   rgba(255, 90, 31, 0.5);    /* glow для индикатора */
  --flame-glow-2: rgba(255, 90, 31, 0.6);    /* более яркий glow    */

  /* === 3. ЦВЕТА · СЕМАНТИКА ============================================== */
  /* GREEN · позитив, рост, "ок" */
  --green:        #4ADE80;
  --green-rgb:    74 222 128;  /* space-separated, для rgb(var(...) / a) */
  --green-soft:   rgba(74, 222, 128, 0.08);  /* фон бейджа delta+    */
  --green-soft-2: rgba(74, 222, 128, 0.06);  /* фон ac-pulled.ok     */
  --green-soft-3: rgba(74, 222, 128, 0.03);  /* фон строки sync.ok   */
  --green-soft-4: rgba(74, 222, 128, 0.10);  /* фон toast            */
  --green-bd:     rgba(74, 222, 128, 0.3);   /* рамка delta+         */
  --green-bd-2:   rgba(74, 222, 128, 0.4);   /* рамка ac-pulled.ok   */
  --green-bd-3:   rgba(74, 222, 128, 0.35);  /* рамка toast          */
  --green-glow:   rgba(74, 222, 128, 0.5);   /* glow для индикатора  */

  /* RED · негатив, падение, ошибка */
  --red:        #FF5C5C;
  --red-rgb:    255 92 92;   /* space-separated, для rgb(var(...) / a) */
  --red-soft:   rgba(255, 92, 92, 0.08);  /* фон бейджа delta-     */
  --red-soft-2: rgba(255, 92, 92, 0.06);  /* фон ac-pulled.fail    */
  --red-soft-3: rgba(255, 92, 92, 0.03);  /* фон строки sync.fail  */
  --red-bd:     rgba(255, 92, 92, 0.3);   /* рамка delta-          */
  --red-bd-2:   rgba(255, 92, 92, 0.4);   /* рамка ac-pulled.fail  */
  --red-bd-3:   rgba(255, 92, 92, 0.25);  /* рамка not-pulled      */

  /* === 4. ЦВЕТА · СЛУЖЕБНЫЕ ============================================= */
  --overlay:     rgba(0, 0, 0, 0.7);             /* подложка модала   */
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.5);  /* тень дропдауна    */
  --tint-soft:   rgba(255, 255, 255, 0.015);     /* лёгкая подсветка  */
  --tint-soft-2: rgba(255, 255, 255, 0.05);      /* бейдж 24Ч/7Д      */

  /* === 5. ТИПОГРАФИКА =================================================== */
  --font: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* Размеры (px-шкала) — используй в новых компонентах */
  --fs-9:   9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;

  /* Letter-spacing пресеты */
  --tracking-tight:   -0.04em;   /* hero headlines           */
  --tracking-snug:    -0.025em;  /* sub-headlines            */
  --tracking-normal:  -0.02em;   /* card titles              */
  --tracking-wide:     0.05em;   /* mono captions            */
  --tracking-wider:    0.1em;    /* chips, tabs              */
  --tracking-widest:   0.15em;   /* eyebrows, uppercase      */
  --tracking-ultra:    0.18em;   /* самые крупные uppercase  */

  /* === 6. ОТСТУПЫ (4px-grid) ============================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Pagе-уровень paddings (десктоп / мобайл) */
  --pad-page-x:        32px;
  --pad-page-x-mobile: 24px;

  /* === 7. ГРАНИЦЫ И РАДИУСЫ ============================================ */
  --bd-w:        1px;
  --bd:          1px solid var(--line-2);
  --bd-line:     1px solid var(--line);
  --bd-flame:    1px solid var(--flame);

  --radius-0:  0;
  --radius-sm: 6px;

  /* === 8. ПЕРЕХОДЫ И АНИМАЦИИ ========================================== */
  --t-instant: 100ms;
  --t-fast:    150ms;
  --t-base:    200ms;
  --t-slow:    400ms;
  --ease:      ease;

  /* Часто встречающиеся комбо */
  --trans-color: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);

  /* === 9. Z-INDEX ====================================================== */
  --z-sticky:  10;
  --z-popover: 100;
  --z-modal:   1000;
}