/* ==========================================================================
   TRM · дизайн-система, слой 1 — токены и база
   Стиль в духе quomi.framer.website: бумажный фон, точечная разлиновка
   в 4 колонки, крупный широкий дисплей, монохром с одним акцентом.
   Контент и бренд — TRM. Шрифты локальные: ../fonts.css.
   ========================================================================== */

@layer ds.tokens, ds.base, ds.components, ds.utilities;

@layer ds.tokens {
  :root {
    /* --- Цвет: светлая поверхность ------------------------------------ */
    --ds-paper: #fafafa;          /* фон страницы */
    --ds-surface: #ffffff;        /* карточка, ячейка */
    --ds-surface-2: #f2f2f2;      /* подложка, hover ячейки */
    --ds-rule: #e6e6e6;           /* разлиновка, разделители */
    --ds-rule-strong: #d4d4d4;    /* рамки контролов, hover рамки */

    --ds-ink: #1a1a1a;            /* основной текст, 16.1:1 */
    --ds-ink-2: #6b6b6b;          /* вторичный текст, 5.1:1 на paper — AA */
    --ds-ink-3: #8a8a8a;          /* 3.3:1 — только крупные индексы и скобки */

    /* --- Цвет: ночная поверхность (инверсия) -------------------------- */
    --ds-night: #050505;
    --ds-night-2: #1a1a1a;
    --ds-night-rule: #2e2e2e;
    --ds-on-night: #fafafa;
    --ds-on-night-2: #8a8a8a;     /* 5.9:1 на night */

    /* --- Акцент: один, как у референса ------------------------------- */
    --ds-accent: #ff5533;         /* заливки, точки, фокус; текст — только на тёмном */
    --ds-accent-ink: #c8381a;     /* акцентный текст на светлом, 5.0:1 */
    --ds-accent-soft: rgba(255, 85, 51, 0.12);
    --ds-on-accent: #1a1a1a;      /* текст на заливке акцентом, 5.5:1 */

    --ds-frost: rgba(255, 255, 255, 0.07);

    /* --- Шрифты --------------------------------------------------------- */
    /* Clash Display референса без кириллицы → Unbounded 500 (единственный вес).
       Inter Display → Inter с осью opsz. */
    --ds-font-display: 'Unbounded', 'Helvetica Neue', Arial, sans-serif;
    --ds-font-text: 'Inter', 'Helvetica Neue', Arial, sans-serif;

    /* Шкала: крупность делается кеглем, не жирностью. Unbounded шире Clash,
       поэтому заголовки на ступень меньше референсных 96 / 48 / 32 / 24. */
    --ds-fs-display: clamp(40px, 6vw, 88px);
    --ds-fs-h1: clamp(28px, 3.4vw, 46px);
    --ds-fs-h2: clamp(26px, 3vw, 40px);
    --ds-fs-h3: clamp(19px, 1.7vw, 24px);
    --ds-fs-lead: clamp(18px, 1.6vw, 24px);
    --ds-fs-body: 16px;
    --ds-fs-small: 14px;
    --ds-fs-micro: 12px;          /* метки СТАТИСТИКИ, служебные подписи */

    --ds-lh-tight: 1.04;
    --ds-lh-snug: 1.25;
    --ds-lh-body: 1.6;
    --ds-ls-display: -0.02em;
    --ds-ls-text: -0.005em;
    --ds-ls-micro: 0.06em;

    /* --- Отступы: шаг 8, плюс 4 для тонкой подгонки -------------------- */
    --ds-s-1: 4px;
    --ds-s-2: 8px;
    --ds-s-3: 12px;
    --ds-s-4: 16px;
    --ds-s-5: 24px;
    --ds-s-6: 32px;
    --ds-s-7: 48px;
    --ds-s-8: 64px;
    --ds-s-9: 96px;
    --ds-s-10: 144px;

    /* --- Радиусы: блоки квадратные, круглое — только мелочь ------------ */
    --ds-r-0: 0;                  /* ячейки, карточки, панели, кнопки */
    --ds-r-media: 8px;            /* портреты, плашки логотипов */
    --ds-r-round: 999px;          /* точки, чипы, круглые иконки */

    /* --- Сетка ----------------------------------------------------------- */
    --ds-cols: 4;
    --ds-pad: 24px;               /* поля страницы = позиция крайних реек */
    --ds-section-y: var(--ds-s-9);
    --ds-nav-h: 72px;
    --ds-max: none;               /* как у референса: сетка во всю ширину */

    /* --- Движение ------------------------------------------------------- */
    --ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ds-dur-fast: 0.35s;
    --ds-dur: 0.6s;
  }

  @media (max-width: 1023px) {
    :root { --ds-cols: 2; }
  }

  @media (max-width: 767px) {
    :root {
      --ds-cols: 1;
      --ds-section-y: var(--ds-s-8);
      --ds-nav-h: 64px;
    }
  }

  @media (max-width: 479px) {
    :root { --ds-pad: 16px; }
  }
}

@layer ds.base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--ds-paper);
    color: var(--ds-ink);
    font-family: var(--ds-font-text);
    font-size: var(--ds-fs-body);
    line-height: var(--ds-lh-body);
    letter-spacing: var(--ds-ls-text);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  [id] { scroll-margin-top: calc(var(--ds-nav-h) + var(--ds-s-4)); }
  button { font: inherit; color: inherit; }

  :focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }
}