/* =============================================================
   RADI · дизайн-токены
   -------------------------------------------------------------
   Задача stage-1/10. Токены описывают то, что УЖЕ используется
   в main.css: значения собраны по частотности, редкие единичные
   отклонения в токены не выносились.

   Правила:
   · токен добавляется, если значение встречается в main.css 5+ раз;
   · существующий CSS не переписывается — литералы заменяются на
     переменные постепенно, по мере того как задачи трогают блоки;
   · компоненты красятся через семантическое имя (--accent),
     а не через имя темы (--color-violet);
   · --main-color остаётся точкой входа и работает как раньше.

   Справка по применению: tasks/todo/stage-1/design-tokens.md
   Файл подключается в HEAD.html перед main.min.css.
   ============================================================= */

body {

  /* --- Палитра ------------------------------------------------
     Три фирменных цвета — это темы страниц, а не роли.
     Роль задаётся ниже через --accent.                          */
  --color-blue:        #566fff;   /* базовая тема, 45 вхождений  */
  --color-violet:      #a86cef;   /* страницы услуг, 43          */
  --color-sky:         #4cbcfb;   /* КТ, 32                      */

  /* --- Нейтральные -------------------------------------------- */
  --color-white:       #ffffff;   /* 94 */
  --color-black:       #000000;   /* 19 */
  --color-bg:          #f2f2f2;   /* фон страниц и полей, 38     */
  --color-ink:         #000000;   /* основной текст              */
  --color-ink-soft:    #333333;   /* вторичный текст, 10         */
  --color-gray:        #666666;   /* подписи, 4                  */
  --color-gray-light:  #999999;   /* плейсхолдеры, 6             */
  --color-line:        #eeeeee;   /* фон при наведении, 5        */
  --color-border:      #e0e0e0;   /* границы контролов, 4        */
  --color-border-soft: rgba(196, 196, 196, 0.7);  /* строки прайса */
  --color-overlay:     rgba(0, 0, 0, 0.5);        /* подложка модалок */

  /* --- Состояния ----------------------------------------------
     Ошибка — существующий цвет валидации формы.
     Успех вводится впервые: до сих пор состояния успеха
     в стилях не было.                                          */
  --color-error:       #ff4e17;
  --color-success:     #2f9e6b;
  --color-focus:       #1a73e8;   /* видимый фокус с клавиатуры  */

  /* --- Фирменный градиент (класс .gradient) ------------------- */
  --gradient-brand: linear-gradient(263.16deg, #7604ff -24.54%, #2450ea 48.41%, #00a9ff 134.62%);

  /* --- Семантика: тема страницы -------------------------------
     --main-color переопределяется классом на body (см. ниже).
     Компоненты используют --accent и производные от него.       */
  --main-color:        var(--color-blue);
  --accent:            var(--main-color);
  --accent-contrast:   var(--color-white);
  --accent-hover:      #4257e6;   /* тёмный оттенок темы         */
  --accent-soft:       #eef0ff;   /* светлая подложка темы       */

  /* --- Типографика --------------------------------------------
     Шкала оцифрована с существующих классов .h1….text-12.       */
  --font-base:   'Raleway', sans-serif;
  --fs-64:       64px;   /* .h1                                  */
  --fs-48:       48px;   /* .h2                                  */
  --fs-40:       40px;   /* .h1 на планшете                      */
  --fs-36:       36px;   /* .h3                                  */
  --fs-24:       24px;   /* .h4, заголовки аккордеона            */
  --fs-20:       20px;
  --fs-18:       18px;   /* .text-18                             */
  --fs-16:       16px;   /* .text-16, базовый                    */
  --fs-14:       14px;   /* .text-14, кнопки                     */
  --fs-12:       12px;   /* .text-12, подписи                    */

  --lh-tight:    1.2;    /* заголовки                            */
  --lh-base:     1.4;    /* основной текст                       */
  --lh-loose:    1.6;    /* длинные абзацы                       */

  /* --- Отступы ------------------------------------------------
     Сетка проекта кратна 5px — шкала собрана по фактическому
     использованию, а не по «правильному» шагу 4px.              */
  --space-5:     5px;
  --space-10:    10px;
  --space-15:    15px;
  --space-20:    20px;
  --space-25:    25px;
  --space-30:    30px;
  --space-35:    35px;   /* внутренний отступ блоков контента    */
  --space-40:    40px;
  --space-50:    50px;
  --space-60:    60px;
  --space-100:   100px;  /* между секциями                       */
  --space-150:   150px;  /* между крупными секциями на десктопе  */

  /* --- Радиусы ------------------------------------------------ */
  --radius-xs:     4px;
  --radius-sm:     8px;
  --radius-md:     10px;
  --radius-lg:     20px;
  --radius-pill:   28px;   /* .round-button-arrow                */
  --radius-circle: 50%;

  /* --- Тени --------------------------------------------------- */
  --shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 20px 40px rgba(0, 0, 0, 0.06);
  --shadow-bar: 0 -2px 16px rgba(20, 20, 45, 0.12);  /* нижний бар */

  /* --- Движение -----------------------------------------------
     0.25s — фактический стандарт проекта (107 вхождений).       */
  --dur-fast:  0.2s;
  --dur:       0.25s;
  --dur-slow:  0.5s;
  --ease:      ease-in-out;

  /* --- Размеры интерфейса ------------------------------------- */
  --container-max:   1260px;
  --container-pad:   var(--space-30);
  --tap-min:         44px;   /* минимальная зона нажатия          */
  --mobile-bar-h:    64px;   /* фиксированный нижний бар          */
  --z-header:        10;
  --z-mobile-bar:    60;
  --z-backdrop:      100;
}

/* -------------------------------------------------------------
   Темы страниц. Механика прежняя: класс на body.
   Переопределяются только цвет темы и его производные —
   всё остальное наследуется.
   ------------------------------------------------------------- */

body.pink {
  --main-color:   var(--color-violet);
  --accent-hover: #9455dd;
  --accent-soft:  #f6f0fd;
}

body.light-blue {
  --main-color:   var(--color-sky);
  --accent-hover: #2ea6e8;
  --accent-soft:  #edf8ff;
}

/* -------------------------------------------------------------
   Брейкпоинты — в CSS-переменных не работают, держим справочно:
   1200px и выше  — десктоп
   1024–1199px    — узкий десктоп
   768–1023px     — планшет
   до 767px       — мобильный (нижний бар, sticky-шапка)
   360px          — минимальная проверяемая ширина
   ------------------------------------------------------------- */