/* ============================================================
   BeauTips — Дизайн-токены (единый источник правды)
   Блок 1 · Быстрые победы.
   Подключать ПЕРВЫМ, до base.css и страничных стилей.
   Правила: только :root-переменные, без селекторов вёрстки,
   чтобы подключение было полностью аддитивным и ничего не ломало.
   ============================================================ */

:root {
  /* ---------- Шрифты ---------- */
  --font-main: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Unbounded", var(--font-main);

  /* ---------- Палитра: бренд (единая синяя шкала) ---------- */
  --c-brand-50:  #EEF4FF;
  --c-brand-100: #E8EEF8;
  --c-brand-200: #CCDAF4;
  --c-brand-300: #B8CCEE;
  --c-brand-400: #8AAAE5;
  --c-brand-500: #6E90D0;
  --c-brand-600: #486AAB;
  --c-brand-700: #15427D;
  --c-brand-800: #173B6C;
  --c-brand-900: #0E1A2B;

  /* ---------- Палитра: нейтральные ---------- */
  --c-white:    #FFFFFF;
  --c-cream:    #FBFBF3;
  --c-gray-50:  #F8FAFC;
  --c-gray-100: #F1F5F9;
  --c-gray-200: #E5E7EB;
  --c-gray-300: #D1D5DB;
  --c-gray-400: #94A3B8;
  --c-gray-500: #64748B;
  --c-gray-600: #4B5563;
  --c-gray-700: #374151;
  --c-gray-900: #111827;

  /* ---------- Палитра: семантика ---------- */
  --c-success:      #15803D;
  --c-success-soft: #DCFCE7;
  --c-warning:      #B45309;
  --c-warning-soft: #FEF3C7;
  --c-danger:       #E11D48;
  --c-danger-soft:  #FFE4E6;
  --c-info:         #2563EB;
  --c-info-soft:    #DBEAFE;

  /* ---------- Семантические алиасы (использовать в вёрстке) ---------- */
  --color-bg:           var(--c-cream);
  --color-surface:      var(--c-white);
  --color-surface-2:    var(--c-brand-50);
  --color-surface-sunken: var(--c-gray-50);

  --color-brand:        var(--c-brand-600);
  --color-brand-strong: var(--c-brand-700);
  --color-brand-hover:  var(--c-brand-700);
  --color-brand-active: #0F335F;
  --color-brand-soft:   var(--c-brand-100);
  --color-accent:       var(--c-brand-500);
  --color-on-brand:     var(--c-white);

  --color-ink:          var(--c-brand-800);
  --color-text:         var(--c-brand-800);
  --color-text-muted:   var(--c-gray-500);
  --color-text-subtle:  var(--c-gray-400);
  --color-text-on-dark: var(--c-white);

  --color-border:       var(--c-gray-200);
  --color-border-strong: var(--c-gray-300);
  --color-border-brand: rgba(72, 106, 171, 0.18);

  --color-success: var(--c-success);
  --color-warning: var(--c-warning);
  --color-danger:  var(--c-danger);
  --color-info:    var(--c-info);

  /* ---------- Градиенты (единый бренд-акцент) ---------- */
  --gradient-brand:      linear-gradient(135deg, var(--c-brand-700) 0%, var(--c-brand-500) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--c-brand-500) 0%, var(--c-brand-400) 100%);

  /* ---------- Отступы (база 4px) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Радиусы ---------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---------- Тени ---------- */
  --shadow-xs:    0 1px 2px rgba(14, 26, 43, 0.06);
  --shadow-sm:    0 2px 8px rgba(14, 26, 43, 0.08);
  --shadow-md:    0 8px 24px rgba(14, 26, 43, 0.12);
  --shadow-lg:    0 18px 48px rgba(23, 59, 108, 0.18);
  --shadow-brand: 0 10px 25px rgba(72, 106, 171, 0.35);

  /* ---------- Типографическая шкала ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Фокус (доступность) ---------- */
  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;
  --focus-ring-color:  rgba(110, 144, 208, 0.65);

  /* ---------- Переходы ---------- */
  --transition-fast: 0.15s ease;
  --transition:      0.25s ease;
  --transition-slow: 0.4s ease;

  /* ---------- Кнопки (производные токены) ---------- */
  --btn-primary-bg:        var(--color-brand);
  --btn-primary-bg-hover:  var(--color-brand-hover);
  --btn-primary-bg-active: var(--color-brand-active);
  --btn-primary-fg:        var(--color-on-brand);
  --btn-radius:            var(--radius-pill);
  --btn-disabled-opacity:  0.55;
}