/* ============================================
   DESIGN TOKENS — союз.рф Лендинг
   Источник: Figma UI-kit 
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&family=Nunito:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* ─── ШРИФТЫ ─── */
/* Onder — кастомный шрифт для заголовков H1–H4 */
@font-face {
  font-family: 'Onder';
  src: url('../fonts/Onder-Regular.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================
     ПОДТВЕРЖДЕНО В FIGMA — значения совпадают 1:1
     ============================================ */
  --color-violet-main:      #4B0082;   /* Primary/Purple 50 */
  --color-violet-light:     #B3AEF3;   /* Primary/Violet 50 */
  --color-violet-pale:      #E1DDFC;   /* Primary/Violet 20 */
  --color-violet-bg:        #F2F1FF;   /* Primary/Violet 10 */
  --color-violet-accent:    #9747FF;   /* Primary/Violet 100 */
  --color-primary-white:    #FFFFFF;   /* Neutrals/White */

  --font-onder:              'Onder', 'Montserrat', sans-serif;
  --font-nunito-sans:        'Nunito Sans', sans-serif;
  --font-nunito:              'Nunito', sans-serif;

  --radius-pill:              100px;   /* cornerRadius кнопок в ките */


  --color-gray-5:           #A1A1AA;  

  --color-primary-black:    #393939;   /* Neutrals/Black — приведено к актуальному значению из Figma (было #1E1E28) */
  --color-purple-100:       #211640;   /* Primary/Purple 100 */
  --color-yellow:           #FFCA70;   /* Primary/Yellow */
  --color-bg-site-gray:     #F5F5F5;   /* Neutrals/BG_site_gray */
  --opacity-white-60:       rgba(255, 255, 255, 0.6);
  --opacity-white-40:       rgba(255, 255, 255, 0.4);
  --opacity-white-20:       rgba(255, 255, 255, 0.2);
  --opacity-white-10:       rgba(255, 255, 255, 0.1);   /* used by button/Tetriary hover state */
  --radius-input:            16px;     /* cornerRadius инпутов в ките */

  /* ─── ГРАДИЕНТЫ ─── */
  --gradient-1:              linear-gradient(135deg, #4B0082 0%, #B3AEF3 100%);
  --gradient-2:               linear-gradient(135deg, #4B0082 0%, #B3AEF3 100%);
  --gradient-3:               linear-gradient(135deg, #613873 0%, #B4AFF3 100%);
  --gradient-4:               linear-gradient(135deg, #733F89 0%, #221228 100%);

  /* ─── ТИПОГРАФИКА ─── */

  /* H1 — Onder 32 Medium, line-height 200% */
  --text-h1-family:         var(--font-onder);
  --text-h1-size:           32px;
  --text-h1-weight:         500;
  --text-h1-line-height:    2;

  /* H2 — Onder 28 Medium, line-height ~207% */
  --text-h2-family:         var(--font-onder);
  --text-h2-size:           28px;
  --text-h2-weight:         500;
  --text-h2-line-height:    2.07;

  /* H3 — Onder 24 Medium, line-height 200% */
  --text-h3-family:         var(--font-onder);
  --text-h3-size:           24px;
  --text-h3-weight:         500;
  --text-h3-line-height:    2;

  /* H4 — Onder 20 Medium, line-height 200% */
  --text-h4-family:         var(--font-onder);
  --text-h4-size:           20px;
  --text-h4-weight:         500;
  --text-h4-line-height:    2;

  /* Body 1 — Nunito Sans 24, line-height 150% */
  --text-body1-family:      var(--font-nunito-sans);
  --text-body1-size:        24px;
  --text-body1-weight-semibold: 600;
  --text-body1-weight-regular:  400;
  --text-body1-line-height: 1.5;

  /* Body 2 — Nunito Sans 20, line-height 140% */
  --text-body2-family:      var(--font-nunito-sans);
  --text-body2-size:        20px;
  --text-body2-weight-semibold: 600;
  --text-body2-weight-regular:  400;
  --text-body2-line-height: 1.4;

  /* Body 3 — Nunito Sans 16, line-height 135% */
  --text-body3-family:      var(--font-nunito-sans);
  --text-body3-size:        16px;
  --text-body3-weight-bold:     700;
  --text-body3-weight-semibold: 600;
  --text-body3-weight-regular:  400;
  --text-body3-line-height: 1.35;

  /* Body 4 — Nunito Sans 14, line-height ~143% */
  --text-body4-family:      var(--font-nunito-sans);
  --text-body4-size:        14px;
  --text-body4-weight-bold:     700;
  --text-body4-weight-semibold: 600;
  --text-body4-weight-regular:  400;
  --text-body4-line-height: 1.43;

  /* Body 5 — Nunito Sans 13, line-height ~138% */
  --text-body5-family:      var(--font-nunito-sans);
  --text-body5-size:        13px;
  --text-body5-weight-semibold: 400;
  --text-body5-line-height: 1.38;

  /* Caption-стилей (Montserrat) в текущем Figma-ките не найдено —
     секции "Onder"/"Nunito" это единственные текстовые стили кита.
     Значения ниже оставлены как legacy, требуют подтверждения дизайнера. */
  --font-montserrat:        'Montserrat', sans-serif;
  --text-caption1-family:   var(--font-montserrat);
  --text-caption1-size:     14px;
  --text-caption1-weight:   400;
  --text-caption1-line-height: 1.43;

  --text-caption3-family:   var(--font-montserrat);
  --text-caption3-size:     12px;
  --text-caption3-weight:   400;
  --text-caption3-line-height: 1.33;

  /* ─── ТЕНИ ───
     В Figma-ките не найдено ни одного DROP_SHADOW/INNER_SHADOW эффекта
     ни на одном компоненте (кнопки, инпуты, карточки) — значения ниже
     не подтверждены Figma, оставлены как legacy. */
  --shadow-default:         0 4px 24px rgba(75, 0, 130, 0.12);
  --shadow-card:            0 2px 16px rgba(62, 20, 96, 0.08);

  /* ─── РАДИУСЫ ───
     В ките найден только --radius-pill (кнопки, 100px) и --radius-input
     (инпуты, 16px) выше. Ниже — legacy-набор, не подтверждён Figma. */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;

  /* ─── ОТСТУПЫ ───
     В ките нет отдельной сетки spacing-токенов — только конкретные
     paddings/itemSpacing на компонентах (например, у кнопок:
     padding 32/16, itemSpacing 16 — совпадает с --spacing-xl/--spacing-md
     ниже). Остальные значения — legacy, не подтверждены Figma. */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  40px;
  --spacing-2xl: 60px;
  --spacing-3xl: 80px;
}