/* ============================================================
   LevioClass · Токены дизайн-системы
   Источник: design_handoff_levioclass_mobile/README.md
   Значения выверены по LevioClass Mobile.dc.html.
   Менять только вместе с handoff.
   ============================================================ */

:root {
  /* ── Цвет · бумага ───────────────────────────────────────── */
  --paper:            #F4F1EA;  /* фон страниц */
  --paper-2:          #EDE9DF;  /* врезки, футер задания */
  --surface:          #FFFFFF;  /* карточки на бумаге */

  /* ── Цвет · чернила ──────────────────────────────────────── */
  --ink:              #12100E;  /* основной текст, тёмные секции, primary */
  --ink-2:            #26241F;  /* длинный текст: читалка, теория */
  --ink-3:            #38352F;  /* лид-абзацы */
  --ink-4:            #4A4740;  /* вторичный текст в карточках */
  --muted:            #6E6A61;  /* подписи на бумаге · контраст 4.78:1 */
  --muted-2:          #7E796D;  /* disabled, «ЗАКР», суммы без начисления */

  /* ── Цвет · акцент ───────────────────────────────────────── */
  --accent:           #E8FF5A;  /* лайм */

  /* ── Цвет · на тёмном ────────────────────────────────────── */
  --on-ink:           #F4F1EA;
  --on-ink-muted:     #A9A49A;  /* 7.65:1 */
  --on-ink-muted-2:   #8C877C;  /* моно-подписи · 4.3:1 */
  --on-ink-disabled:  #7A756B;  /* текст disabled-кнопки на тёмном */
  --ink-border:       #2A2723;  /* границы и незаполненные полосы на тёмном */
  --ink-border-2:     #55514A;  /* видимый сегмент диаграммы на #12100E */
  --ink-alt:          #1E1C15;  /* фон бонусной строки в тёмном списке */

  /* ── Цвет · статусы ──────────────────────────────────────── */
  --moss:             #4A5D3A;  /* сдано / прочитано / начисление «+» */
  --ochre:            #C9902B;  /* просрочено · обложка урока 03 */

  /* ── Цвет · служебное ────────────────────────────────────── */
  --overlay:          rgba(18,16,14,0.45);
  --hairline:         rgba(18,16,14,0.07);
  --hairline-2:       rgba(18,16,14,0.08);
  --hairline-strong:  rgba(18,16,14,0.18);
  --hairline-btn:     rgba(18,16,14,0.20);  /* граница secondary */
  --hairline-btn-2:   rgba(18,16,14,0.22);
  --hairline-chip:    rgba(18,16,14,0.25);  /* граница чипа */
  --divider:          rgba(18,16,14,0.12);  /* зазоры в контейнере-списке */
  --track:            rgba(18,16,14,0.10);  /* незаполненная полоса на бумаге */
  --track-2:          rgba(18,16,14,0.14);
  --accent-soft:      rgba(232,255,90,0.35); /* фон выбранного варианта на бумаге */
  --accent-soft-dark: rgba(232,255,90,0.08); /* фон выбранного варианта на тёмном */

  /* Правило контраста: на бумаге приглушённый текст не светлее #7E796D;
     на #12100E заливки не темнее #55514A, текст не темнее #8C877C. */

  /* ── Шрифты ──────────────────────────────────────────────── */
  --display: 'Space Grotesk', system-ui, sans-serif;   /* заголовки, цифры, кнопки, логотип */
  --sans:    'IBM Plex Sans', system-ui, sans-serif;   /* весь интерфейсный текст */
  --serif:   'IBM Plex Serif', Georgia, serif;         /* только читалка и цитаты родителей */
  --mono:    'IBM Plex Mono', ui-monospace, monospace; /* метки, статусы, даты, номера */

  /* ── Радиусы ─────────────────────────────────────────────── */
  --r-screen:  28px;  /* корпус экрана */
  --r-block:   20px;  /* крупная карточка, тёмный блок */
  --r-block-l: 22px;
  --r-card:    18px;  /* карточка списка */
  --r-btn:     16px;  /* кнопка h52–56, плитка */
  --r-btn-sm:  14px;  /* мелкая кнопка, строка */
  --r-sheet:   24px;  /* шит снизу */
  --r-pill:    999px; /* чип */
  --r-mark:    3px;   /* плашка-выделение в заголовке */
  --r-bar:     3px;   /* полоса прогресса h6 */

  /* ── Отступы ─────────────────────────────────────────────── */
  --pad-x:        20px;  /* горизонтальный паддинг секции */
  --pad-x-reader: 22px;  /* в читалке */
  --gap-card:     10px;  /* между карточками (8–12) */
  --gap-tile:     10px;  /* сетка плиток */

  /* ── Тени · только корпус экрана и sticky-CTA ────────────── */
  --shadow-screen: 0 24px 60px rgba(18,16,14,0.14);
  --shadow-cta:    0 8px 24px rgba(18,16,14,0.16);
}