/* ============================================================================
 * tokens.css — добавочные дизайн-токены поверх base.css
 *
 * base.css уже содержит цвета (--accent-tg/violet/mint), spacing (--sp-*),
 * радиусы (--radius-*), градиенты (--grad-*). Этот файл ДОПОЛНЯЕТ систему:
 * типографика (line-height, letter-spacing, font-size scale), motion
 * (ease/dur), elevation для CTA.
 *
 * Подключается в index.html сразу после base.css, до остальных модулей.
 * Источник правды — design audit от 2026-04-25.
 * ============================================================================ */

:root {
  /* ===== Type scale ===== */
  --fs-display:  clamp(40px, 5vw, 72px);
  --fs-h1:       clamp(32px, 4vw, 56px);
  --fs-h2:       clamp(28px, 3.2vw, 44px);
  --fs-h3:       22px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-eyebrow:  11px;

  /* ===== Line heights ===== */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-body:     1.55;

  /* ===== Letter spacing ===== */
  --ls-display:  -0.02em;
  --ls-eyebrow:  0.18em;

  /* ===== Motion ===== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;

  /* ===== Elevation ===== */
  --elev-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.25);
  --elev-pop:  0 12px 48px rgba(0,0,0,.5);
  --elev-cta:  0 0 0 1px rgba(46,166,255,.4), 0 8px 32px rgba(46,166,255,.25);

  /* ===== Lines ===== */
  --color-line:        rgba(255,255,255,.08);
  --color-line-strong: rgba(255,255,255,.16);
}

/* prefers-reduced-motion — гасим длинные анимации, оставляем focus/hover */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* A11y — глобальный focus-visible ring (P2 из аудита) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-tg, #2EA6FF);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Twemoji — цветные эмодзи через Twitter Emoji SVG */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.15em;
  display: inline-block;
}
.pain-emoji img.emoji,
.feature-cat-icon img.emoji,
.sol-icon img.emoji,
.demo-role-emoji img.emoji {
  height: 1em;
  width: 1em;
  margin: 0;
  vertical-align: middle;
}