/* ==========================================================================
   ТОКЕНЫ — единственное место, где меняются цвета, шрифты, отступы.
   Светлая, воздушная тема. Хочешь другой акцент — правь --iris / --pink.
   ========================================================================== */

:root {
  /* --- Фон и поверхности (светлые, не плоско-белые) --- */
  --paper:      #f6f5fb;   /* основной фон страницы */
  --paper-2:    #efedf8;   /* контрастные секции */
  --surface:    #ffffff;   /* карточки */
  --surface-2:  #faf9ff;   /* карточки поверх карточек */

  /* --- Текст --- */
  --ink:        #141019;   /* основной текст */
  --ink-soft:   #47444f;   /* приглушённый текст (сделан контрастнее) */
  --dim:        #6c697a;   /* подписи, тихий текст (сделан контрастнее) */

  /* --- Акценты (живой градиент ирис → розовый, насыщеннее) --- */
  --iris:       #5b45f5;   /* основной акцент (кнопки, градиенты) */
  --iris-ink:   #4a30df;   /* акцент для текста/ссылок (контраст AA на светлом) */
  --pink:       #ff4f97;   /* вторичный акцент */
  --violet:     #9333ff;   /* середина градиента */
  --grad:       linear-gradient(120deg, #5b45f5 0%, #9333ff 45%, #ff4f97 100%);
  --grad-soft:  linear-gradient(120deg, rgba(91,69,245,0.20), rgba(255,79,151,0.18));

  --glow:       rgba(91, 69, 245, 0.32);
  --wash:       rgba(91, 69, 245, 0.10);
  --wash-pink:  rgba(255, 79, 151, 0.10);

  --border:     rgba(20, 16, 25, 0.12);
  --border-mid: rgba(20, 16, 25, 0.20);

  /* --- Шрифты --- */
  --font-display: 'Sora', system-ui, sans-serif;  /* заголовки — лёгкие, элегантные */
  --font-body:    'Inter', system-ui, sans-serif; /* всё остальное */

  /* --- Шкала отступов (нетиповая, с большими скачками) --- */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-6:  24px; --sp-8:  32px; --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px; --sp-32: 128px; --sp-48: 192px;

  /* --- Радиусы --- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-pill: 999px;

  /* --- Easing --- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sine:   cubic-bezier(0.45, 0.05, 0.55, 0.95);

  /* --- Тени (мягкие, многослойные) --- */
  --shadow-sm: 0 1px 2px rgba(23,21,31,0.04), 0 4px 12px rgba(23,21,31,0.05);
  --shadow-md: 0 2px 6px rgba(23,21,31,0.05), 0 14px 34px rgba(23,21,31,0.09);
  --shadow-lg: 0 4px 10px rgba(23,21,31,0.06), 0 28px 60px rgba(90,73,223,0.14);

  --maxw: 1200px;
}