/* =============================================================================
   «Паналап»: дизайн-система v2 (направление 02 «Отрывной листок», раскладка C
   «Билет с корешком», решение совета 2026-10-23). Слой 1 из 7: токены.

   Порядок подключения в base.html фиксирован:
     tokens → base → layout → components → donor → shelter → operator.
   Здесь только пользовательские свойства: никаких правил для элементов.
   CSP: style-src 'self', без inline-стилей, @import и внешних адресов.

   Брейкпоинты (в media query custom properties не работают, значения повторяются):
     390  — база (мобильный, кадр 02)
     768  — планшет: корешок билета переезжает вправо, включается навигация в шапке
     1024 — десктоп: многоколоночные раскладки, лента-билет заходит на следующий раздел
     1440 — широкий: крупнее поля страницы и заголовки (через clamp и --gutter)
   ============================================================================= */

:root {
  /* ---------- Цвет: палитра 02 + служебные роли ---------- */
  --ink: #1c1c1c;
  --ink-2: #3f3c14;          /* вторичный текст на жёлтом, оттенок листка (9,16:1) */
  --muted: #55584f;          /* вторичный текст: 7,25:1 на белом, 5,93:1 на --ground */
  --paper: #ffffff;
  --ground: #e7e9e4;         /* фон рабочих экранов: холодно-серый */
  --ground-2: #d9dbd5;       /* линии, разделители, нажатая строка */
  --yellow: #f2ee4a;         /* листок, главный акцент */
  --yellow-soft: #faf8c8;    /* наведение на строку, «вы сообщили» */
  --coral: #ff5a4f;          /* главное действие; текст на нём всегда --ink (5,54:1) */
  --coral-press: #f0473c;
  --night: #272923;          /* подложка под фото, тёмные поля, подвал */
  --night-2: #34362f;
  --on-night: #f4f3ee;
  --on-night-muted: #c4c5bc; /* 8,45:1 на --night */
  --danger: #b3281f;         /* только ошибки ввода и отказы */

  /* Роли для страниц: меняются слоями donor / shelter / operator */
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--coral);
  --accent-fg: var(--ink);
  --border: var(--ink);
  --warn-bg: var(--yellow);
  --warn-fg: var(--ink);
  --focus: var(--ink);

  /* ---------- Шрифт ---------- */
  --font: "Golos Text", "Golos", Arial, Helvetica, sans-serif;

  /* Шкала текста: мобильный → десктоп через clamp (минимум на 390, максимум на 1440) */
  --t-hero: clamp(3rem, 1.6rem + 5.4vw, 6rem);            /* 48 → 96 */
  --t-display: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);    /* 40 → 68 */
  --t-h1: clamp(2rem, 1.55rem + 1.8vw, 2.875rem);         /* 32 → 46 */
  --t-h2: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);         /* 24 → 30 */
  --t-h3: 1.1875rem;                                      /* 19 */
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);       /* 17 → 20 */
  --t-body: 1rem;                                         /* 16 */
  --t-small: .875rem;                                     /* 14 */
  --t-meta: .75rem;                                       /* 12 */
  --lh-tight: .94;
  --lh-head: 1.1;
  --lh-body: 1.5;
  --track-display: -.04em;   /* нижняя граница трекинга */
  --track-meta: .08em;
  --measure: 65ch;           /* длина строки текста */

  /* ---------- Отступы, шаг 4 ---------- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* Поля страницы и ширина содержимого */
  --gutter: 18px;
  --maxw: 1320px;
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));  /* левый/правый край содержимого на широком экране */
  --w-prose: 56rem;          /* экраны-формы донора: колонка вместо «полоски» на 1440 */

  /* Минимальная цель касания (WCAG 2.5.5, мобильное правило проекта) */
  --touch: 44px;

  /* ---------- Скругления: бумага прямая, поля чуть мягче ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 6px;

  /* ---------- Глубина: смещение и мягкое размытие, без жёстких теней ---------- */
  --e-1: 0 1px 2px rgba(28, 28, 28, .10), 0 2px 8px rgba(28, 28, 28, .06);
  --e-ticket: drop-shadow(0 1px 2px rgba(28, 28, 28, .12)) drop-shadow(0 6px 14px rgba(28, 28, 28, .07));
  --e-ticket-lift: drop-shadow(0 2px 3px rgba(28, 28, 28, .14)) drop-shadow(0 14px 22px rgba(28, 28, 28, .12));
  --e-sheet: 3px 12px 18px rgba(0, 0, 0, .27);
  --e-lift: 0 6px 14px rgba(28, 28, 28, .18);

  /* ---------- Движение ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* экспоненциальный выход */
  --ease-tear: cubic-bezier(.34, 1.4, .64, 1);   /* лёгкий перелёт: сигнатура «отрыва» */
  --d-press: 110ms;
  --d-hover: 220ms;
  --d-settle: 640ms;
  --d-tear: 640ms;        /* отрыв без наведения: перелёт до полной позы и оседание в надрыв */
  --d-tear-delay: 300ms;  /* первый экран главной: кнопка надрывается после того, как легла лента */
  --d-tear-step: 90ms;    /* лесенка целей, попавших на экран в одном кадре (не больше трёх шагов) */

  /* ---------- Листок и отрыв ---------- */
  --tilt: -1.2deg;
  --perf: 2px dashed var(--ink);

  /* ---------- Слои ---------- */
  --z-header: 10;
  --z-skip: 50;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 60px; } }