/* ============================================================
   TOKENS — единый источник правды для UI Kit «SlotsTube»
   Никаких «магических» значений в компонентах. Только переменные отсюда.
   Источник: Figma «Reviews New» (variables + измерения).
   ============================================================ */

:root {
  /* ---------- ЦВЕТА (из Figma Variables) ---------- */
  --color-accent:           #ed1fab; /* розовый акцент: кнопки, ссылки, звёзды */
  --color-accent-hover:     #c9178f; /* затемнение для :hover (вычислено) */
  --color-accent-deep:      #3a1170; /* фиолетовый баннер */

  --color-bg-page:          #f4f0f5; /* фон страницы */
  --color-bg-card:          #ffffff; /* карточки */
  --color-bg-row:           #fafafa; /* строка списка казино */
  --color-bg-header:        #1e0938; /* шапка */
  --color-bg-header-deep:   #170629; /* нижняя часть/градиент шапки */

  --color-text-primary:     #111111; /* основной текст (Figma #000 → смягчён) */
  --color-text-muted:       #4b4b4b; /* подписи (затемнено для контраста) */
  --color-text-dim:         #707070; /* третичный (затемнено для контраста) */
  --color-text-inverted:    #ffffff; /* текст на тёмном */

  --color-border:           #e5e1e6; /* бордеры/разделители */

  --color-rating-green:     #36c25a;
  --color-rating-orange:    #f08a2a;
  --color-rating-red:       #e84141;

  --color-star-active:      #ed1fab;
  --color-star-inactive:    #d9d5da;

  /* ---------- ТИПОГРАФИКА ---------- */
  --font-base: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Размер-шкала. Базовый 16px = 1rem.
     ВАЖНО: компоненты используют РОЛИ (--fs-h1 …), а не px напрямую.
     Размеры мобильные по умолчанию; десктоп переопределяется ниже в @media. */
  --fs-h1:   1.625rem;  /* 26px моб */
  --fs-h2:   1.5rem;    /* 24px */
  --fs-h3:   1.25rem;   /* 20px */
  --fs-h4:   1.0625rem; /* 17px */
  --fs-lead: 1rem;     /* 16px — вводный абзац */
  --fs-body: 1rem;     /* 16px — основной текст */
  --fs-sm:   0.9375rem; /* 15px (было 14) */
  --fs-xs:   0.8125rem; /* 13px (было 12) — подписи, кнопки, статы */

  /* Межстрочные */
  --lh-tight:  1.15; /* заголовки */
  --lh-snug:   1.3;
  --lh-normal: 1.5;  /* текст */

  /* Трекинг */
  --ls-tight: -0.5px;
  --ls-wide:  0.5px;  /* кнопки/аптокейс */

  /* ---------- ШКАЛА ОТСТУПОВ (база 4px) ---------- */
  /* Любой отступ берётся ОТСЮДА — это убирает «плавание» вёрстки. */
  --space-1:  0.25rem; /* 4  */
  --space-2:  0.5rem;  /* 8  */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.25rem; /* 20 */
  --space-6:  1.5rem;  /* 24 */
  --space-8:  2rem;    /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */

  /* ---------- РАДИУСЫ ---------- */
  --radius-sm:   8px;   /* лого-квадрат, мелкие */
  --radius-md:   12px;  /* карточки, строки */
  --radius-lg:   16px;  /* крупные блоки */
  --radius-pill: 999px; /* кнопки-таблетки */

  /* ---------- ТЕНИ ---------- */
  --shadow-sm: 0 1px 2px rgba(17, 9, 30, .06);
  --shadow-md: 0 4px 16px rgba(17, 9, 30, .08);
  --shadow-lg: 0 12px 32px rgba(17, 9, 30, .12);

  /* ---------- РАСКЛАДКА ---------- */
  --container-max: 1200px;   /* ширина контентной области (Figma card = 1200) */
  --container-pad: var(--space-4); /* боковые поля: 16 моб → 32 десктоп (см. @media) */

  /* ---------- ПРОЧЕЕ ---------- */
  --ring: 0 0 0 3px rgba(237, 31, 171, .35); /* focus-ring */
  --transition: 160ms ease;
}

/* ---------- ДЕСКТОП: переопределяем РОЛИ, а не компоненты ---------- */
@media (min-width: 768px) {
  :root {
    --fs-h1:   2.25rem;  /* 36px */
    --fs-h2:   1.875rem; /* 30px */
    --fs-h3:   1.5rem;   /* 24px */
    --fs-h4:   1.25rem;  /* 20px */
    --fs-lead: 1.125rem; /* 18px */
    --container-pad: var(--space-8); /* 32px */
  }
}

/* «Меньше движения»: НЕ обнуляем transition целиком (иначе пропадает вся плавность
   hover'ов). Убираем только СДВИГИ (transform-подъёмы), а плавность цвета/тени/прозрачности
   оставляем — это не «движение» по смыслу prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .slot-card:hover,
  .post-card:hover,
  .nav-tile:hover .nav-tile__arrow,
  .cat-card:hover .cat-card__icon { transform: none; }
}