/* ============================================================
   tokens.css — Design System foundation
   Sprint 9 Phase 1 · единый источник истины для design-токенов.
   Подключается в index.html ПЕРЕД app/styles.css.

   Принципы:
   - Семантические имена (--text-body, не --fs-13)
   - Без breaking changes: существующие --bg/--ink/etc остаются
     в styles.css, новые токены добавляются параллельно
   - Утилити-классы (.fs-X, .mt-X, .g-X) пока не трогаются —
     мигрируются постепенно в Phase 3
   ============================================================ */

:root {
  /* ── Typography scale ─────────────────────────────────────
     Семейства уже подключены в index.html (Inter, Lora, JetBrains Mono). */
  --font-display: 'Lora', Georgia, serif;
  --font-text:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --text-display:    clamp(28px, 8vw, 36px);  /* hero countdown / большие числа */
  --text-heading-lg: 22px;                    /* page title (h1) */
  --text-heading-md: 18px;                    /* section title (h2) */
  --text-heading-sm: 15px;                    /* card title (h3) */
  --text-body:       14px;                    /* основной текст */
  --text-body-sm:    13px;                    /* вторичный */
  --text-caption:    12px;                    /* подписи под полями */
  --text-micro:      11px;                    /* eyebrow, mono-метки */

  --leading-tight: 1.15;
  --leading-base:  1.5;
  --leading-loose: 1.65;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Spacing scale (4-px база) ──────────────────────────── */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* ── Motion ─────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --motion-ease:        cubic-bezier(0.2, 0, 0, 1);          /* «standard» */
  --motion-emphasized:  cubic-bezier(0.3, 0, 0.8, 0.15);     /* drop-in */

  /* ── Icon sizes ─────────────────────────────────────────── */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;

  /* ── Layout ─────────────────────────────────────────────── */
  --layout-max-width:      480px;
  --layout-topbar-height:  52px;
  --layout-tabbar-height:  56px;
  --layout-touch-min:      44px; /* WCAG минимум tap-target */

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-base:    0;
  --z-sticky:  50;
  --z-tabbar:  100;
  --z-sheet:   500;
  --z-toast:   800;
  --z-modal:   1000;
}

/* ============================================================
   Accessibility baseline
   ============================================================ */

/* Видимый focus для клавиатуры (но не для тапа мышью/тачем). */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Уважение к prefers-reduced-motion — отключаем все анимации
   для пользователей с соответствующим системным предпочтением. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Стандартные keyframes
   ============================================================ */

@keyframes rc-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes rc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rc-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rc-sheet-enter {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}