/* =====================================================================
   ДИЗАЙН-ТОКЕНЫ — единый источник правды по стилю платформы гостя
   Тема: «плюшевый чёрный мех» (кремовый войлок + голубой + розовый).

   Это Слой 1 дизайн-системы. Здесь и ТОЛЬКО здесь задаются цвета,
   типографика, отступы, радиусы и тени. Компоненты (components.css)
   и новые экраны обязаны брать значения отсюда через var(--…),
   а не писать hex/px руками. Меняешь цвет тут — меняется везде.

   Полный гайд: design/DESIGN_SYSTEM.md
   Живой каталог: /static/design-system.html
   ===================================================================== */

:root {
  /* ---- Цвет: фон и поверхности ---- */
  --bg:          #F5EDDE;  /* кремовый войлок, фон приложения */
  --card:        #FFFDF6;  /* карточка/поле */
  --card-soft:   #FBF4E6;  /* мягкая вложенная поверхность */
  --line:        #EADCC4;  /* границы, разделители */
  --line-warm:   #EFE3D0;  /* граница на белом (host-mini) */

  /* ---- Цвет: текст ---- */
  --ink:         #4A3A2E;  /* основной текст */
  --ink-soft:    #776450;  /* вторичный текст, подписи */
  --ink-faint:   #A08F7A;  /* третичный, микроподписи */
  --placeholder: #9C8768;  /* плейсхолдеры полей */

  /* ---- Цвет: голубой акцент (основной бренд) ---- */
  --accent:      #85C7DE;
  --accent-2:    #A5D7E8;  /* светлее, для градиентов */
  --accent-deep: #3E7B93;  /* активные вкладки, тёмный акцент */
  --btn-ink:     #26343B;  /* тёмный текст/иконка на голубом */

  /* ---- Цвет: розовый акцент (тёплый, «подарок/отзыв») ---- */
  --pink:        #EFA8B8;
  --pink-deep:   #A94A62;  /* акцентные подписи, ошибки формы */
  --pink-text:   #A34A62;  /* текст на розовых плашках (соцкнопки) */
  --gift-ink:    #542C39;  /* текст на розовой подушке-подарке */

  /* ---- Цвет: «спасибо/готово» розовый градиент ---- */
  --done-bg-1:   #FDF1F4;
  --done-bg-2:   #F9E5EB;
  --done-line:   #F0CDD8;

  /* тон для теней (тёплый коричневый войлок) */
  --shadow-rgb:  101, 78, 53;

  /* ---- Типографика ---- */
  --font-display: 'Comfortaa', sans-serif;                 /* заголовки */
  --font-body:    'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* текст */

  --text-micro: 9.5px;  /* подписи вкладок */
  --text-2xs:   11px;   /* лейблы капсом, микроподписи */
  --text-xs:    12.5px; /* мелкие подписи, .sub */
  --text-sm:    13.5px; /* вторичный текст в карточках */
  --text-base:  14px;   /* базовый текст, поля */
  --text-md:    15px;   /* акценты в карточках */
  --text-lg:    17px;   /* название в шапке, плеер */
  --text-xl:    21px;   /* заголовок экрана .h2 */
  --text-2xl:   24px;   /* приветственный заголовок */

  --weight-normal: 400;
  --weight-bold:   700;
  --weight-heavy:  800;

  /* ---- Отступы (шаг 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Радиусы ---- */
  --radius-sm:   12px;  /* мелкие плитки (оценка) */
  --radius-md:   18px;  /* поля, инфоплашки */
  --radius:      24px;  /* карточки (основной) */
  --radius-lg:   28px;  /* стеклянный плеер */
  --radius-pill: 999px; /* кнопки, капсулы */

  /* ---- Тени ---- */
  --shadow:      0 10px 22px rgba(var(--shadow-rgb), .13), 0 2px 6px rgba(var(--shadow-rgb), .08);
  --shadow-soft: 0 8px 14px rgba(var(--shadow-rgb), .2);   /* приподнятые иконки */
  --shadow-btn:  0 9px 14px rgba(78, 146, 172, .32);       /* голубая кнопка */

  /* ---- Слои ---- */
  --z-base:  1;
  --z-toast: 30;

  /* ---- Раскладка ---- */
  --screen-max: 520px;  /* максимальная ширина контента (планшет) */
}