/*
 * Дизайн-токены «Ва-банк Шоу».
 * Чёрная студия: глухой чёрный фон, плоские графитовые карточки,
 * один акцент — электрический фиолет. Никаких «стеклянных» подложек
 * и подсветок ради подсветки: свет только там, где на него смотрят.
 *
 * Имена --c-*, --fs-*, --gap* и т.д. сохранены ради обратной совместимости
 * со всеми существующими селекторами.
 */

/* ============ шрифты (assets/fonts) ============ */

/* Oks Free — дисплейный, только прописные. Ilya Zherikov, свободная лицензия. */
/* oks-free-fixed.woff2 собран из Oks_Free_CO_IK_Fixed.otf с вырезанными из liga
   лигатурами СЕ и се — они склеивали «СЕБЯ», «ВЕСЕЛИТЕСЬ» в один знак.
   Пересоберёшь из OTF напрямую — лигатура вернётся. */
@font-face {
  font-family: 'Oks Free';
  src: url('../fonts/oks-free-fixed.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* TT Hoves Pro — текстовый. Внимание: в проекте лежит TRIAL-начертание,
   для публикации нужна купленная лицензия TypeType (см. LICENSE-tt-hoves-trial.txt). */
@font-face {
  font-family: 'TT Hoves Pro';
  src: url('../fonts/tt-hoves-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TT Hoves Pro';
  src: url('../fonts/tt-hoves-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TT Hoves Pro';
  src: url('../fonts/tt-hoves-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TT Hoves Pro';
  src: url('../fonts/tt-hoves-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {

  /* ============ базовая палитра сцены ============ */
  --stage-0:      #000000;   /* абсолютный чёрный — провалы и окна */
  --stage-1:      transparent;              /* канвас: под ним живёт grainient */
  --stage-2:      rgba(20, 18, 24, .66);   /* карточка — сквозь неё виден фон */
  --stage-3:      rgba(38, 34, 44, .74);   /* карточка под курсором, вложенные поверхности */
  --stage-4:      #6f6f74;   /* раскрытая карточка галереи — светлый графит */
  --stage-glass:  rgba(11, 11, 13, .72);

  --ink-0:        #ffffff;   /* основной текст */
  --ink-1:        #a8a8ad;   /* вторичный текст */
  --ink-2:        #6e6e75;   /* третичный / fine */
  --ink-line:     rgba(255, 255, 255, .1);
  --ink-line-2:   rgba(255, 255, 255, .2);

  --signal:       #a21ce8;   /* электрический фиолет — единственный акцент */
  --signal-2:     #bf5cff;   /* светлее, для текста на чёрном */
  --signal-dim:   rgba(162, 28, 232, .14);
  --signal-line:  rgba(162, 28, 232, .5);

  --win:          #21e6b0;   /* тил */
  --win-2:        #12c8ff;   /* циан — вместе дают "выигрышный" градиент */

  /* ============ обратная совместимость (используются в base/blocks) ============ */
  --c-bg:        var(--stage-1);
  --c-bg-1:      var(--stage-0);
  --c-text:      var(--ink-0);
  --c-text-2:    var(--ink-1);
  --c-text-3:    var(--ink-2);
  --c-line:      var(--ink-line);
  --c-line-2:    var(--ink-line-2);
  --c-fill:      var(--stage-2);
  --c-fill-2:    var(--stage-3);
  --c-inverse:   #ffffff;
  --c-btn:       var(--signal);
  --c-btn-text:  #ffffff;
  --c-accent:    var(--signal);
  --c-accent-2:  var(--signal-2);

  /* градиенты — используются точечно, не как «атмосфера» */
  --grad-horizon: radial-gradient(50% 40% at 15% -5%, rgba(162, 28, 232, .16), transparent 70%);
  --grad-signal:  linear-gradient(120deg, #8b18d6, #a21ce8 55%, #c355ff);
  --grad-win:     linear-gradient(73deg, var(--win) 2%, var(--win-2) 100%);
  --grad-card:    linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 40%);

  /* тени и подсветки */
  --glow-signal:  0 14px 40px -14px rgba(162, 28, 232, .6);
  --glow-signal-lg: 0 24px 70px -18px rgba(162, 28, 232, .55);
  --glow-win:     0 16px 50px -16px rgba(18, 200, 255, .45);
  --glow-soft:    0 30px 80px -30px rgba(0, 0, 0, .8);

  /* ============ типографика ============ */
  --font-display: 'Oks Free', 'Unbounded', var(--font);
  --font:      'TT Hoves Pro', 'Golos Text', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(52px, 8vw, 132px);
  --fs-h1:   clamp(40px, 6vw, 88px);
  --fs-h2:   clamp(28px, 3.6vw, 44px);
  --fs-h3:   clamp(20px, 2.2vw, 26px);
  --fs-lead: 19px;
  --fs-base: 16px;
  --fs-sm:   14px;
  --fs-xs:   12px;

  --lh-tight: 1.05;
  --lh-base:  1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;
  --fw-black:  800;

  --tracking-tight: -0.02em;
  --tracking-wide:  .08em;

  /* ============ сетка ============ */
  --wrap:     1240px;
  --wrap-wide: 1440px;
  --gutter:   24px;
  --gap:      24px;
  --gap-sm:   12px;

  /* вертикальный ритм */
  --section-y:    136px;
  --section-y-sm: 72px;

  /* элементы */
  --radius:        14px;      /* базовый радиус карточек */
  --radius-sm:     10px;
  --radius-lg:     18px;
  --radius-panel:  22px;
  --radius-btn:    999px;     /* кнопки — «пилюля», как на первом экране */
  --radius-pill:   999px;     /* теги, бейджи и чипы */
  /* ============ жидкое стекло ============ */
  /* Матовая пластина в покое: чистое стекло, без цвета и без обводки —
     ни рамки, ни блика по кромке, только тело. backdrop-filter размывает
     и подкрашивает то, что лежит под ней (градиент фона и фишку),
     градиент даёт телу стекла объём, внешняя тень отделяет пластину от
     фона. Фирменный фиолет приходит только на наведении, кольцом света
     у той стороны, к которой подошёл курсор (.glass-glow, порт
     компонента BorderGlow — см. app.js). */
  --glass-fill: linear-gradient(157deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035) 44%, rgba(255, 255, 255, .07));
  --glass-blur: blur(18px) saturate(170%);
  --glass-line: 1px solid rgba(255, 255, 255, .16);
  --glass-edge: 0 12px 32px -14px rgba(0, 0, 0, .6);

  /* цвет кольца на наведении — тот же фиолет, что и --signal-2, тройкой RGB */
  --glass-glow-rgb: 191, 92, 255;

  --border:        1px solid var(--c-line);
  --border-2:      1px solid var(--c-line-2);
  --border-signal: 1px solid var(--signal-line);

  --btn-py:      17px;
  --btn-px:      30px;
  --header-h:    84px;
  --ticker-h:    68px;
  --ticker-h-sm: 52px;

  /* движение */
  --dur:   .25s;
  --dur-slow: .6s;
  --ease:  cubic-bezier(.22, .8, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ticker-speed: 50s;

  --z-chip:     -2;   /* 3D-фишка: сразу над grainient (-3), под вуалью (-1) */
  --z-header:  100;
  --z-sticky:  200;
  --z-cookie:  300;
  --z-popup:   400;
  --z-lightbox:500;
}

@media (max-width: 1099px) {
  :root {
    --section-y: 92px;
    --header-h: 72px;
  }
}
@media (max-width: 699px) {
  :root {
    --gutter: 16px;
    --gap: 16px;
    --section-y: 64px;
    --header-h: 60px;
    --btn-py: 15px;
    --btn-px: 24px;
  }
}