/* ============================================
   FTL Advisers — Design Tokens
   variables.css
   
   Источники:
   - colors.pdf
   - Система_отступов.pdf
   - Страница_стилей.pdf
   - Уточнения от дизайнера (май 2026)
   ============================================ */

:root {

  /* ══════════════════════════════════════════
     HEADER HEIGHT
     top-bar: padding 20+16 + лого 24 = 60
     border: 1
     nav: padding 14+14 + текст 20 = 48
     Итого: 109px
     ══════════════════════════════════════════ */
  --header-height: 126px;

  /* ══════════════════════════════════════════
     BASE PALETTE
     Исходные цвета дизайн-системы
     ══════════════════════════════════════════ */

  --white:            #FFFFFF;
  --gray:             #F9FCF5;
  --dark-green:       #374F1A;
  --dark-blue:        #5A6980;
  --brown:            #827264;


  /* ══════════════════════════════════════════
     SEMANTIC — Text
     ══════════════════════════════════════════ */

  /* Весь текст на светлом фоне: заголовки, параграфы, подписи */
  --text-primary:         #374F1A;

  /* Текст на тёмном фоне (--bg-dark секции, footer) */
  --text-on-dark:         #FFFFFF;


  /* ══════════════════════════════════════════
     SEMANTIC — Links
     ══════════════════════════════════════════ */

  --link-color:           #374F1A;
  --link-accent:          #2A3E10;  /* более тёмный зелёный для ссылок */
  --link-hover:           rgba(55, 79, 26, 0.5);


  /* ══════════════════════════════════════════
     SEMANTIC — Backgrounds
     ══════════════════════════════════════════ */

  /* Фон страницы */
  --bg-page:              #FFFFFF;

  /* Фон карточек, dropdown, секций-плашек */
  --bg-card:              #F9FCF5;

  /* Тёмный фон (секция «С чего начать», footer) */
  --bg-dark:              #5A6980;


  /* ══════════════════════════════════════════
     SEMANTIC — Borders & Dividers
     ══════════════════════════════════════════ */

  /* Обводка карточек, dropdown, разделители между элементами */
  --border-color:         rgba(55, 79, 26, 0.5);

  /* Мягкая декоративная обводка */
  --border-light:         rgba(55, 79, 26, 0.2);

  /* Декоративные линии (#827264 opacity 0.2) — горизонтальные
     разделители секций, обрамление подписей, разделители
     внутри плашек */
  --decor-line:           rgba(130, 114, 100, 0.2);


  /* ══════════════════════════════════════════
     SEMANTIC — Buttons
     ══════════════════════════════════════════ */

  /* Основная кнопка (коричневая) */
  --btn-primary-bg:       #827264;
  --btn-primary-text:     #FFFFFF;
  --btn-primary-hover:    #BFBDBC;

  /* Тёмная кнопка (зелёная) */
  --btn-dark-bg:          #374F1A;
  --btn-dark-text:        #FFFFFF;


  /* ══════════════════════════════════════════
     FONTS
     ══════════════════════════════════════════ */

  --font-heading:     'Montserrat', Arial, sans-serif;
  --font-body:        'Montserrat', sans-serif;


  /* ══════════════════════════════════════════
     SPACING — Desktop (1440px)
     Из: Система_отступов.pdf
     ══════════════════════════════════════════ */

  --page-width:       1440px;

  --gap-blocks:       130px;
  --gap-groups:       48px;
  --gap-elements:     20px;
  --gap-cards:        16px;

  --edge:             20px;
  --card-pad:         51px;
  --card-pad-sm:      20px;
  --section-pad-top:  120px;


  /* ══════════════════════════════════════════
     BORDER RADIUS — Desktop
     Из: Система_отступов.pdf
     ══════════════════════════════════════════ */

  --radius-1:         40px;
  --radius-2:         20px;
  --radius-3:         10px;


  /* ══════════════════════════════════════════
     GRID
     ══════════════════════════════════════════ */

  --columns:          12;
  --gutter:           var(--gap-elements);


  /* ══════════════════════════════════════════
     TRANSITIONS
     ══════════════════════════════════════════ */

  --ease:             cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration:         0.25s;
}


/* ── Tablet (768–1024px) ── */
@media (max-width: 1024px) {
  :root {
    --header-height: 72px;
    --gap-blocks:       100px;
    --gap-groups:       48px;
    --gap-elements:     20px;
    --gap-cards:        16px;

    --edge:             12px;
    --card-pad:         36px;
    --card-pad-sm:      20px;
    --section-pad-top:  60px;

    --radius-1:         24px;
    --radius-2:         20px;
    --radius-3:         10px;
  }
}

/* ── Mobile (<768px) ── */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --gap-blocks:       60px;
    --gap-groups:       42px;
    --gap-elements:     12px;
    --gap-cards:        8px;

    --edge:             20px;
    --card-pad:         20px;
    --card-pad-sm:      12px;
    --section-pad-top:  32px;

    --radius-1:         24px;
    --radius-2:         20px;
    --radius-3:         10px;
  }
}