/* =============================================================
   WELLNESS DESIGN TOKENS
   Единый источник дизайн-системы mlm34.ru.
   Подключается ПЕРВЫМ во всех шаблонах (через base.html).
   Синтез ТЗ + PDF «Эстетика заботы о себе».
   ============================================================= */

:root {
  /* ───────────── ПАЛИТРА ─────────────
     Отказ от кипельно-белого. Фон — слоновая кость / пудровый.
     Акценты — приглушённая пастель (пыльная роза, шалфей, лаванда). */

  /* Фоны */
  --color-bg:           #FAF6F1;  /* слоновая кость — основной фон */
  --color-bg-elevated:  #FFFFFF;  /* карточки (мягкий белый, не кипельный) */
  --color-bg-muted:     #F2EBE3;  /* приглушённые секции, поля ввода */
  --color-overlay:      rgba(255, 255, 255, 0.72);  /* матовое стекло header */

  /* Пастельные акценты */
  --color-rose:    #D4A5A5;  /* пыльная роза */
  --color-rose-deep: #C08A8A;
  --color-sage:    #A3B18A;  /* шалфей */
  --color-sage-deep: #8FA677;
  --color-lavender: #B8A9C9; /* нежная лаванда */
  --color-clay:    #C9A98E;  /* теплая терракота-керамика (доп.) */

  /* Текст */
  --color-text:         #2E2A26;  /* основной, тёплый графит */
  --color-text-muted:   #8A857E;  /* приглушённый, подписи */
  --color-text-soft:    #B5AFA6;  /* самые тихие подписи */
  --color-on-accent:    #FFFFFF;  /* текст на цветном акценте */
  --color-on-rose:      #6B3B3B;  /* тёмный текст на пыльной розе */

  /* Границы */
  --color-border:       #E8DFD4;  /* тонкая, тёплая */
  --color-border-soft:  #F0E9DF;

  /* Семантика (для inline-SVG в payment_success/expired) */
  --color-success: var(--color-sage);
  --color-error:   var(--color-rose-deep);

  /* ───────────── ТИПОГРАФИКА ─────────────
     Заголовки — элегантный геометрический гротеск, широкий трекинг.
     Набор — чистый читаемый шрифт. Максимум 2 семейства. */
  --font-heading: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Размеры */
  --fs-hero:    clamp(2.5rem, 5vw, 4rem);
  --fs-h1:      clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h2:      clamp(1.4rem, 2.5vw, 1.875rem);
  --fs-h3:      1.25rem;
  --fs-body:    1.0625rem;   /* 17px — для «воздуха» */
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-price:   clamp(1.5rem, 3vw, 2rem);
  --fs-price-big: clamp(2rem, 4vw, 2.75rem);

  /* Трекинг (широкий, «журнальный») */
  --tracking-heading: 0.02em;
  --tracking-wide:    0.18em;   /* для eyebrow-подписей, лого */
  --tracking-tiny:    0.04em;

  /* Высота строк */
  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-body:   1.7;

  /* ───────────── ФОРМЫ ─────────────
     Абсолютно круглые кнопки (pill-shape) или тонкие контуры.
     Никаких острых углов. */
  --radius-pill:   999px;
  --radius-card:   24px;
  --radius-input:  14px;
  --radius-image:  20px;
  --radius-tag:    999px;

  /* ───────────── ТЕНИ (мягкие, размытые) ───────────── */
  --shadow-soft:  0 8px 30px rgba(139, 120, 100, 0.08);
  --shadow-hover: 0 16px 48px rgba(139, 120, 100, 0.14);
  --shadow-card:  0 4px 20px rgba(139, 120, 100, 0.06);

  /* ───────────── АНИМАЦИЯ («текучесть») ─────────────
     Только плавное появление. Резкие всплывающие окна недопустимы. */
  --ease-flow:    cubic-bezier(0.22, 1, 0.36, 1);
  --duration:     400ms;
  --duration-fast: 200ms;
  --duration-slow: 700ms;

  /* ───────────── ПРОСТРАНСТВО («воздух») ───────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.75rem;
  --space-lg:  3rem;
  --space-xl:  5rem;
  --space-2xl: 8rem;

  /* Ширина контента */
  --container-max: 1280px;
  --container-narrow: 760px;

  /* ───────────── Z-INDEX ───────────── */
  --z-header: 100;
  --z-overlay: 200;
}