/*
  Токены оформления Roxy-repetitor.

  ОБ ИСТОЧНИКЕ — прочитать до использования. Страницы с дизайн-системой
  в папке «Прототип» нет: поиск по всем файлам на «дизайн-систем», «токен»,
  «палитра», `:root`, `--color` не дал ни одного совпадения, а из шести
  файлов `.dc.html` два пустые и один — карта связей. Поэтому значения ниже
  сняты с двух собранных экранов прототипа — «Roxy-repetitor Landing.dc.html»
  и «Roxy-repetitor форма записи.dc.html», где они лежат в инлайновых стилях, —
  и сверены с паспортом продукта (раздел 6 «Бренд и визуальный стиль»).

  Ни одно значение не подобрано и не придумано: каждое встречается в исходниках.

  Файл в два слоя. Сырая палитра — это источник, в вёрстке её имена
  использовать не нужно. Верстать следует смысловыми токенами из второго
  блока: они называют роль, а не цвет, и меняются в одном месте.

  Чего в источнике нет — перечислено в конце файла. Эти токены не заведены
  намеренно: подбирать под них похожие значения нельзя.
*/

:root {
  /* === СЫРАЯ ПАЛИТРА (источник, в вёрстке не использовать) ============== */

  /* --- Нейтральная шкала, от тёмного к светлому ------------------------- */
  --color-neutral-900: #14202E;   /* основной текст */
  --color-neutral-700: #5A6E7F;   /* вторичный текст */
  --color-neutral-500: #9AA7B2;   /* текст неактивной кнопки */
  --color-neutral-400: #B7C0C9;   /* прошедшая дата в календаре */
  --color-neutral-300: #E4E9EF;   /* границы и разделители */
  --color-neutral-200: #E8E8EE;   /* фон неактивной кнопки */
  --color-neutral-100: #F5F9FC;   /* фон страницы */
  --color-neutral-50:  #F5FAFD;   /* фон вложенного блока */
  --color-neutral-0:   #FFFFFF;   /* белый */

  /* --- Синий: фирменный цвет и ссылки ----------------------------------- */
  --color-blue-500: #00A9EE;      /* начало фирменного градиента */
  --color-blue-600: #009FE3;      /* ссылка */
  --color-blue-700: #0089CC;      /* ссылка под курсором, конец градиента */
  --color-blue-300: #33B5EA;      /* ссылка на тёмном фоне */
  --color-blue-100: #BFE4F5;      /* светло-голубая подложка */
  --color-blue-50:  #EAF7FF;      /* вторичный текст на тёмном фоне */

  /* --- Тёмно-синий: акцентные блоки ------------------------------------- */
  --color-navy-900: #0C2233;      /* тёмный блок, подложка CTA */
  --color-navy-800: #16304A;      /* вложенный блок внутри тёмного */

  /* --- Фиолетовый: кнопки и CTA ----------------------------------------- */
  --color-purple-500: #C264F0;    /* кнопка на лендинге */
  --color-purple-700: #AD4CDB;    /* кнопка под курсором */

  /*
    Красный. В прототипе его нет ни одного — добавлен по отдельному решению
    владельца проекта для выхода из аккаунта. Тон подобран к палитре: та же
    мягкость, что у фиолетового, и достаточный контраст на белой карточке.
  */
  --color-red-500: #E05353;       /* обводка и текст кнопки выхода */
  --color-red-700: #C43C3C;       /* она же под курсором */
  --color-red-50:  #FDEFEF;       /* лёгкая заливка под курсором */
  /* Ещё два фиолетовых из прототипа смыслового имени не получили: #C04FE0
     (кнопка в форме записи) и #AD3ECE (её ховер) — это вторые версии тех же
     двух ролей, см. «Расхождения» в конце файла. В вёрстку они не идут,
     поэтому здесь не объявлены: хранить цвет, которым ничего не красят,
     значит предлагать выбор там, где нужно решение. */

  /* === СМЫСЛОВЫЕ ТОКЕНЫ (этими верстать) =============================== */

  /* --- Текст ------------------------------------------------------------ */
  --color-text-primary: var(--color-neutral-900);   /* заголовки и абзацы */
  --color-text-secondary: var(--color-neutral-700); /* подписи, описания */
  --color-text-inverse: var(--color-neutral-0);     /* текст на тёмном фоне */
  --color-text-disabled: var(--color-neutral-500);  /* недоступное действие */
  --color-text-inverse-secondary: var(--color-blue-50); /* подпись на тёмном фоне */
  --color-date-past: var(--color-neutral-400);      /* прошедший день в календаре */
  --color-link: var(--color-blue-600);
  --color-link-hover: var(--color-blue-700);
  --color-link-inverse: var(--color-blue-300);      /* ссылка на тёмном фоне */

  /* --- Фон и поверхности ------------------------------------------------ */
  --color-background: var(--color-neutral-100);       /* фон страницы */
  --color-surface: var(--color-neutral-0);            /* карточки, поля, шапка */
  --color-surface-subtle: var(--color-neutral-50);    /* блок внутри карточки */
  --color-surface-inverse: var(--color-navy-900);     /* тёмные блоки, футер */
  --color-surface-inverse-alt: var(--color-navy-800); /* блок внутри тёмного */
  --color-surface-accent: var(--color-blue-100);      /* вторичная подложка */
  --color-surface-brand: var(--color-blue-600);       /* секция, залитая фирменным синим */

  /* --- Границы ---------------------------------------------------------- */
  --color-border: var(--color-neutral-300);                  /* поля, слоты, разделители */
  --color-border-inverse: rgba(255, 255, 255, 0.5);          /* граница на тёмном */

  /* --- Кнопки ----------------------------------------------------------- */
  --color-button: var(--color-purple-500);
  --color-button-hover: var(--color-purple-700);
  --color-button-text: var(--color-neutral-0);
  --color-button-disabled: var(--color-neutral-200);
  --color-button-disabled-text: var(--color-neutral-500);

  /* Выход из аккаунта: обводка, а не заливка — действие заметное, но не главное. */
  --color-danger: var(--color-red-500);
  --color-danger-hover: var(--color-red-700);
  --color-danger-surface: var(--color-red-50);

  /* --- Фирменный градиент (шапка, хиро) --------------------------------- */
  --color-gradient-from: var(--color-blue-500);
  --color-gradient-to: var(--color-blue-700);

  /* --- Шрифт ------------------------------------------------------------ */
  --font-family: 'Onest', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Размеры текста --------------------------------------------------- */
  /* Роль каждого размера определена по тому, где он употреблён на экране. */
  --font-size-hero: 60px;           /* заголовок лендинга, 700 */
  --font-size-step-num: 56px;       /* номер шага в блоке «Как проходят занятия», 700 */
  --font-size-section-title: 40px;  /* заголовок раздела, 700 */
  --font-size-cabinet-title: 44px;  /* заголовок кабинета «Мои записи», 700 */
  --font-size-page-title: 36px;     /* заголовок экрана записи, 700 */
  --font-size-subhead: 28px;        /* заголовок пустого состояния, 700 */
  --font-size-logo: 24px;           /* логотип в шапке, 700 */
  --font-size-card-title: 22px;     /* заголовок карточки, 600 */
  --font-size-lead: 20px;           /* подзаголовок под хиро, 500 */
  --font-size-cta: 18px;            /* крупная кнопка формы записи, 700 */
  --font-size-body-lg: 17px;        /* меню, крупные кнопки */
  --font-size-button: 16px;         /* кнопка, 600 */
  --font-size-body: 15px;           /* основной текст */
  --font-size-small: 14px;          /* подписи, мелкие ссылки */
  --font-size-tag: 13px;            /* тег репетитора, метка «Популярный» */

  /* --- Скругления ------------------------------------------------------- */
  --radius-card: 12px;    /* карточка, поле, блок */
  --radius-card-lg: 16px; /* блок вопроса в списке «Частые вопросы» */
  --radius-panel: 20px;   /* панель формы записи */
  --radius-block: 24px;   /* крупный блок, секция */
  --radius-control: 10px; /* день календаря */
  --radius-pill: 999px;   /* кнопка-таблетка, слот времени, тег */
  --radius-circle: 50%;   /* аватар, круглая иконка */
}

/*
  ЧЕГО В ИСТОЧНИКЕ НЕТ — токены не заведены.

  1. Цвет ошибки и цвет успеха. В обоих экранах прототипа нет ни одного
     красного или зелёного цвета: вся палитра — синие, фиолетовые, серые.
     Состояний «ошибка» и «успех» прототип не рисует. Экран подтверждения
     записи показывает галочку тем же фиолетовым, что и кнопки.

  2. Шкала отступов. Отступы шкалы не образуют: встречаются 2, 4, 6, 8, 10,
     12, 14, 16, 18, 20, 24, 28, 32, 36 px — почти каждое чётное число.
     Выбрать из них «шаг» значило бы придумать то, чего в источнике нет.

  3. Толщина границы. Есть 1px и 2px, а также декоративные 14px, 20px, 26px
     у колец вокруг фотографий. Правила, когда какая, нет.

  4. Тени. Три разных значения box-shadow, каждое под свой элемент.

  5. Межстрочный интервал. Встречаются 1.2, 1.4, 1.5, 1.55 — привязаны
     к отдельным блокам, а не к размерам текста.

  ДОБАВЛЕНО ПРИ ВЁРСТКЕ ЛЕНДИНГА.

  Пять токенов заведены позже остальных: их значения в прототипе были, а в
  первую версию файла не попали — нашлись, когда лендинг собрали целиком.
  Подобранного среди них нет ни одного, каждое взято из исходника.

  - --font-size-hero (60px), --font-size-step-num (56px), --font-size-logo
    (24px). Три кегля лендинга: заголовок хиро, номер шага, логотип в шапке.
  - --radius-card-lg (16px). Скругление блока вопроса в списке «Частые
    вопросы». Между уже описанными 12px и 24px, но это не промежуточное
    значение «на глаз»: именно 16px стоит в прототипе.
  Ещё шесть — при вёрстке записи и кабинета, все из «Roxy-repetitor форма
  записи.dc.html»: --font-size-page-title (36px, «Запись на урок»),
  --font-size-cabinet-title (44px, «Мои записи»), --font-size-subhead (28px,
  «У вас пока нет записей»), --font-size-cta (18px, «Подтвердить запись»),
  --radius-panel (20px, панель с календарём) и --radius-control (10px, день
  календаря).

  - --color-surface-brand. Сплошная заливка секции «Как проходят занятия»
    цветом #009FE3. Этот цвет в файле уже был — как --color-blue-600, то
    есть цвет ссылки. Роли «фон секции» у него не было, а красить фон
    токеном с именем ссылки значит потерять смысл имени.

  РАСХОЖДЕНИЯ ВНУТРИ ИСТОЧНИКА — требуют решения, а не выбора наугад.

  - Фиолетовый кнопки: на лендинге #C264F0, в форме записи #C04FE0. Оба цвета
    названы в паспорте (раздел 6) через дробь. Взят #C264F0 — он на лендинге
    и встречается чаще; #C04FE0 в файле не объявлен.
  - Фиолетовый под курсором: #AD4CDB (3 употребления) и #AD3ECE (1).
    Взят #AD4CDB; #AD3ECE в файле не объявлен.
  - Фон: #F5F9FC и #F5FAFD различаются на один пункт яркости. Разведены
    как фон страницы и фон вложенного блока — по месту употребления.
  - Серый неактивного: #9AA7B2 у текста кнопки и #B7C0C9 у прошедших дней
    календаря. В смысловой токен взят первый; второй остался в сырой палитре.
*/