/* ============================================================
   DESIGN TOKENS — палитра Pantone Dusty Blue + Buff Orange.
   ТЗ tyaga-dusty-blue. Единственный источник правды по цвету.
   Хардкод цвета в компонентах — ошибка (только var(--…)).
   Основа: Pantone 16-4010 TCX Dusty Blue #8FA3B4 (--blue-*).
   Акцент: Pantone 14-1128 TCX Buff Orange #FBB37A (--buff-*), ~5–7% площади.
   Шрифт: Onest (OFL) через Google Fonts.
   ============================================================ */

:root {
  /* ---------- ШКАЛА DUSTY BLUE (основа) ---------- */
  --blue-50:  #F1F5F8;   /* основной фон страницы */
  --blue-100: #E3EBF1;   /* фон чередующихся секций */
  --blue-200: #DCE6ED;   /* плашки, теги, фон полей ввода */
  --blue-300: #B9C8D4;   /* разделители повышенного контраста, disabled */
  --blue-400: #8FA3B4;   /* сам Pantone Dusty Blue — декор, градиенты */
  --blue-500: #6E8AA1;   /* hover, второстепенные иконки */
  --blue-600: #55708A;   /* границы активных полей, ссылки в тексте */
  --blue-700: #3D5568;   /* ОСНОВНОЙ БРЕНД: кнопки, акценты, футер */
  --blue-800: #2C3F4E;   /* hover основной кнопки, тёмные секции */
  --blue-900: #1F2C36;   /* основной текст */

  /* ---------- ШКАЛА BUFF ORANGE (акцент) ---------- */
  --buff-100: #FDEBDA;   /* подложки акцентных плашек */
  --buff-200: #FDD9B8;   /* подсветка, ::selection, ховер акцентных плашек */
  --buff-300: #FBB37A;   /* сам Pantone Buff Orange — метрики, бейджи, маркеры */
  --buff-400: #F0994F;   /* hover акцентной кнопки */
  --buff-500: #D97B2C;   /* акцентный ТЕКСТ на светлом (единственный оранжевый для текста) */
  --buff-ink: #4A2A0E;   /* текст поверх оранжевой заливки */

  /* ---------- НЕЙТРАЛЬНЫЕ И СЛУЖЕБНЫЕ ---------- */
  --surface:      #FFFFFF;   /* карточки, формы */
  --surface-2:    #F7FAFC;   /* вложенные поверхности внутри белых карточек */
  --line:         #DCE5EC;   /* обычные границы */
  --line-strong:  #C6D3DD;   /* заметные границы */
  --muted:        #65798A;   /* вторичный текст, подписи, плейсхолдеры */
  --on-brand:     #F6F9FB;   /* текст поверх --blue-700/800 и градиента */
  --success:      #4F7D6A;   /* успешная отправка формы */
  --error:        #C0563F;   /* ошибки валидации */
  --focus:        #F0994F;   /* кольцо фокуса на клавиатуре */

  /* ---------- ГРАДИЕНТЫ ---------- */
  --grad-brand: linear-gradient(135deg, #3B5164 0%, #6E8AA1 52%, #C9A78E 100%);
  --grad-soft:  linear-gradient(180deg, #F1F5F8 0%, #E3EBF1 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,.55), rgba(143,163,180,.18));

  /* ---------- ТЕНИ (холодный синий подмес, не чёрный) ---------- */
  --shadow-sm: 0 2px 8px rgba(31,44,54,.06);
  --shadow-md: 0 12px 32px rgba(31,44,54,.09);
  --shadow-lg: 0 28px 64px rgba(31,44,54,.14);
  /* legacy-имена теней → новая шкала (компоненты ссылаются на них) */
  --shadow-card: var(--shadow-md);
  --shadow-soft: var(--shadow-sm);
  --shadow-hair: var(--shadow-sm);

  /* ---------- LEGACY-АЛИАСЫ ЦВЕТА → палитра ТЗ ----------
     Компоненты исторически ссылаются на эти имена. Здесь они
     переадресованы на утверждённую шкалу — в компонентах хексов нет,
     только var(). Запрещённых из ТЗ имён-хексов среди них нет. */
  --c-primary:      var(--blue-700);
  --c-primary-600:  var(--blue-800);
  --c-primary-700:  var(--blue-800);
  --c-primary-500:  var(--blue-600);
  --c-ink:          var(--blue-900);
  --c-black:        var(--blue-900);
  --c-muted:        var(--muted);
  --c-muted-soft:   var(--muted);
  --c-white:        var(--surface);
  --c-lilac-050:    var(--blue-50);
  --c-lilac-100:    var(--blue-100);
  --c-lilac-150:    var(--blue-200);
  --c-lilac-200:    var(--blue-100);
  --c-lilac-300:    var(--blue-300);
  --c-lilac-400:    var(--line);
  --c-lilac-500:    var(--blue-300);
  --c-lavender:     var(--blue-600);
  --c-blue-lite:    var(--blue-500);
  --sky:            var(--blue-300);
  --lav:            var(--blue-200);
  --lilac:          var(--blue-200);
  --lav-accent:     var(--blue-500);
  --c-coral:        var(--error);
  --c-coral-600:    var(--error);
  --c-yellow:       var(--buff-300);

  /* подложка страницы (видна только в мобильных зазорах) — на палитре */
  --page-bg:        var(--blue-50);

  /* ---------- ТИПОГРАФИКА ---------- */
  --font-main: 'Onest', 'Arial', sans-serif;

  /* line-height задаётся коэффициентом (unitless), а не пикселями — строки
     физически не налезают друг на друга ни на одном кегле (ТЗ 2.1). */
  --h1-size: 72px;  --h1-lh: 1.06; --h1-ls: -0.035em; --h1-weight: 500;
  --h2-size: 56px;  --h2-lh: 1.08; --h2-ls: -0.03em;  --h2-weight: 500;
  --h3-size: 40px;  --h3-lh: 44px;  --h3-ls: -0.02em;  --h3-weight: 500;
  --h4-size: 25px;  --h4-lh: 30px;  --h4-weight: 500;
  --text-lg: 20px;  --text-lg-lh: 27px;
  --text-md: 16px;  --text-md-lh: 22.4px;
  --text-sm: 15px;  --text-sm-lh: 23px;
  --text-xs: 14px;  --text-xs-lh: 19.6px;
  --text-2xs:12px;  --text-2xs-lh: 18.6px;
  --menu-size: 16px; --menu-lh: 21.6px; --menu-weight: 500;

  /* ---------- РАДИУСЫ ---------- */
  --r-pill:   30px;
  --r-btn-sm: 25px;
  --r-card:   40px;
  --r-md:     20px;
  --r-sm:     16px;
  --r-xs:     10px;
  --r-round:  50%;

  /* ---------- СЕТКА ---------- */
  --container: 1200px;
  --gutter-desktop: 60px;
  --gutter-mobile: 20px;

  /* ---------- ДВИЖЕНИЕ ---------- */
  --t-fast:   .2s ease-in-out;
  --t-base:   .3s ease-in-out;
  --t-slow:   .6s cubic-bezier(.25,.1,.25,1);
  --appear-duration: 0.7s;
}