/* ==========================================================================
   Koch School LMS — Design tokens
   Светлый премиальный монохром. Цвет — только для статусов.
   Переносится в WordPress-тему как есть (CSS custom properties).
   ========================================================================== */

:root {
  /* ---- Палитра: нейтрали ------------------------------------------------ */
  --bg:             #ffffff;   /* фон страницы */
  --surface:        #fafafa;   /* поверхности, подложки */
  --surface-2:      #f5f5f5;   /* поверхности 2-го уровня, hover строк */
  --surface-3:      #eeeeee;   /* нажатое состояние, скелетоны */
  --fg:             #111111;   /* графит — основной текст, primary-кнопка */
  --fg-2:           #6b6b6b;   /* вторичный текст */
  --fg-3:           #9a9a9a;   /* подписи, плейсхолдеры */
  --border:         #e5e5e5;   /* линии */
  --border-strong:  #d4d4d4;   /* линии полей, hover границ */
  --inverse-fg:     #ffffff;   /* текст на графите */
  --inverse-fg-2:   rgba(255, 255, 255, 0.64);

  /* ---- Палитра: статусы (единственный цвет в системе) ------------------ */
  --success:        #1a7f37;
  --success-bg:     #e8f5ec;
  --success-border: #bfe3c8;
  --error:          #c2362f;
  --error-bg:       #fbecea;
  --error-border:   #f0c2be;
  --warning:        #b25e09;
  --warning-bg:     #fdf3e3;
  --warning-border: #f3d7a8;
  --info:           #0d6f84;   /* «на проверке» — сдержанная бирюза */
  --info-bg:        #e4f2f5;
  --info-border:    #b9dde4;

  /* ---- Типографика ------------------------------------------------------ */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   12px;  /* капшены, бейджи */
  --text-sm:   13px;  /* подписи, таблицы плотные */
  --text-md:   15px;  /* основной текст */
  --text-lg:   17px;  /* лид, крупный текст урока */
  --text-h3:   18px;
  --text-h2:   22px;
  --text-h1:   28px;  /* 28–32 */
  --text-h1-lg: 32px;
  --text-kpi:  36px;  /* 32–40 */
  --text-kpi-lg: 40px;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.5;

  --tracking-display: -0.01em;
  --tracking-kpi:     -0.02em;
  --tracking-caps:    0.07em;
  --tracking-label:   0.02em;

  /* ---- Радиусы ---------------------------------------------------------- */
  --r-sm:    0;    /* бейджи, чипы маленькие */
  --r-field: 0;   /* поля */
  --r-btn:   0;   /* кнопки */
  --r-card:  0;   /* карточки */
  --r-modal: 0;   /* модалки */
  --r-full:  0;  /* только аватар и прогресс-трек */

  /* ---- Тени (почти отсутствуют) ----------------------------------------- */
  --shadow-none: none;
  --shadow-pop:  0 8px 24px rgba(17, 17, 17, 0.08), 0 1px 2px rgba(17, 17, 17, 0.06);  /* dropdown */
  --shadow-modal: 0 24px 64px rgba(17, 17, 17, 0.14), 0 2px 6px rgba(17, 17, 17, 0.06); /* модалки */

  /* ---- Отступы (базис 4px) ---------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- Сетка и оболочка ------------------------------------------------- */
  --sidebar-w:       280px;
  --sidebar-w-collapsed: 72px;
  --topbar-h:        64px;
  --tabbar-h:        64px;
  --content-max:     1200px;  /* рабочая ширина контента сотрудника */
  --reading-max:     720px;   /* максимальная ширина текстового контента ученика */
  --page-pad:        32px;
  --page-pad-mobile: 16px;
  --row-h-dense:     44px;    /* строки таблиц сотрудников */
  --row-h-airy:      56px;
  --tap-min:         44px;    /* тач-зона */

  /* ---- Движение --------------------------------------------------------- */
  --ease:       cubic-bezier(0.23, 1, 0.32, 1);
  --dur-in:     200ms;
  --dur-out:    140ms;
  --dur-fast:   120ms;

  /* ---- Фокус ------------------------------------------------------------ */
  --focus-ring: 2px solid var(--fg);
  --focus-offset: 2px;

  /* ---- Слои ------------------------------------------------------------- */
  --z-sticky:   10;
  --z-dropdown: 30;
  --z-drawer:   40;
  --z-modal:    50;
  --z-toast:    60;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-in: 1ms;
    --dur-out: 1ms;
    --dur-fast: 1ms;
  }
}