/* ==========================================================================
   1win Design System · СЛОЙ 3 — ТОКЕНЫ ЛЕНДИНГА 1win Token
   --------------------------------------------------------------------------
   Расширения базовой системы, специфичные для этого продукта.
   Все значения сняты с прод-сборки /land/_nuxt/index.*.css.

   Здесь живёт то, чего нет в общей системе 1win:
     · сверхкрупный дисплейный заголовок на Halvar Breit (68 / 111 / 131)
     · лестница внутренних отступов блока-секции (20 → 24 → 32 → 48 → 52)
     · фирменные наклоны цветных плашек в заголовках
     · заливки секций и фоновое синее свечение
   ========================================================================== */

:root {
  /* ======================================================================
     СЕТКА
     Брейкпоинты: 375 / 390 / 768 / 1024 / 1440 / 1920.
     В @media подставляйте числа руками — var() там не работает.
     ====================================================================== */
  --l-bp-xs:  375px;
  --l-bp-sm:  390px;
  --l-bp-md:  768px;
  --l-bp-lg:  1024px;
  --l-bp-xl:  1440px;
  --l-bp-xxl: 1920px;

  --l-container-padding: 12px;  /* < 768: резина с боковыми полями */
  --l-container-md: 548px;      /* ≥ 768  */
  --l-container-lg: 684px;      /* ≥ 1024 */
  --l-container-xl: 1080px;     /* ≥ 1440 и ≥ 1920 — шире не растём */

  --l-section-gap: 16px;        /* вертикальный ритм между секциями */

  --l-header-offset: 104px;     /* padding-top контента под фикс-шапкой */
  --l-header-offset-lg: 150px;
  --l-header-offset-xl: 168px;
  --l-scroll-offset: 110px;     /* scroll-padding-top для якорей */

  /* Внутренний отступ блока-секции. Значение переопределяется
     в 1win-ui.css по брейкпоинтам: 20 → 24 → 32 → 48 → 52. */
  --l-group-padding: 20px;
  --l-group-radius: var(--rounding-24);
  --l-group-radius-xl: var(--rounding-32);  /* ≥1440 у «Popularity» — 40px,
                                               см. .l-group_radius_hero */

  /* ======================================================================
     ДИСПЛЕЙНЫЙ ЗАГОЛОВОК ЛЕНДИНГА (Halvar Breit 900)
     Крупнее, чем decorative-2xl общей системы. Только для главного экрана.
     ====================================================================== */
  --l-display-hero-font-family: "Halvar Breit", var(--reserved-fonts);
  --l-display-hero-font-weight: 900;
  --l-display-hero-line-height: 1;

  --l-display-hero-font-size: 68px;
  --l-display-hero-letter-spacing: -3.4px;        /* −5% от кегля */

  /* Мелкие ступени — только для длинных заголовков (модификатор _long).
     У исходного лендинга герой короткий («1win Token»), и 68px на 375
     помещаются. Промо-заголовок вроде «Получите 1win Token до $10 000»
     на мобильном не влезает, поэтому нужны две ступени ниже. */
  --l-display-hero-font-size-xs: 36px;
  --l-display-hero-letter-spacing-xs: -1.8px;
  --l-display-hero-font-size-sm: 44px;
  --l-display-hero-letter-spacing-sm: -2.2px;
  --l-display-hero-font-size-md: 56px;
  --l-display-hero-letter-spacing-md: -2.8px;
  --l-display-hero-font-size-xl: 111px;
  --l-display-hero-letter-spacing-xl: -5.55px;
  --l-display-hero-font-size-xxl: 131px;
  --l-display-hero-letter-spacing-xxl: -6.55px;

  /* Подзаголовок героя — Halvar Breit 700 */
  --l-subdisplay-font-weight: 700;
  --l-subdisplay-font-size: 20px;
  --l-subdisplay-letter-spacing: -0.4px;          /* −2% */
  --l-subdisplay-font-size-xl: 27px;
  --l-subdisplay-letter-spacing-xl: -0.54px;
  --l-subdisplay-font-size-xxl: 32px;
  --l-subdisplay-letter-spacing-xxl: -0.64px;

  /* ======================================================================
     ЦВЕТНАЯ ПЛАШКА В ЗАГОЛОВКЕ («highlight»)
     Фирменный приём: одно-два слова заголовка в скруглённой заливке,
     чуть повёрнутой. Ниже — реальные значения с прода.
     ====================================================================== */
  --l-highlight-radius: var(--rounding-max);
  --l-highlight-padding: 2px 8px 5px;     /* оптическая компенсация: низ > верх */
  --l-highlight-padding-xl: 3px 16px 6px;
  --l-highlight-color: var(--color-content-base-static-white);

  --l-highlight-blue:   var(--color-cyan-500);          /* #00a1ff */
  --l-highlight-pink:   var(--color-rose-300);          /* #ff4d97 */
  /* Зелёная плашка. Берём фирменный акцент 1win, а не salad из lime:
     lime на белом тексте не читается, а mint-700 — тот же зелёный,
     которым в системе размечены деньги и положительный исход. */
  --l-highlight-green:  var(--color-mint-700);          /* #00b24b */
  --l-highlight-orange: linear-gradient(91deg,
                          var(--color-orange-amber-400) 4.41%,
                          var(--color-yellow-amber-400) 98.82%);

  /* Разрешённый диапазон наклонов. Значения вне списка — отклонение. */
  --l-tilt-0:   0deg;
  --l-tilt-1:  -0.8deg;
  --l-tilt-2:  -0.9deg;
  --l-tilt-3:   1deg;
  --l-tilt-4:   1.4deg;
  --l-tilt-5:  -2.2deg;
  --l-tilt-6:  -4deg;     /* максимум, только для коротких слов */

  /* ======================================================================
     ЗАЛИВКИ СЕКЦИЙ
     Ровно пять вариантов. Шестого не бывает.
     ====================================================================== */
  --l-surface-white:  var(--neutral-clean-white);
  --l-surface-blue:   var(--color-blue-400);       /* #3259fe */
  --l-surface-azure:  var(--color-blue-cyan-400);  /* #268aff */
  --l-surface-gradient: linear-gradient(180deg,
                          var(--color-blue-500),
                          var(--color-blue-cyan-450)); /* #0030fe → #1381ff */
  --l-surface-dark:   var(--color-gray-900);       /* #141415 */

  /* Вложенная белая карточка внутри цветной секции (график) */
  --l-card-radius: var(--rounding-16);
  --l-card-radius-lg: var(--rounding-20);
  --l-card-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);

  /* Аккордеон FAQ */
  --l-collapse-bg: var(--color-gray-50);           /* #f0f2f5 */
  --l-collapse-radius: var(--rounding-16);
  --l-collapse-icon-bg: #3c3f45;
  --l-collapse-icon-size: 40px;

  /* Разделитель внутри белого блока */
  --l-divider: #e7ebf2;

  /* Ссылка-карточка в футере */
  --l-footer-link-bg: var(--color-gray-800);       /* #1d1e20 */
  --l-footer-link-radius: var(--rounding-16);
  --l-footer-link-height: 80px;

  /* ======================================================================
     ФОНОВОЕ СВЕЧЕНИЕ
     На проде — растровая картинка /land/images/background/bg-*.webp.
     Для баннеров и новых блоков используйте CSS-эквивалент ниже.
     ====================================================================== */
  --l-glow: radial-gradient(
              ellipse 44% 46% at 56% 44%,
              var(--color-blue-cyan-500) 0%,
              var(--color-blue-500) 38%,
              rgba(0, 32, 170, 0.45) 64%,
              rgba(0, 48, 254, 0) 82%);

  /* Шторки, гасящие края каруселей в цвет страницы */
  --l-fade-left:  linear-gradient(270deg, rgba(13, 13, 13, 0), #141415);
  --l-fade-right: linear-gradient(-270deg, rgba(13, 13, 13, 0), #141415);
  --l-scrim-bottom: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);

  /* ======================================================================
     КНОПКИ ЛЕНДИНГА
     ====================================================================== */
  --l-button-radius: var(--rounding-12);
  --l-button-font-size: 14px;
  --l-button-font-weight: 600;
  --l-button-line-height: 1.43;

  --l-button-pad-sm: 8px 16px;
  --l-button-pad-md: 8px 20px;
  --l-button-pad-lg: 12px 20px;

  /* «Стеклянная» тёмная кнопка */
  --l-button-glass-bg: linear-gradient(180deg,
                         rgba(255, 255, 255, 0.03),
                         rgba(255, 255, 255, 0.16));
  --l-button-glass-border: 0.5px solid rgba(255, 255, 255, 0.08);
  --l-button-gray-bg: rgba(255, 255, 255, 0.16);

  /* Главный CTA героя — объёмная оранжевая «плитка» */
  --l-cta-hero-width: 232px;
  --l-cta-hero-height: 84px;
  --l-cta-hero-width-xl: 252px;
  --l-cta-hero-height-xl: 94px;
  --l-cta-hero-font-size: 20px;
  --l-cta-hero-letter-spacing: -0.2px;

  /* ======================================================================
     ЦВЕТА ПРОЕКТОВ ХОЛДИНГА (слайдер «Our projects»)
     Это цвета логотипов партнёров, не палитра 1win. Менять нельзя.
     ====================================================================== */
  --l-project-gaming: #1b69ff;
  --l-project-games:  #5413ce;
  --l-project-pay:    #01ba5f;
  --l-project-start:  #0139ff;
  --l-project-perf:   #11c0df;

  /* ======================================================================
     ДВИЖЕНИЕ
     ====================================================================== */
  --l-ease: ease-in-out;
  --l-duration-fast: 0.2s;   /* смена фона кнопки */
  --l-duration-base: 0.3s;   /* аккордеон, выпадающий список */

  /* Кривые и длительности для animations.css. Лежат здесь, а не в
     премиум-слое: парение монет и появление блоков нужны обычной странице
     не меньше, чем «дорогой», и тянуть ради них VIP-палитру незачем. */
  --l-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --l-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --l-dur-shine: 3.2s;   /* пробег блика */
  --l-dur-float: 6s;     /* парение монеты */
  --l-dur-spin: 14s;     /* оборот монеты вокруг оси */
  --l-dur-pulse: 4s;     /* дыхание свечения */
}

/* ==========================================================================
   ДОПОЛНЕНИЕ · ЭЛЕМЕНТЫ ПРОМО-СТРАНИЦЫ РАЗДАЧИ
   --------------------------------------------------------------------------
   Пять элементов, которых не было на основном лендинге. Все построены
   на существующих шкалах: новых цветов, радиусов и отступов не вводится.
   Описание применения — в AIRDROP-PAGE.md.
   ========================================================================== */

:root {
  /* --- Топбар-лента ---------------------------------------------------
     Тонкая полоса над шапкой: «вам доступна раздача». Оранжевый градиент
     тот же, что у плашки в заголовке, — второго оранжевого в бренде нет. */
  --l-topbar-height: 40px;
  --l-topbar-height-md: 44px;
  --l-topbar-bg: var(--l-highlight-orange);
  --l-topbar-color: var(--color-content-base-static-white);

  /* --- Шкала прогресса -------------------------------------------------
     Дорожка — нейтраль текущей схемы, заполнение — фирменный оранжевый. */
  --l-progress-height: 8px;
  --l-progress-radius: var(--rounding-max);
  --l-progress-fill: var(--l-highlight-orange);
  --l-progress-dot: 12px;

  /* --- Таймлайн (дорожная карта) -------------------------------------- */
  --l-timeline-line: 2px;
  --l-timeline-dot: 16px;
  --l-timeline-gap: var(--spacing-16);
  /* Цвет соединительной линии задаётся не здесь: он зависит от цветовой
     схемы, а :root схему не знает. Ссылка на --color-background-* отсюда
     схлопнулась бы в невалидное значение. См. 1win-ui.css, .w-timeline. */

  /* --- Поле со ссылкой + кнопка «Скопировать» -------------------------- */
  --l-copyfield-height: 48px;
  --l-copyfield-radius: var(--rounding-12);
  --l-copyfield-font: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Чекбокс задания -------------------------------------------------- */
  --l-check-size: 24px;
  --l-check-done: var(--color-solid-brand-accent-default); /* #00b24b */

  /* --- Сумма токенов в строке задания ----------------------------------- */
  --l-reward-color: var(--color-yellow-amber-400);
}

/* ==========================================================================
   ДОПОЛНЕНИЕ · ЧЕТЫРЕ ИСПОЛНЕНИЯ ТОПБАРА
   --------------------------------------------------------------------------
   Одна и та же лента в четырёх регистрах — от самого громкого к самому
   сдержанному. Значения не новые: всё собрано из уже существующих шкал.
   ========================================================================== */

:root {
  /* Кнопка-пилюля внутри ленты. Ниже обычной кнопки по высоте, иначе
     лента раздувается и перестаёт быть полосой. */
  --l-topbar-pill-height: 28px;
  --l-topbar-pill-radius: var(--rounding-max);
  --l-topbar-pill-padding: 0 var(--spacing-12);
  --l-topbar-pill-font: var(--font-caption-s-font-size);

  /* Капсула под разряд таймера (вариант «бренд») */
  --l-topbar-slot-bg: var(--color-background-base-alfa-static-white-20);
  --l-topbar-slot-radius: var(--rounding-8);
  --l-topbar-slot-padding: 2px var(--spacing-8);

  /* Точка-индикатор «идёт сейчас» (вариант «стекло») */
  --l-topbar-dot: var(--color-orange-amber-400);
  --l-topbar-dot-size: var(--spacing-8);

  /* Шкала пула под лентой (вариант «прогресс») */
  --l-topbar-bar-height: 3px;
}

/* ==========================================================================
   БЛОКИ, ПЕРЕНЕСЁННЫЕ ИЗ ПРОД-СБОРКИ
   --------------------------------------------------------------------------
   Блоки «1win — это лидер в мире iGaming» и «1win — это постоянное развитие»
   стоят на странице один в один, со своими прод-стилями. Прод задаёт ширину
   строки в карточке отдельно для каждого языка (en, es, pt, fr), а русского
   в выгрузке нет — карточка отдаёт ему общее значение, рассчитанное на более
   короткий английский текст. На узких экранах строка из-за этого заезжает
   под объект в правом нижнем углу. Эти числа — размеры из прод-стиля,
   по ним prod-blocks.css считает, сколько места рядом с объектом осталось.
   ========================================================================== */

:root {
  /* Ширина строки в карточке — значения прод-стиля для узких экранов */
  --l-prod-card-text-max:  241px;  /* карточки блока «развитие» */
  --l-prod-about-text-max: 210px;  /* карточки блока «лидер» */

  /* Ширина объекта в правом нижнем углу карточки на узких экранах */
  --l-prod-art-arrow: 146px;   /* стрелка роста */
  --l-prod-art-cube:   99px;   /* куб AI-департамента */
  --l-prod-art-badge:  82px;   /* корона и медаль в блоке «лидер» */
}

/* ==========================================================================
   ЗНАК ВАЛЮТЫ В ЦЕННОСТНОЙ СТРОКЕ ГЕРОЯ
   --------------------------------------------------------------------------
   Рядом с суммой стоит марка: монета 1win Token или знак USDT. Размеры
   заданы в em, а не в пикселях, потому что знак обязан жить на строке —
   при смене ступени шкалы он пересчитывается сам и не отстаёт от цифр.
   ========================================================================== */

:root {
  --l-value-mark: 0.78em;        /* знак в строке ≈ высота прописной */
  --l-value-mark-gap: 0.16em;    /* зазор между знаком и цифрой */
  /* Вордмарк обрезан вплотную по краске, поэтому ему нужен зазор шире,
     чем круглому знаку: у того поля даёт сама окружность. */
  --l-value-mark-gap-word: 0.34em;
  --l-value-mark-lg: 1.5em;      /* знак-медальон перед плашкой */
  --l-value-mark-xl: 2.6em;      /* пара монет сбоку от сумм */
  --l-value-gap: var(--spacing-12);   /* между знаком-медальоном и плашкой */
}

/* ==========================================================================
   МАКЕТ ТЕЛЕФОНА И ЭКРАНЫ ПОЛУЧЕНИЯ
   --------------------------------------------------------------------------
   Блок «как забрать» показывает не абстрактные шаги, а сам интерфейс:
   кнопку, список кошельков, подтверждение. Рамка телефона собрана
   вёрсткой, а не картинкой, — внутрь неё кладутся настоящие элементы
   системы, они живые и масштабируются вместе с блоком.
   ========================================================================== */

:root {
  --l-phone-width: 264px;            /* ширина корпуса на мобильном */
  --l-phone-width-md: 300px;         /* от 768 */
  --l-phone-ratio: 0.486;            /* 19.5:9, пропорция современного экрана */
  --l-phone-bezel: 10px;             /* рамка вокруг экрана */
  --l-phone-radius: var(--rounding-32);
  /* На сколько корпус уходит за нижний край блока. Без этого блок растёт
     под полную высоту телефона, и рядом с короткой колонкой шагов
     остаётся пустое поле в треть экрана. */
  --l-phone-bleed: 160px;
  --l-phone-screen-radius: var(--rounding-24);
  --l-phone-frame: var(--color-gray-700);
  /* Экран приложения: тёмный верх и синее свечение снизу — так он выглядит
     в самом приложении и так он не сливается ни с одной из пяти заливок.
     На синем блоке градиентный экран пропадал. */
  --l-phone-screen-bg: radial-gradient(120% 74% at 50% 100%,
                         var(--l-surface-blue) 0%,
                         var(--color-blue-700) 42%,
                         var(--l-surface-dark) 78%);

  /* Сетка логотипов кошельков: без названий, одними марками.
     Размер фиксированный, а не долей колонки: марок восемь, и растянутые
     на всю ширину карточки они начинают спорить с заголовком шага. */
  --l-wallet-grid-mark: 40px;
  --l-wallet-grid-gap: var(--spacing-8);

  /* Строка кошелька в списке */
  --l-wallet-mark: var(--size-control-s);
  --l-wallet-padding: var(--spacing-12);
  --l-wallet-radius: var(--rounding-16);

  /* Фишка актива: монета + тикер */
  --l-asset-mark: var(--spacing-24);
  --l-asset-padding: var(--spacing-8) var(--spacing-12);
}

/* ==========================================================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА
   --------------------------------------------------------------------------
   Значения панели взяты из прод-компонента 1win (AppLangDropdown):
   ширина 84, радиус 12, отступ 12, зазор между пунктами 8, пункт uppercase
   14/500. Меняем только то, чего там нет, — размер флага и тёмное
   исполнение панели для наших цветных блоков.
   ========================================================================== */

:root {
  --l-lang-flag: 20px;
  --l-lang-flag-lg: 24px;
  --l-lang-panel-width: 84px;
  --l-lang-panel-radius: var(--rounding-12);
  --l-lang-panel-padding: var(--spacing-12);
  --l-lang-panel-gap: var(--spacing-8);
  --l-lang-panel-offset: var(--spacing-12);
  --l-lang-item-radius: var(--rounding-12);
  --l-lang-item-padding: var(--spacing-8) 10px;
  --l-lang-item-font: var(--font-body-font-size);
  /* Прод-компонент набран Inter Medium. Начертание в системе загружено
     (fonts.css), а токена под 500 в шкале нет — она знает только 400 и 600.
     Заводим значение здесь, чтобы не округлять чужой компонент до 600. */
  --l-lang-item-weight: 500;
}

/* ==========================================================================
   УГЛЫ БЛОКА: ТАЙМЕР И АРТ
   --------------------------------------------------------------------------
   Блок «как забрать» шире своего содержимого: три коротких шага не
   заполняют 1080. Пустоту закрывают два угла — счётчик справа сверху
   и объект слева снизу, уходящий за край. Оба absolute внутри .w-group,
   поэтому не влияют на высоту и не ломают сетку шагов.
   ========================================================================== */

:root {
  --l-corner-inset: var(--spacing-20);        /* отступ угла от края блока */
  --l-corner-inset-lg: var(--spacing-32);     /* от 1024 */

  /* Объект в нижнем левом углу */
  --l-corner-art-width: 132px;
  --l-corner-art-width-md: 180px;
  --l-corner-art-width-lg: 232px;
  --l-corner-art-bleed: 12%;                  /* насколько уходит за край */

  /* Счётчик в правом верхнем углу */
  --l-corner-timer-gap: var(--spacing-4);
  --l-corner-timer-radius: var(--rounding-12);

  /* Крупное исполнение счётчика: цифры набраны дисплейным Halvar Breit
     и работают как второй заголовок блока. Ступени — из шкалы героя,
     на две ниже имени, чтобы счётчик не спорил с «Как забрать токен». */
  --l-corner-clock-size:    var(--l-display-hero-font-size-xs);   /* 36 */
  --l-corner-clock-size-lg: var(--l-display-hero-font-size-sm);   /* 44 */
  --l-corner-clock-size-xl: var(--l-display-hero-font-size-md);   /* 56 */
  --l-corner-clock-gap: var(--spacing-16);
  --l-corner-clock-unit: var(--font-caption-s-font-size);

  /* Монеты в левом нижнем углу. Размеры доля от ширины угла, чтобы
     стопка сохраняла пропорции на всех ступенях. */
  /* На мобильном стопка мельче: там шаги идут колонкой, и монеты
     иначе оказываются прямо под последним рядом плашек. */
  --l-corner-coins-width: 108px;
  --l-corner-coins-width-md: 200px;
  --l-corner-coins-width-lg: 260px;
}

/* ==========================================================================
   ПРАВКИ ГЕРОЯ И СЧЁТЧИКА
   ========================================================================== */

:root {
  /* Плашка, которая кончается вордмарком. Правый отступ у обычной плашки
     рассчитан на букву: у скруглённого торца радиус равен половине высоты,
     и знак упирается в кривую. Отступ задаём долей от кегля, чтобы он
     рос вместе с плашкой на всех ступенях шкалы. */
  --l-highlight-padding-mark: 2px 0.42em 5px 8px;
  --l-highlight-padding-mark-xl: 3px 0.42em 6px 16px;

  /* Подложка под текстом героя: слева темнее, к центру сходит на нет.
     Нужна там, где светлое свечение съедает вторичный текст. */
  /* Эллипс ровно по коробке, а не полоса. Радиусы 50%/50% — это половина
     ширины и половина высоты, то есть на 100% градиент касается всех
     четырёх краёв и гаснет точно на границе. Любой другой размер
     оставляет прямой срез с той стороны, до которой он не дотянулся. */
  --l-hero-scrim: radial-gradient(ellipse 50% 50% at 50% 50%,
                    var(--color-background-base-alfa-static-black-60) 0%,
                    var(--color-background-base-alfa-static-black-20) 54%,
                    transparent 100%);

  /* Счётчик как отдельный объект внутри блока */
  --l-clock-card-bg: var(--color-background-base-alfa-static-black-20);
  --l-clock-card-radius: var(--rounding-20);
  --l-clock-card-padding: var(--spacing-16) var(--spacing-20);
}