/*
 * Транскрипт · Design Code v.03 — единый набор токенов (TRAN-199).
 *
 * Один :root на весь продукт. Подключается ДО собственного CSS каждого источника:
 * base.html (кабинет/админка/авторизация), record/index.html, legal/privacy_policy.html
 * и лендинг. Имена канонические — как в приложении: --color-*, --font-*, --border-*.
 *
 * Раздел «Канон» ниже воспроизводит машиночитаемый контракт Design Code v.03
 * (Confluence TRAN/6619138, раздел 1). Ниже него — app-специфичные токены, которых
 * в каноне нет, но которые нужны приложению (медиаплеер, длительности, тени карточек).
 * Здесь не должно быть ничего, кроме объявления токенов.
 */
:root {
  /* 02 · Поверхности */
  --color-paper: #ece2cc;        /* фон всего продукта */
  --color-surface: #f4eddc;      /* вторичная поверхность, шапки таблиц */
  --color-paper-deep: #dcd1b8;   /* углубление, разделительные полосы */
  --color-page: #fbf8f0;         /* карточка, инкрустированная пластина */
  --color-page-bright: #ffffff;  /* ТОЛЬКО поля ввода в фокусе */

  /* 02 · Текст (контраст на paper) */
  --color-ink: #1c1a18;          /* 13.48:1 */
  --color-ink-2: #3c3730;        /*  9.16:1 */
  --color-mute: #6b5f4c;         /*  4.85:1 */

  /* 02 · Акцент */
  --color-rubric: #922a20;       /* действие, фокус, состояние — и ничего больше */
  --color-rubric-hover: #6e1e18;
  --color-rubric-tint: #e8d2c8;

  /* 02 · Статусы */
  --color-success: #5e6b2f;
  --color-warning: #b5891f;      /* только заливка, не текст */
  --color-info: #2f4e5e;
  --color-error: #922a20;        /* равен rubric */

  /* 02 · Спикеры */
  --color-speaker-1: #922a20;
  --color-speaker-2: #5e6b2f;
  --color-speaker-3: #7a4a2b;
  --color-speaker-4: #2f4e5e;
  --color-speaker-5: #786c58;    /* только заливка, не текст */

  /* 02 · Тёмная поверхность (контраст на ink) */
  --color-ink-surface: #1c1a18;
  --color-on-ink: #cfc6b2;       /* 10.22:1 */
  --color-on-ink-mute: #9a9084;  /*  5.53:1 */
  --color-rubric-on-ink: #e8b4a8;/*  9.52:1 — замена rubric на тёмном */

  /* 02 · Линии. Единственный источник правды — альфа от ink */
  --hairline: 1px;
  --border-soft: var(--hairline) solid rgba(28, 26, 24, 0.2);
  --border-medium: var(--hairline) solid rgba(28, 26, 24, 0.18);
  --border-strong: var(--hairline) solid rgba(28, 26, 24, 0.28);
  --color-hairline: #c8bca2;     /* только там, где альфа недопустима: цветные подложки, экспорт */

  /* 03 · Гарнитуры */
  --font-display: "Jura", system-ui, sans-serif;                       /* заголовки, кнопки, логотип */
  --font-sans: "Golos Text", system-ui, -apple-system, sans-serif;     /* чтение, транскрипт, тело */
  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", ui-monospace, monospace; /* таймкоды, капс */

  /* 03 · Трекинг капса — обратно пропорционален кеглю. 0.10em и 0.12em не используются.
     Капс 11px — 0.11em, нижняя граница ряда, отдельного токена нет. */
  --track-caps-1: 0.14em;        /* капс 12–13px */
  --track-caps-2: 0.16em;        /* капс 14–15px */
  --track-caps-3: 0.18em;        /* капс от 16px */

  /* 03 · Отрицательный трекинг — одно значение, только заголовки от 26px */
  --track-display: -0.01em;

  /* 04 · Шкала альфы — промежуточных ступеней нет */
  --alpha-hover: 0.04;
  --alpha-press: 0.08;
  --alpha-field: 0.03;

  /* 04 · Радиусы */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-full: 50%;

  /* 05 · Каркас — общий для кабинета и лендинга */
  --header-height: 52px;
  --sidebar-width: 220px;
  --right-panel-width: 296px;
  --container: 1280px;
  --section-pad: clamp(36px, 3.6vw, 48px);  /* только промо-секции */

  /* 07 · Движение */
  --duration-base: 200ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-popover: 0 4px 14px rgba(28, 26, 24, 0.08);

  /* ── App-специфичные токены (в каноне их нет; нужны приложению) ────────────── */
  --border-dotted: var(--hairline) dotted rgba(28, 26, 24, 0.16);
  --border-rubric: var(--hairline) solid rgba(146, 42, 32, 0.4);
  --shadow-card: 0 1px 2px rgba(28, 26, 24, 0.06);
  --duration-fast: 120ms;
  --player-height: 60px;
}

/*
 * 08 · На обычном (не-Retina) экране волосяная линия толще и темнее; на >=1.5dppx
 * восстанавливаем тонкую 0.5px линию. Канон трогает только --hairline и --border-soft.
 * App-специфичные --border-dotted/-rubric/-shadow-card сохраняют своё Retina-поведение
 * (TRAN-106), чтобы рефайнмент не регрессировал.
 */
@media (min-resolution: 1.5dppx) {
  :root {
    --hairline: 0.5px;
    --border-soft: var(--hairline) solid rgba(28, 26, 24, 0.12);
    --border-dotted: var(--hairline) dotted rgba(28, 26, 24, 0.1);
    --border-rubric: var(--hairline) solid rgba(146, 42, 32, 0.3);
    --shadow-card: 0 1px 0 rgba(28, 26, 24, 0.03);
  }
}

/* 05 · Каркас: более широкий контейнер на больших экранах. */
@media (min-width: 1720px) {
  :root {
    --container: 1440px;
  }
}

/* 05 · Каркас: на узких экранах шапка ниже (app-специфично, перенесено из app.css). */
@media (max-width: 560px) {
  :root {
    --header-height: 48px;
  }
}

/*
 * 07 · Движение: ОДИН блок prefers-reduced-motion на весь проект (TRAN-199). tokens.css
 * подключается ко всем источникам, поэтому он гасит движение и в кабинете, и на /record,
 * и в чате, и на лендинге. Near-zero (не `none`), чтобы код, ждущий animationend/
 * transitionend, продолжал срабатывать.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}