/* ============================================================
   Yesso Academy — design tokens v1
   Источник истины: index.html :root + спека кнопок (сайт),
   parent-assets/app.js + styles.css (семантика приложений).
   Подключать ПЕРВЫМ, до coach.css.
   Имена совпадают с coach.css — после подключения этого файла
   блок :root в coach.css удалить целиком.
   ============================================================ */
:root {
  /* — Ядро бренда (сайт) — */
  --yesso-lime:          #EEFF5A;
  --yesso-lime-deep:     #DFF24A;           /* hover лаймовых поверхностей */
  --yesso-ink:           #070707;           /* единственный «чёрный» бренда */
  --yesso-ink-hover:     #1A1A1A;           /* hover тёмных поверхностей */
  --yesso-muted:         #4A4D5A;           /* вторичный текст (navy-soft) */
  --yesso-paper:         #F1ECE3;           /* фон приложения */
  --yesso-paper-deep:    #E6E0D2;           /* утопленные плоскости, стеки, off-дни */
  --yesso-card:          #FFFFFF;
  --yesso-cream:         var(--yesso-paper);        /* легаси-имя coach.css */
  --yesso-border:        rgba(0, 0, 0, .08);        /* границы карточек */
  --yesso-border-strong: rgba(0, 0, 0, .15);
  --yesso-sunken:        rgba(0, 0, 0, .05);        /* bg-black/[.05] у parent */

  /* — Семантика (parent) — */
  --yesso-green:      #0F7A32;   /* успех, посещение, «все прочитали» */
  --yesso-green-deep: #0F4F22;
  --yesso-red:        #C23A2B;   /* спорт-красный: матчи, absent */
  --yesso-error:      #E5484D;   /* ошибки, каунтеры непрочитанного */
  --yesso-amber:      #C7891E;   /* предупреждения */
  --yesso-red-site:   #A8001F;   /* маркетинговый красный сайта — в кабинетах не использовать */

  /* — Тинты (плашки статусов; хроматика от семантики выше) — */
  --yesso-tint-lime:  rgba(238, 255, 90, .35);
  --yesso-tint-green: rgba(15, 122, 50, .12);
  --yesso-tint-red:   rgba(194, 58, 43, .12);
  --yesso-tint-amber: rgba(199, 137, 30, .16);

  /* — Шрифты — */
  --font-display: 'Archivo', sans-serif;             /* 800–900 */
  --font-body:    'Satoshi', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* — Display-типографика — */
  --display-weight:   900;
  --display-tracking: -0.03em;   /* титры сайта: -0.045em, в кабинетах не нужно */
  --display-leading:  0.94;

  /* — Kicker / mono-лейбл — */
  --kicker-size:     11px;       /* минимум 10px, ниже не опускаться */
  --kicker-tracking: 0.12em;     /* рабочий диапазон .06–.14em */

  /* — Радиусы — */
  --radius-card:  24px;    /* внешние карточки и модалки (rounded-3xl) */
  --radius-inner: 16px;    /* вложенные плитки (rounded-2xl) */
  --radius-tile:  12px;    /* плотные ячейки: календари, поля форм */
  --radius-ctl:   10px;    /* мелкие контролы */
  --radius-pill:  999px;   /* кнопки, табы, бейджи */

  /* — Тени (3 уровня достаточно) — */
  --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, .05);                     /* активный таб */
  --shadow-pop:   0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, .25);
  --shadow-hard:  0 6px 0 var(--yesso-ink);   /* только сайт: btn-lime */

  /* — Spacing (шаг 4) — */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --pad-card: 20px;        /* p-5 у parent */
  --pad-content-x: 32px;

  /* — Кнопки (спека сайта: Satoshi Bold, radius 999) — */
  --btn-height: 44px;  --btn-pad: 14px 32px;   /* маркетинговый масштаб */
  --btn-height-sm: 36px; --btn-pad-sm: 10px 20px; /* рабочий масштаб кабинетов */

  /* — Рабочие поверхности вне палитры (зафиксированные исключения) — */
  --yesso-pitch: #2F7A3E;  /* газон тактической доски: контраст фишек важнее палитры */
}

/* Фирменная текстура фона (сайт .paper-grain / parent .pc-paper).
   Повесить на body кабинета. Нулевая цена по читаемости. */
.yesso-paper-grain {
  background-color: var(--yesso-paper);
  background-image:
    radial-gradient(rgba(0, 0, 0, .022) 1px, transparent 0),
    radial-gradient(rgba(0, 0, 0, .015) 1px, transparent 0);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
}