/* service/web/tokens.css
   ПАЛИТРА И ШРИФТЫ — ОДНО МЕСТО НА ВЕСЬ СЕРВИС.

   Отсюда берут цвета и сайт (site.css), и конструктор (style.css). Две копии
   палитры неизбежно разошлись бы, и сайт с конструктором выглядели бы как два
   разных продукта — ровно то, чего этот файл и не допускает.

   Чего здесь НЕТ и почему: переменных --qf-*. Это палитра самого материала
   (src/themes/default.css), и предпросмотр обязан рисоваться именно ей — иначе
   учитель увидит не то, что получит ученик. Сервис оформляет СВОЁ окружение;
   окно в материал остаётся материалом.
   ========================================================================= */

:root {
  --bg-paper: #FAF7F2;      /* фон контентных секций */
  --ink: #2A2438;           /* текст, тёмные блоки вместо чёрного */
  --accent-coral: #FF6F59;  /* основной акцент / CTA */
  --accent-mint: #3EC1B3;   /* "верный ответ", позитивная обратная связь */
  --accent-amber: #F4B942;  /* мелкие детали, бейджи */

  /* Свои шрифты (см. fonts.css) с системным запасным вариантом: если файл не
     доехал, страница остаётся читаемой, а не пустой. */
  --font-heading: 'Literata', Georgia, "Times New Roman", serif;
  --font-body: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
/* =========================================================================
   Проверкин — лендинг
   Палитра и шрифты берутся из tokens.css. Здесь только производные значения
   (полупрозрачные оттенки, тени), выведенные из тех же токенов через
   color-mix, — чтобы смена цвета в tokens.css меняла всю страницу целиком.
   ========================================================================= */

:root {
  /* Производные от --ink */
  --ink-80: color-mix(in srgb, var(--ink) 80%, transparent);
  --ink-65: color-mix(in srgb, var(--ink) 65%, transparent);
  --ink-45: color-mix(in srgb, var(--ink) 45%, transparent);
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 20%, transparent);

  /* Поверхности */
  --surface: #FFFFFF;
  --surface-soft: color-mix(in srgb, var(--bg-paper) 55%, #FFFFFF);

  /* Акценты в мягких заливках */
  --mint-soft: color-mix(in srgb, var(--accent-mint) 16%, #FFFFFF);
  --mint-line: color-mix(in srgb, var(--accent-mint) 62%, transparent);
  --coral-soft: color-mix(in srgb, var(--accent-coral) 12%, #FFFFFF);

  --shadow-soft:
    0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
    0 16px 44px -20px color-mix(in srgb, var(--ink) 34%, transparent);
  --shadow-lift:
    0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
    0 26px 60px -22px color-mix(in srgb, var(--ink) 38%, transparent),
    0 0 0 4px color-mix(in srgb, var(--accent-mint) 10%, transparent);

  --radius-lg: 22px;
  --radius-md: 12px;

  --ease-out: cubic-bezier(0.22, 0.8, 0.3, 1);
  --ease-pop: cubic-bezier(0.2, 1.35, 0.4, 1);
}