/* ============================================================
   TOKENS — единый источник правды для UI «Top Casino Affiliate Programs»
   Никаких «магических» значений в компонентах. Только переменные отсюда.
   Палитра: intelligence/analytics-тон — сланцевая шапка + индиго-акцент.
   База дизайн-системы унаследована от прототипа (Figma «Reviews New»).
   ============================================================ */

:root {
  /* ---------- ЦВЕТА ---------- */
  --color-accent:           #4f46e5; /* индиго акцент: кнопки, ссылки, звёзды */
  --color-accent-hover:     #4338ca; /* затемнение для :hover */
  --color-accent-deep:      #1e1b4b; /* глубокий индиго: баннеры/выделения */

  --color-bg-page:          #f6f7fb; /* холодный светлый фон страницы */
  --color-bg-card:          #ffffff; /* карточки */
  --color-bg-row:           #f9fafb; /* строка списка/таблицы */
  --color-bg-header:        #0f172a; /* шапка — slate-900 navy */
  --color-bg-header-deep:   #0b1220; /* нижняя часть/градиент шапки */

  --color-text-primary:     #0f172a; /* основной текст (slate-900) */
  --color-text-muted:       #475569; /* подписи (slate-600) */
  --color-text-dim:         #64748b; /* третичный (slate-500) */
  --color-text-inverted:    #ffffff; /* текст на тёмном */

  --color-border:           #e2e8f0; /* бордеры/разделители (slate-200) */

  --color-rating-green:     #16a34a;
  --color-rating-orange:    #f59e0b;
  --color-rating-red:       #dc2626;

  --color-star-active:      #4f46e5;
  --color-star-inactive:    #cbd5e1;

  /* ---------- СЕМАНТИКА ПЛАТФОРМЫ (House Grade / Status / флаги) ---------- */
  /* House Grade — главный визуальный индикатор доверия (Module 3). Яркие. */
  --grade-aplus: #059669; /* A+ */
  --grade-a:     #22c55e; /* A  */
  --grade-b:     #84cc16; /* B  */
  --grade-c:     #f59e0b; /* C  */
  --grade-f:     #ef4444; /* F  */

  /* Program Status (Module 5). */
  --status-active:    #16a34a; /* 🟢 Active */
  --status-review:    #f59e0b; /* 🟡 Under Review */
  --status-delayed:   #ea580c; /* 🟠 Delayed Payments */
  --status-closed:    #dc2626; /* 🔴 Closed */
  --status-blacklist: #1f2937; /* ⚫ Blacklisted */

  /* Флаги / риски (Module 6–7). */
  --color-flag-good: #16a34a; /* Green Flags */
  --color-flag-warn: #dc2626; /* Risk Warnings */

  /* ---------- ТИПОГРАФИКА ---------- */
  --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-content: 1.0625rem; /* 17px моб — крупный контент (профиль программы) */
  --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(15, 23, 42, .06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

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

  /* ---------- ПРОЧЕЕ ---------- */
  --ring: 0 0 0 3px rgba(79, 70, 229, .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 */
    --fs-content: 1.1875rem; /* 19px — крупный контент на десктопе */
    --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; }
}