/* ===========================================================================
   tokens.css — ИСТОЧНИК ПРАВДЫ по дизайн-токенам.
   Значения перенесены из 5-design.md (роль web-design) без изменений.
   Правило приёмки: ни одного hex / px-отступа / радиуса / длительности
   в других файлах. Смена брендбука = правка ТОЛЬКО этого файла + Logo.
   =========================================================================== */

/* ——— Шрифты (self-host) ———
   Было 6 файлов / 202 КБ: у каждой гарнитуры отдельно cyrillic, latin и ₽.
   Латинские субсеты Google тянутся ВСЕГДА (цифры и пробел лежат в U+0000-00FF)
   и стоили 131 КБ из 202, хотя из латиницы на сайте нужны 84 символа.
   Стало 2 файла / 100 КБ: по одному на гарнитуру, набор запрошен через
   Google Fonts API `text=` — печатная ASCII + весь блок U+0400-045F + ₽ №
   и типографика (« » · – — … → ↗). Оба файла остаются вариативными (ось wght).
   Бюджет критерия 14 «≤5 файлов» — выполнен.
   ⚠️ Правите тексты — сверяйтесь с набором: символа вне субсета не будет,
   он отрисуется системным фолбэком. Пересобрать — scripts/build-fonts.py. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-text.woff2') format('woff2');
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/literata-text.woff2') format('woff2');
}

:root {
  /* ——— Цвет: поверхности ——— */
  --color-bg:            #150D10;
  --color-surface-1:     #1D1317;
  --color-surface-2:     #241A1E;
  --color-surface-3:     #2C2024;
  --color-overlay:       rgba(10, 6, 8, 0.72);

  /* ——— Цвет: текст ——— */
  --color-text:          #F4ECE6;   /* 16.4:1 на bg */
  --color-text-muted:    #C9B6B2;   /*  9.9:1 на bg */
  --color-text-subtle:   #A08D91;   /*  6.1:1 на bg */
  --color-on-accent:     #FFFFFF;   /*  5.6:1 на accent */

  /* ——— Цвет: единственный акцент (только действие/выбор) ——— */
  --color-accent:        #C22A4D;
  --color-accent-hover:  #D63456;
  --color-accent-active: #A81F3E;
  --color-accent-text:   #E8697F;   /*  6.2:1 на bg — акцент как ТЕКСТ */
  /* + разработчик (фикс приёмки, блокер 2): тот же оттенок (H 349°), но светлее —
     для текста и ссылок НА ТИНТОВЫХ ПОДЛОЖКАХ (алерты). Полупрозрачный тинт
     осветляет фон, и #E8697F на нём даёт 4.27:1 — ниже AA. Замер #F08A9C:
     5.60:1 на warning-tint над surface-2, 5.09:1 в худшем случае (тинт над surface-3),
     8.0:1 на bg. Пары не было в таблице 2.2 — вынесено в токен, чтобы не считать заново. */
  --color-accent-text-hi: #F08A9C;
  --color-accent-deep:   #7D1630;
  --color-accent-tint:   rgba(194, 42, 77, 0.14);

  /* ——— Цвет: линии ——— */
  --color-hairline:      rgba(244, 236, 230, 0.12); /* только декор */
  --color-border:        #8A7178;                   /* границы контролов, 3.5:1 */
  /* + разработчик: значение названо в 5-design.md (5.6, штриховка «занят»),
     но не было вынесено в токен — вынес, чтобы в компонентах не осталось «магии» */
  --color-hatch:         rgba(244, 236, 230, 0.08);

  /* ——— Цвет: семантика (всегда + иконка/слово) ——— */
  --color-success:       #59C08C;
  --color-warning:       #F0B23F;
  --color-error:         #FF7A66;
  --color-success-tint:  rgba(89, 192, 140, 0.12);
  --color-warning-tint:  rgba(240, 178, 63, 0.12);
  --color-error-tint:    rgba(255, 122, 102, 0.12);

  /* ——— Типографика ——— */
  --font-display: "Literata", Georgia, "Iowan Old Style", "Noto Serif", serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-num-features: "tnum" 1, "lnum" 1;

  --text-display:   clamp(2.25rem, 1.45rem + 3.6vw, 4rem);       /* 36 → 64 */
  --text-h1:        clamp(2rem,    1.60rem + 1.8vw, 3rem);       /* 32 → 48 */
  --text-h2:        clamp(1.5rem,  1.20rem + 1.4vw, 2.25rem);    /* 24 → 36 */
  --text-h3:        clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     /* 20 → 24 */
  --text-number-xl: clamp(2.5rem,  1.90rem + 2.6vw, 3.5rem);     /* 40 → 56 */
  --text-number-md: clamp(1.5rem,  1.40rem + 0.5vw, 1.75rem);    /* 24 → 28 */
  --text-lead:      clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);     /* 17 → 20 */
  --text-body:      clamp(1rem,    0.97rem + 0.15vw, 1.0625rem); /* 16 → 17 */
  --text-body-sm:   0.9375rem;   /* 15 */
  --text-caption:   0.8125rem;   /* 13 */
  --text-label:     0.8125rem;   /* 13, uppercase, ls .08em */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-body:   1.6;

  /* ——— Раскладка ——— */
  --container-max:    75rem;   /* 1200 */
  --container-narrow: 45rem;   /* 720  */
  --container-pad:    1rem;    /* 16 → 24 → 32 по медиа */
  --content-measure:  68ch;
  --section-y:        clamp(3.5rem, 2.5rem + 4vw, 6rem); /* 56 → 96 */

  /* ——— Отступы (база 4) ——— */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;

  /* ——— Радиусы ——— */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px;
  --radius-pill: 999px;

  /* ——— Тени и фокус ——— */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);
  --ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent-text);

  /* ——— Размеры контролов ——— */
  --control-h-lg: 52px; --control-h-md: 44px; --control-h-sm: 36px;
  --field-h: 48px;         /* 5-design.md 5.5: поле ввода 48px */
  --drawer-w: 480px;       /* 5-design.md 5.4: правая панель на десктопе */
  --touch-min: 44px;
  --header-h: 56px;        /* ≥768: 64px */
  --statusbar-h: 40px;     /* ≥768: 44px */
  --mobilebar-h: 64px;

  /* ——— Движение (бюджет — 6 эффектов) ——— */
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);

  /* ——— Слои ——— */
  --z-header: 100; --z-mobilebar: 110; --z-overlay: 200; --z-drawer: 210; --z-toast: 300;

  /* ——— Скрим для текста поверх фото ——— */
  --scrim: linear-gradient(180deg, rgba(10,6,8,0) 0%, rgba(10,6,8,.35) 45%, rgba(10,6,8,.78) 100%);
}

@media (min-width: 768px) {
  :root { --container-pad: 1.5rem; --header-h: 64px; --statusbar-h: 44px; }
}
@media (min-width: 1024px) {
  :root { --container-pad: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}