/* ============================================================
   ШРИФТЫ
   ============================================================ */

@font-face {
  font-family: 'VelaSans';
  src: url('../assets/fonts/VelaSans/VelaSans-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'VelaSans';
  src: url('../assets/fonts/VelaSans/VelaSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

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

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

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

@font-face {
  font-family: 'VelaSans';
  src: url('../assets/fonts/VelaSans/VelaSans-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

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

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

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

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

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/Inter-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/Inter-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/Inter-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/Inter-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

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

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

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

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

/* ============================================================
   DESIGN SYSTEM — CSS TOKENS
   Структура:
   1. ПРИМИТИВЫ
      1.1 Цвета — Brand
      1.2 Цвета — Gray
      1.3 Цвета — Семантические (Alert, Destructive, Success)
      1.4 Цвета — Accent
   2. СЕМАНТИЧЕСКИЕ ТОКЕНЫ
      2.1 Text
      2.2 Background
      2.3 Border
      2.4 Interactive
      2.5 Icon
      2.6 Status
      2.7 Patterns
   3. ТИПОГРАФИКА
      3.1 Внутренний интерфейс
      3.2 Публичные страницы
   4. ОТСТУПЫ
   5. РАДИУСЫ
   6. ТЕНИ
   7. АНИМАЦИЯ
   8. Z-INDEX
   9. BREAKPOINTS
   ============================================================ */

:root {

  /* ===========================================================
     1. ПРИМИТИВЫ
     =========================================================== */

  /* -----------------------------------------------------------
     1.1 Brand
     ----------------------------------------------------------- */
  --primitive-brand-50:  #F3F2FF;
  --primitive-brand-100: #E0DAFF;
  --primitive-brand-200: #C4B8FF;
  --primitive-brand-300: #A793FF;
  --primitive-brand-400: #765FFF; /* primary-hover */
  --primitive-brand-500: #6D54FE; /* primary */
  --primitive-brand-600: #6954E4; /* primary-pressed */
  --primitive-brand-700: #5440C0;
  --primitive-brand-800: #3F2E9A;
  --primitive-brand-900: #2C1F75;
  --primitive-brand-950: #180F50;

  /* -----------------------------------------------------------
     1.2 Gray
     ----------------------------------------------------------- */
  --primitive-gray-0:   #FFFFFF; /* white */
  --primitive-gray-25:  #FAFAFB; /* лёгкий фон под паттерны */
  --primitive-gray-50:  #F5F5F6; /* background */
  --primitive-gray-100: #EFF0F3; /* зарезервировано */
  --primitive-gray-200: #EAECF1; /* border */
  --primitive-gray-300: #D1D1DC; /* empty containers */
  --primitive-gray-400: #AAA8B3; /* disabled */
  --primitive-gray-500: #787486; /* grey text */
  --primitive-gray-600: #5E5A6E;
  --primitive-gray-700: #464256;
  --primitive-gray-800: #323040;
  --primitive-gray-900: #232124; /* dark */
  --primitive-gray-950: #131115;

  /* -----------------------------------------------------------
     1.3 Семантические цвета
     ----------------------------------------------------------- */

  /* Alert (Yellow) */
  --primitive-alert-bg:      #FEF6E3;
  --primitive-alert-default: #FAB515;
  --primitive-alert-hover:   #FBC444;
  --primitive-alert-pressed: #EFA908;
  --primitive-alert-deep:    #E9A507; /* для иконок на цветном фоне */

  /* Destructive (Red) */
  --primitive-destructive-bg:      #FFEBEB;
  --primitive-destructive-default: #FF0000;
  --primitive-destructive-hover:   #FF3D3D;
  --primitive-destructive-pressed: #EF0F0F;
  --primitive-destructive-deep:    #E90707; /* для иконок на цветном фоне */

  /* Success (Green) */
  --primitive-success-bg:      #E3FAE9;
  --primitive-success-default: #17DB4E;
  --primitive-success-hover:   #45E271;
  --primitive-success-pressed: #14CE48;
  --primitive-success-deep:    #11C744; /* для иконок на цветном фоне */

  /* -----------------------------------------------------------
     1.4 Accent (для тегов, категорий, аватаров)
     ----------------------------------------------------------- */
  --primitive-accent-orange: #FF8D28;
  --primitive-accent-mint:   #00C8B3;
  --primitive-accent-cyan:   #00C0E8;
  --primitive-accent-purple: #D46CF9;
  --primitive-accent-pink:   #FE6389;
  --primitive-accent-brown:  #AC7F5E;


  /* ===========================================================
     2. СЕМАНТИЧЕСКИЕ ТОКЕНЫ
     =========================================================== */

  /* -----------------------------------------------------------
     2.1 Text
     ----------------------------------------------------------- */
  --color-text-primary:     var(--primitive-gray-900);    /* основной текст */
  --color-text-secondary:   var(--primitive-gray-500);    /* второстепенный текст */
  --color-text-placeholder: rgba(120, 116, 134, 0.7);     /* плейсхолдеры (gray-500 70%) */
  --color-text-disabled:    var(--primitive-gray-400);    /* задизейбленный текст */
  --color-text-inverse:     var(--primitive-gray-0);      /* текст на тёмном фоне */
  --color-text-brand:       var(--primitive-brand-500);   /* акцентный текст, ссылки */
  --color-text-danger:      var(--primitive-destructive-default); /* текст ошибки */
  --color-text-success:     var(--primitive-success-default);     /* текст успеха */
  --color-text-warning:     var(--primitive-alert-default);       /* текст предупреждения */

  /* -----------------------------------------------------------
     2.2 Background
     ----------------------------------------------------------- */
  --color-bg-page:         var(--primitive-gray-50);           /* фон страницы */
  --color-bg-surface:      var(--primitive-gray-0);            /* фон карточек, модалок */
  --color-bg-disabled:     rgba(245, 245, 246, 0.5);           /* фон задизейбленных полей */
  --color-bg-brand:        var(--primitive-brand-500);         /* фон primary-кнопки */
  --color-bg-brand-subtle: var(--primitive-brand-50);          /* лёгкий акцентный фон */
  --color-bg-danger:       var(--primitive-destructive-bg);    /* фон ошибки */
  --color-bg-success:      var(--primitive-success-bg);        /* фон успеха */
  --color-bg-warning:      var(--primitive-alert-bg);          /* фон предупреждения */

  /* -----------------------------------------------------------
     2.3 Border
     ----------------------------------------------------------- */
  --color-border-default:  var(--primitive-gray-200);          /* основной бордер */
  --color-border-strong:   var(--primitive-gray-300);          /* пустые контейнеры (пунктир) */
  --color-border-focus:    var(--primitive-brand-500);         /* фокус на инпуте */
  --color-border-disabled: var(--primitive-gray-200);          /* бордер задизейбленного элемента */
  --color-border-danger:   var(--primitive-destructive-default); /* бордер ошибки */
  --color-border-success:  var(--primitive-success-default);   /* бордер успеха */
  --color-border-warning:  var(--primitive-alert-default);     /* бордер предупреждения */

  /* -----------------------------------------------------------
     2.4 Interactive (состояния кнопок)
     ----------------------------------------------------------- */

  /* Primary */
  --color-interactive-primary-default:  var(--primitive-brand-500);
  --color-interactive-primary-hover:    var(--primitive-brand-400);
  --color-interactive-primary-pressed:  var(--primitive-brand-600);
  --color-interactive-primary-disabled: var(--primitive-gray-400);

  /* Secondary */
  --color-interactive-secondary-default:  var(--primitive-gray-0);
  --color-interactive-secondary-hover:    var(--primitive-gray-25);
  --color-interactive-secondary-pressed:  var(--primitive-gray-50);
  --color-interactive-secondary-disabled: var(--primitive-gray-50);

  /* Basic */
  --color-interactive-basic-default:  #F5F5F6;
  --color-interactive-basic-hover:    #EFEFF0;
  --color-interactive-basic-pressed:  #EDEDEE;
  --color-interactive-basic-disabled: var(--primitive-gray-50);

  /* Danger Fill */
  --color-interactive-danger-default:   var(--primitive-destructive-default);
  --color-interactive-danger-hover:     var(--primitive-destructive-hover);
  --color-interactive-danger-pressed:   var(--primitive-destructive-pressed);
  --color-interactive-danger-disabled:  var(--primitive-gray-400);

  /* Success */
  --color-interactive-success-default:  var(--primitive-success-default);
  --color-interactive-success-hover:    var(--primitive-success-hover);
  --color-interactive-success-pressed:  var(--primitive-success-pressed);
  --color-interactive-success-disabled: var(--primitive-gray-400);

  /* Warning */
  --color-interactive-warning-default:  var(--primitive-alert-default);
  --color-interactive-warning-hover:    var(--primitive-alert-hover);
  --color-interactive-warning-pressed:  var(--primitive-alert-pressed);
  --color-interactive-warning-disabled: var(--primitive-gray-400);

  /* -----------------------------------------------------------
     2.5 Icon
     ----------------------------------------------------------- */
  --color-icon-primary:        var(--primitive-gray-900);           /* основная иконка */
  --color-icon-secondary:      var(--primitive-gray-500);           /* второстепенная иконка */
  --color-icon-disabled:       var(--primitive-gray-400);           /* задизейбленная иконка */
  --color-icon-brand:          var(--primitive-brand-500);          /* акцентная иконка */
  --color-icon-inverse:        var(--primitive-gray-0);             /* иконка на тёмном фоне */
  --color-icon-danger:         var(--primitive-destructive-default); /* иконка ошибки */
  --color-icon-danger-deep:    var(--primitive-destructive-deep);   /* иконка на красном фоне */
  --color-icon-success:        var(--primitive-success-default);    /* иконка успеха */
  --color-icon-success-deep:   var(--primitive-success-deep);       /* иконка на зелёном фоне */
  --color-icon-warning:        var(--primitive-alert-default);      /* иконка предупреждения */
  --color-icon-warning-deep:   var(--primitive-alert-deep);         /* иконка на жёлтом фоне */

  /* -----------------------------------------------------------
     2.6 Status (индикаторные кружочки)
     ----------------------------------------------------------- */
  --color-status-active:  var(--primitive-success-default); /* активен — зелёный */
  --color-status-used:    #DADCE4;                          /* использован — серо-фиолетовый */
  --color-status-expired: var(--primitive-alert-default);   /* просрочен — жёлтый */
  --color-status-blocked: var(--primitive-destructive-default); /* заблокирован — красный */

  /* -----------------------------------------------------------
     2.7 Patterns (фоновые паттерны)
     ----------------------------------------------------------- */

  /* Dots — gray: белый фон, серые точки */
  --pattern-dots-gray-bg:  var(--primitive-gray-0);
  --pattern-dots-gray-dot: var(--primitive-gray-200);
  --pattern-dots-gray: radial-gradient(var(--pattern-dots-gray-dot) 1.5px, transparent 1.5px);
  --pattern-dots-gray-size: 20px 20px;

  /* Dots — dark: тёмный фон, белые точки */
  --pattern-dots-dark-bg:  var(--primitive-gray-900);
  --pattern-dots-dark-dot: rgba(255, 255, 255, 0.13);
  --pattern-dots-dark: radial-gradient(var(--pattern-dots-dark-dot) 1.5px, transparent 1.5px);
  --pattern-dots-dark-size: 20px 20px;

  /* Dots large — gray: страничный фон, крупные серые точки */
  --pattern-dots-large-bg:  var(--primitive-gray-50);
  --pattern-dots-large-dot: var(--primitive-gray-300);
  --pattern-dots-large: radial-gradient(var(--pattern-dots-large-dot) 2px, transparent 2px);
  --pattern-dots-large-size: 32px 32px;

  /* Lines diagonal — gray: белый фон, диагональные линии */
  --pattern-lines-diagonal-bg:   var(--primitive-gray-0);
  --pattern-lines-diagonal-line: var(--primitive-gray-200);
  --pattern-lines-diagonal: repeating-linear-gradient(
    45deg,
    var(--pattern-lines-diagonal-line),
    var(--pattern-lines-diagonal-line) 1px,
    transparent 1px,
    transparent 12px
  );

  /* Grid — brand: brand-50 фон, brand-сетка */
  --pattern-grid-brand-bg:   var(--primitive-brand-50);
  --pattern-grid-brand-line: rgba(109, 84, 254, 0.13);
  --pattern-grid-brand: linear-gradient(var(--pattern-grid-brand-line) 1px, transparent 1px),
                        linear-gradient(90deg, var(--pattern-grid-brand-line) 1px, transparent 1px);
  --pattern-grid-brand-size: 24px 24px;

  /* Dots — primary: brand фон, белые точки */
  --pattern-dots-primary-bg:  var(--primitive-brand-500);
  --pattern-dots-primary-dot: rgba(255, 255, 255, 0.13);
  --pattern-dots-primary: radial-gradient(var(--pattern-dots-primary-dot) 1.5px, transparent 1.5px);
  --pattern-dots-primary-size: 20px 20px;

  /* Dots SM — gray-25: мелкие точки в стиле Tailwind, светлый фон */
  --pattern-dots-sm-bg:  var(--primitive-gray-25);
  --pattern-dots-sm-dot: rgba(209, 209, 220, 0.5); /* gray-300 / 50% */
  --pattern-dots-sm: radial-gradient(var(--pattern-dots-sm-dot) 1px, transparent 0);
  --pattern-dots-sm-size: 10px 10px;

  /* Lines diagonal SM — gray-25: диагональные линии в стиле Tailwind, светлый фон */
  --pattern-lines-diag-sm-bg:   var(--primitive-gray-25);
  --pattern-lines-diag-sm-line: rgba(209, 209, 220, 0.5); /* gray-300 / 50% */
  --pattern-lines-diag-sm: repeating-linear-gradient(
    315deg,
    var(--pattern-lines-diag-sm-line) 0,
    var(--pattern-lines-diag-sm-line) 1px,
    transparent 0,
    transparent 50%
  );
  --pattern-lines-diag-sm-size: 10px 10px;


  /* ===========================================================
     3. ТИПОГРАФИКА
     =========================================================== */

  /* -----------------------------------------------------------
     3.1 Внутренний интерфейс
     Заголовки: VelaSans
     Текст: Inter
     ----------------------------------------------------------- */

  /* H1 */
  --typography-h1-font-family:  'VelaSans', sans-serif;
  --typography-h1-font-size:    32px;
  --typography-h1-font-weight:  600;
  --typography-h1-line-height:  46px;

  /* H1 — планшет (1024px) */
  --typography-h1-md-font-size:    28px;
  --typography-h1-md-font-weight:  600;
  --typography-h1-md-line-height:  40px;

  /* H1 — мобильный (390px) */
  --typography-h1-sm-font-size:    26px;
  --typography-h1-sm-font-weight:  600;
  --typography-h1-sm-line-height:  36px;

  /* H2 */
  --typography-h2-font-family:  'VelaSans', sans-serif;
  --typography-h2-font-size:    24px;
  --typography-h2-font-weight:  600;
  --typography-h2-line-height:  34px;

  /* H3 */
  --typography-h3-font-family:  'Inter', sans-serif;
  --typography-h3-font-size:    18px;
  --typography-h3-font-weight:  500;
  --typography-h3-line-height:  26px;

  /* H3 sm — мобильная версия H3 */
  --typography-h3-sm-font-family:  'Inter', sans-serif;
  --typography-h3-sm-font-size:    20px;
  --typography-h3-sm-font-weight:  500;
  --typography-h3-sm-line-height:  28px;

  /* Body L */
  --typography-body-l-font-family:  'Inter', sans-serif;
  --typography-body-l-font-size:    16px;
  --typography-body-l-font-weight:  400;
  --typography-body-l-line-height:  26px;

  /* Body L Bold */
  --typography-body-l-bold-font-family:  'Inter', sans-serif;
  --typography-body-l-bold-font-size:    16px;
  --typography-body-l-bold-font-weight:  500;
  --typography-body-l-bold-line-height:  26px;

  /* Body */
  --typography-body-font-family:  'Inter', sans-serif;
  --typography-body-font-size:    14px;
  --typography-body-font-weight:  400;
  --typography-body-line-height:  24px;

  /* Body Bold */
  --typography-body-bold-font-family:  'Inter', sans-serif;
  --typography-body-bold-font-size:    14px;
  --typography-body-bold-font-weight:  500;
  --typography-body-bold-line-height:  24px;

  /* Body S */
  --typography-body-s-font-family:  'Inter', sans-serif;
  --typography-body-s-font-size:    12px;
  --typography-body-s-font-weight:  400;
  --typography-body-s-line-height:  18px;

  /* Body S Bold */
  --typography-body-s-bold-font-family:  'Inter', sans-serif;
  --typography-body-s-bold-font-size:    12px;
  --typography-body-s-bold-font-weight:  500;
  --typography-body-s-bold-line-height:  18px;

  /* Caption */
  --typography-caption-font-family:  'Inter', sans-serif;
  --typography-caption-font-size:    11px;
  --typography-caption-font-weight:  500;
  --typography-caption-line-height:  16px;

  /* Caption Bold */
  --typography-caption-bold-font-family:  'Inter', sans-serif;
  --typography-caption-bold-font-size:    11px;
  --typography-caption-bold-font-weight:  600;
  --typography-caption-bold-line-height:  16px;

  /* Textarea */
  --typography-textarea-line-height: 24px;

  /* -----------------------------------------------------------
     3.2 Публичные страницы
     Заголовки: Unbounded
     Текст: Manrope
     ----------------------------------------------------------- */

  /* Public H1 */
  --typography-pub-h1-font-family:  'Unbounded', sans-serif;
  --typography-pub-h1-font-size:    48px;
  --typography-pub-h1-font-weight:  400;
  --typography-pub-h1-line-height:  68px;

  /* Public H2 */
  --typography-pub-h2-font-family:  'Unbounded', sans-serif;
  --typography-pub-h2-font-size:    24px;
  --typography-pub-h2-font-weight:  400;
  --typography-pub-h2-line-height:  38px;

  /* Public H3 */
  --typography-pub-h3-font-family:  'Unbounded', sans-serif;
  --typography-pub-h3-font-size:    22px;
  --typography-pub-h3-font-weight:  400;
  --typography-pub-h3-line-height:  36px;

  /* Public Button */
  --typography-pub-button-font-family:  'Unbounded', sans-serif;
  --typography-pub-button-font-size:    16px;
  --typography-pub-button-font-weight:  400;
  --typography-pub-button-line-height:  20px;

  /* Public Body L */
  --typography-pub-body-l-font-family:  'Manrope', sans-serif;
  --typography-pub-body-l-font-size:    19px;
  --typography-pub-body-l-font-weight:  400;
  --typography-pub-body-l-line-height:  32px;

  /* Public Body L Bold */
  --typography-pub-body-l-bold-font-weight: 600;

  /* Public Body */
  --typography-pub-body-font-family:  'Manrope', sans-serif;
  --typography-pub-body-font-size:    16px;
  --typography-pub-body-font-weight:  400;
  --typography-pub-body-line-height:  28px;

  /* Public Body Bold */
  --typography-pub-body-bold-font-weight: 600;

  /* Public Body S */
  --typography-pub-body-s-font-family:  'Manrope', sans-serif;
  --typography-pub-body-s-font-size:    15px;
  --typography-pub-body-s-font-weight:  400;
  --typography-pub-body-s-line-height:  26px;

  /* Public Body S Bold */
  --typography-pub-body-s-bold-font-weight: 600;

  /* Public Body XS */
  --typography-pub-body-xs-font-family:  'Manrope', sans-serif;
  --typography-pub-body-xs-font-size:    14px;
  --typography-pub-body-xs-font-weight:  400;
  --typography-pub-body-xs-line-height:  24px;

  /* Public Body XS Bold */
  --typography-pub-body-xs-bold-font-weight: 600;


  /* ===========================================================
     4. ОТСТУПЫ
     Шаг 2 до 24px, шаг 4 после 24px
     =========================================================== */
  --spacing-0:   0px;
  --spacing-2:   2px;
  --spacing-4:   4px;
  --spacing-6:   6px;
  --spacing-8:   8px;
  --spacing-10:  10px;
  --spacing-12:  12px;
  --spacing-14:  14px;
  --spacing-16:  16px;
  --spacing-18:  18px;
  --spacing-20:  20px;
  --spacing-22:  22px;
  --spacing-24:  24px;
  --spacing-28:  28px;
  --spacing-32:  32px;
  --spacing-36:  36px;
  --spacing-40:  40px;
  --spacing-44:  44px;
  --spacing-48:  48px;
  --spacing-52:  52px;
  --spacing-56:  56px;
  --spacing-60:  60px;
  --spacing-64:  64px;
  --spacing-72:  72px;
  --spacing-80:  80px;
  --spacing-88:  88px;
  --spacing-96:  96px;
  --spacing-112: 112px;
  --spacing-128: 128px;
  --spacing-144: 144px;
  --spacing-160: 160px;
  --spacing-176: 176px;
  --spacing-192: 192px;
  --spacing-200: 200px;


  /* ===========================================================
     5. РАДИУСЫ
     =========================================================== */
  --radius-none: 0px;
  --radius-2xs:  2px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-4xl:  28px;
  --radius-5xl:  32px;
  --radius-full: 9999px;


  /* ===========================================================
     6. ТЕНИ
     =========================================================== */
  --shadow-sm: 0px 2px 8px 0px rgba(142, 142, 166, 0.125);   /* карточки, дропдауны */
  --shadow-md: 0px 6px 16px 0px rgba(142, 142, 166, 0.16);   /* плавающие панели */
  --shadow-lg: 0px 12px 32px 0px rgba(142, 142, 166, 0.2);   /* модалки, попапы */


  /* ===========================================================
     7. АНИМАЦИЯ
     =========================================================== */
  --transition-base: all 0.3s ease 0s; /* базовый переход для всех состояний */


  /* ===========================================================
     10. PAGE LAYOUT
     =========================================================== */
  --page-px:          48px;                  /* xl: боковые отступы страницы */
  --page-py-top:      var(--spacing-32);     /* xl: верхний отступ */
  --page-py-bottom:   var(--spacing-96);     /* xl: нижний отступ */
  --page-gap:         var(--spacing-40);     /* xl: отступ между секциями */
  --section-title-gap: var(--spacing-24);    /* xl: отступ от заголовка секции до контента */
  --cards-gap:         var(--spacing-20);    /* xl: гэп между карточками */

  /* ===========================================================
     8. Z-INDEX
     =========================================================== */
  --z-base:           0;    /* обычный контент */
  --z-raised:         10;   /* карточки с hover */
  --z-dropdown:       100;  /* дропдауны, селекты */
  --z-sticky:         200;  /* sticky-шапка, плавающие панели */
  --z-modal-backdrop: 300;  /* затемнение за модалкой */
  --z-modal:          400;  /* модальное окно */
  --z-toast:          500;  /* уведомления */
  --z-tooltip:        600;  /* подсказки, всегда сверху */

}

/* ===========================================================
   Адаптивная типографика
   Мобильный (≤500px): body 14→16, body-s 12→14, H3→H3 sm
   =========================================================== */
@media (max-width: 1439px) {
  :root {
    --page-px:        var(--spacing-32);              /* lg: боковые отступы */
    --page-py-top:    var(--spacing-24);              /* lg: верхний отступ */
    --page-py-bottom: var(--spacing-80);              /* lg: нижний отступ */
    --page-gap:       var(--spacing-32);              /* lg: отступ между секциями */
    --cards-gap:      var(--spacing-16);              /* lg: гэп между карточками */
    --typography-h1-font-size:   var(--typography-h1-md-font-size);
    --typography-h1-line-height: var(--typography-h1-md-line-height);
  }
}

@media (max-width: 1023px) {
  :root {
    --page-px:           var(--spacing-28);   /* md: боковые отступы */
    --page-py-top:       var(--spacing-24);   /* md: верхний отступ */
    --page-py-bottom:    var(--spacing-72);   /* md: нижний отступ */
    --page-gap:          var(--spacing-28);   /* md: отступ между секциями */
    --section-title-gap: var(--spacing-20);   /* md: отступ от заголовка секции до контента */
    --cards-gap:         var(--spacing-16);   /* md: гэп между карточками */
  }
}

@media (max-width: 500px) {
  :root {
    --page-px:           var(--spacing-20);   /* sm: боковые отступы */
    --page-py-top:       var(--spacing-20);   /* sm: верхний отступ */
    --page-py-bottom:    var(--spacing-64);   /* sm: нижний отступ */
    --page-gap:          var(--spacing-24);   /* sm: отступ между секциями */
    --section-title-gap: var(--spacing-20);   /* sm: отступ от заголовка секции до контента */
    --cards-gap:         var(--spacing-12);   /* sm: гэп между карточками */

    --typography-body-font-size:        16px;
    --typography-body-line-height:      26px;
    --typography-body-bold-font-size:   16px;
    --typography-body-bold-line-height: 26px;
    --typography-body-s-font-size:      14px;
    --typography-body-s-line-height:    24px;
    --typography-body-s-bold-font-size: 14px;
    --typography-body-s-bold-line-height: 24px;
    --typography-h3-font-size:          var(--typography-h3-sm-font-size);
    --typography-h3-font-weight:        var(--typography-h3-sm-font-weight);
    --typography-h3-line-height:        var(--typography-h3-sm-line-height);
    --typography-textarea-line-height:  26px;
  }
}


html {
  background-color: var(--primitive-gray-0);
}

/* ===========================================================
   9. BREAKPOINTS
   Использование: @media (min-width: var(--bp-sm)) — не работает в CSS.
   Используй значения напрямую в media queries.

   sm:  500px  — мобильный (до 500px включительно)
   md:  1024px — планшет (501px–1024px)
   lg:  1280px — десктоп
   xl:  1440px — широкий десктоп
   =========================================================== */

/* Пример использования:
@media (max-width: 500px)  { ... }  /* мобильный */
@media (min-width: 501px) and (max-width: 1024px) { ... }  /* планшет */
@media (min-width: 1024px) { ... }  /* десктоп и выше */
@media (min-width: 1280px) { ... }
@media (min-width: 1440px) { ... }
*/