/* css/redesign-tokens.css
   Design tokens for the Graphite/Gold redesign (docs/REDESIGN_PLAN.md, Фаза 0.1).
   Prefixed --rd-* so these coexist with the existing admin-editable theme
   tokens in css/theme.css (--bg-color, --primary-color, etc.) without
   overriding them — old and new screens can use either set during the
   phased rollout. Screens are switched over to --rd-* one at a time in
   later phases, not here. */

:root {
  /* ===== Цвета (OKLCH, из docs/redesign_handoff/README.md) ===== */
  --rd-bg: oklch(0.1 0.003 260);
  --rd-panel: oklch(0.16 0.006 260);
  --rd-panel-header: oklch(0.14 0.005 260);
  --rd-border: oklch(0.28 0.006 260);
  --rd-border-gold: oklch(0.3 0.07 85 / 0.4);

  --rd-text: oklch(0.94 0.004 260);
  --rd-text-muted: oklch(0.6 0.006 260);

  --rd-gold: oklch(0.78 0.1 85);
  --rd-on-gold: oklch(0.15 0.01 85);

  --rd-status-new: oklch(0.6 0.14 240);
  --rd-status-pending: oklch(0.65 0.15 55);
  --rd-status-progress: oklch(0.6 0.13 85);
  --rd-status-done: oklch(0.6 0.13 150);
  --rd-status-error: oklch(0.55 0.17 25);
  --rd-status-cancelled: oklch(0.5 0.006 260);

  /* Те же статусные цвета для МЕЛКОГО текста, лежащего на собственной
     тонированной подложке (color-mix(... 16–18%, transparent) — бейджи,
     баннеры). Базовые --rd-status-* подобраны под чистый фон страницы, а своя
     подложка тянет фон в сторону текста, и контраст падает до 2.5–4.0:1 при
     норме 4.5:1 для мелкого текста. Здесь поднят только L, C и H сохранены;
     все четыре значения проверены на попадание в sRGB. Для КРУПНОГО текста
     (плитки-сигналы, 24px) по-прежнему берём базовый токен — ему хватает 3:1. */
  --rd-status-error-on-tint: oklch(0.7 0.17 25);
  --rd-status-pending-on-tint: oklch(0.74 0.15 55);
  --rd-gold-on-tint: oklch(0.82 0.1 85);
  --rd-muted-on-tint: oklch(0.71 0.006 260);

  /* ===== Типографика =====
     Две роли, а не две взаимозаменяемые гарнитуры. Раньше здесь был
     Manrope на ВЕСЬ интерфейс, а в theme.css параллельно жил Inter для
     body и легаси-экранов: два похожих гротеска, разницу между которыми
     на экране не видно, но грузились оба (10 начертаний).

     Теперь роли разведены:
     - --rd-font-family (Inter) — весь UI и текст. Inter рисовался как
       экранный интерфейсный шрифт: он читаемее Manrope на 12–14px, где
       живёт основная масса текста проекта (таблицы админки, формы, чат,
       бейджи), и приносит настоящие tabular-nums для цен и счётчиков.
     - --rd-font-display (Manrope) — только крупное и редкое: логотип,
       заголовки экранов, крупные цены. Его широкие круглые формы дают
       нужный контраст с Inter именно на больших кеглях.

     Правило простое: если текст мельче ~18px — это --rd-font-family.
     Ставить display на мелкий текст нельзя, там он проигрывает Inter и
     контраст ролей пропадает.

     Файлы обеих гарнитур — свои, вариативные, см. css/fonts.css. */
  --rd-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rd-font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ===== Шкала размеров =====
     Раньше в css/ было " 71 " уникальное значение font-size, почти всё —
     em'ы (63 раза 0.85em, 36 раз 0.8em, 28 раз 0.9em). em'ы вдобавок
     перемножаются при вложенности: 0.85em внутри 0.9em даёт 0.765em, и
     реальный кегль переставал быть предсказуемым по коду.

     Ниже — шкала в rem (не зависит от вложенности, масштабируется от
     настройки размера шрифта в браузере). Имена по роли, а не по
     размеру: у --rd-text-xs есть пол в 12px, ниже которого текст просто
     нечитаем, поэтому "сделать ещё чуть мельче" — это не новый токен, а
     повод пересмотреть плотность блока.

     Новый CSS писать на этих токенах. Существующие em-значения
     переезжают постепенно, файл за файлом, с визуальной проверкой
     экрана — разовой заменой по всему css/ вёрстку легко порвать. */
  --rd-text-xs: 0.75rem;    /* 12px — бейджи, подписи; ниже не опускаться */
  --rd-text-sm: 0.8125rem;  /* 13px — вторичный текст, ячейки таблиц */
  --rd-text-base: 0.875rem; /* 14px — базовый UI: кнопки, поля, меню */
  --rd-text-md: 1rem;       /* 16px — текст для чтения, поля ввода на мобильном */
  --rd-text-lg: 1.125rem;   /* 18px — заголовок карточки/панели */
  --rd-text-xl: 1.5rem;     /* 24px — заголовок раздела */
  --rd-text-2xl: 2rem;      /* 32px — заголовок экрана */
  --rd-text-3xl: 2.5rem;    /* 40px — hero главной */

  /* Интерлиньяж по роли: заголовки плотнее, текст свободнее. Значения
     безразмерные — иначе не масштабируются вместе с кеглем. */
  --rd-leading-tight: 1.15;  /* заголовки в 1–2 строки */
  --rd-leading-snug: 1.4;    /* минимум для всего, что переносится на 3+ строки */
  --rd-leading-normal: 1.55; /* текст для чтения */

  /* ===== Форма ===== */
  --rd-radius-card: 16px;
  --rd-radius-pill: 22px;
  --rd-radius-sharp: 3px;

  /* ===== Отступы ===== */
  --rd-space-card: 22px;
  --rd-gap-grid: 16px;
}