/* Дизайн-токены. Единственное место, где живут сырые значения. */

:root {
  /* Плоскости. Строгий монохром: глубина строится границами, не тенями. */
  --bg:        #0A0A0A;
  --bg-soft:   #0D0D0E;
  --card:      #131314;
  --card-hi:   #17171A;
  --line:      rgba(255, 255, 255, 0.07);
  --line-hi:   rgba(255, 255, 255, 0.14);

  /* Текст */
  --text:   #FAFAFA;
  --muted:  #A1A1AA;
  --faint:  #71717A;
  --dim:    #52525B;

  /* Цвет в макете появляется ровно дважды: кнопка скачивания и обложки игр. */
  --green:      #10B981;
  --green-hi:   #34D399;
  --danger:     #F43F5E;
  --info:       #A855F7;

  /* Типографика */
  --font: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --step--2: 0.72rem;
  --step--1: 0.8rem;
  --step-0:  0.875rem;
  --step-1:  1rem;
  --step-2:  clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  --step-3:  clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --step-4:  clamp(2.8rem, 1.6rem + 5.6vw, 6rem);

  /* Ритм */
  --gap-xs: 0.5rem;
  --gap-s:  0.875rem;
  --gap-m:  1.5rem;
  --gap-l:  3rem;
  --gap-xl: 6rem;
  /* Боковое поле страницы. Всё, что должно вылезать за край .shell
     (ленты со скроллом), считает отступ от этой переменной — иначе легко
     промахнуться и получить горизонтальный скролл. */
  --shell-pad: 1.25rem;
  --shell:  min(1180px, 100% - var(--shell-pad) * 2);
  --shell-narrow: min(760px, 100% - var(--shell-pad) * 2);

  --radius-s:  8px;
  --radius:    12px;
  --radius-lg: 16px;

  /* Тайминги */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur:      0.32s;
  --dur-slow: 0.8s;

  --nav-h: 62px;
}

/* ============ Мобильные ============
   Шкала отступов на телефоне сжимается: секции по 6rem превращают страницу
   в бесконечную ленту прокрутки. Правим токены — и подтягиваются все компоненты. */

@media (max-width: 720px) {
  :root {
    --gap-l:  2rem;
    --gap-xl: 3.25rem;
    --shell-pad: 1rem;
    --nav-h:  56px;

    /* Крупные кегли на узком экране душат вёрстку. */
    --step-2: clamp(1.35rem, 1.1rem + 1.6vw, 1.7rem);
    --step-3: clamp(1.7rem, 1.3rem + 2.6vw, 2.2rem);
  }
}

@media (max-width: 400px) {
  :root {
    --shell-pad: 0.75rem;
  }
}