/**
 * GunCult - CSS Variables (Design Tokens)
 *
 * Только CSS переменные для переиспользования.
 * Этот файл можно безопасно импортировать несколько раз.
 *
 * Цвета: variables-colors.css (Figma: colors / surface / text / border)
 * Размеры, типографика, layout, shadows (dark), motion — здесь.
 */

@import url('variables-colors.css');
/* PT Root UI trial kept on disk: public/css/pt-root-ui.css + public/fonts/pt-root-ui/ */
/* @import url('pt-root-ui.css'); */

:root {
    /* ===================================
       Typography
       =================================== */

    /* Trial: Golos Text (Google Fonts, OFL). Previous stacks left commented. */
    /* --font-family-base: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; */
    /* --font-family-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; */
    /* --font-family-base: 'PT Root UI', sans-serif; */
    --font-family-base: 'Golos Text', sans-serif;
    --font-family-heading: var(--font-family-base);
    /* Display alt (Google Fonts Climate Crisis, Cyrl) — opt-in via .gc-font-heading-alt */
    --font-family-heading-alt: 'Climate Crisis', var(--font-family-heading);
    --font-size-base: 15px;
    --font-weight-base: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Figma text scale (px) — имена как в макете */
    --font-size-11: 11px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-30: 30px;
    --font-size-32: 32px;
    --font-size-36: 36px;
    --font-size-48: 48px;
    --font-size-56: 56px;
    --font-size-60: 60px;
    --font-size-64: 64px;

    --line-height-list-title: 1.375rem;
    --line-height-list-description: 1.125rem;
    --line-height-list-compact: 1rem;
    --line-height-section-heading: 1.7778;
    --line-height-body: 1.375rem;
    --line-height-ui-micro: 0.9375rem;
    /* Многострочный prose (описания, TipTap, modal body) — unitless, масштабируется с font-size */
    --line-height-prose: 1.6;

    /*
     * Figma Text Styles → CSS roles (canonical for new code).
     * Implementation scale: --font-size-* / --line-height-* above.
     */
    --type-ui-micro-size: var(--font-size-11);
    --type-ui-micro-line-height: var(--line-height-ui-micro);
    --type-ui-meta-size: var(--font-size-12);
    --type-ui-meta-line-height: var(--line-height-list-compact);
    --type-ui-caption-size: var(--font-size-13);
    --type-ui-caption-line-height: var(--line-height-list-description);
    --type-ui-title-size: var(--font-size-14);
    --type-ui-title-line-height: var(--line-height-list-title);
    --type-body-size: var(--font-size-15);
    --type-body-line-height: var(--line-height-body);
    --type-heading-h4-size: var(--font-size-16);
    --type-heading-h4-line-height: 1.375;
    --type-heading-h3-size: var(--font-size-18);
    --type-heading-h3-line-height: var(--line-height-body);
    --type-heading-h2-size: var(--font-size-22);
    --type-heading-h2-line-height: 1.75rem;
    --type-heading-h1-size: var(--font-size-30);
    --type-heading-h1-line-height: 2.375rem;

    --gc-list-title-font-size: var(--type-body-size);
    --gc-list-meta-font-size: var(--type-ui-caption-size);

    /* ===================================
       Spacing — Figma Variables (space/* + sm/md-lg)
       Примитивы: --space-* (+ --space-product-*). Новый код — только они и --gc-* / --layout-*.
       Utility-классы: gc-m-2, gc-p-4 (число = Figma space/N); xs/sm/md — legacy alias в spacing-utilities.css.
       =================================== */

    --space-0: 0;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    --space-product-2: 2px;
    --space-product-40: 40px;
    --space-product-56: 56px;
    --space-product-96: 96px;

    /* Figma panel: space/2 (8px) со всех сторон — панели, зоны --list, shell */
    --gc-panel-inset: var(--space-2);
    /* panel-empty-placeholder actions: space/2 (8px) между «Позже» и CTA */
    --gc-panel-empty-placeholder-actions-gap: var(--space-2);
    --gc-list-zone-padding: var(--gc-panel-inset);
    --gc-list-zone-gap: var(--space-1);
    /* Padding строки в --list / --list-cards / interactive-row (space/3 — не тесный space/2) */
    --gc-list-row-padding: var(--space-3);
    --gc-list-zone-content-inset: calc(var(--gc-list-zone-padding) + var(--gc-list-row-padding));

    --gc-list-media-size-base: 44px;
    --gc-list-media-size: var(--gc-list-media-size-base);
    --gc-list-media-size-sm: 36px;
    --gc-list-media-size-md: 32px;
    --gc-list-media-size-xs: 28px;
    --gc-list-media-size-lg: 48px;
    --gc-list-media-radius: var(--radius-12);
    /* Иконочный frame: радиус пропорционален размеру (base 44 → radius/12) */
    --gc-list-media-icon-radius: calc(var(--gc-list-media-size) * var(--radius-12) / var(--gc-list-media-size-base));

    --gc-list-title-font-size-sm: var(--font-size-14);
    --gc-list-title-line-height: var(--line-height-body);
    --gc-list-meta-line-height: var(--line-height-list-description);

    /* Figma list (1260:17247): shell = Surface/Primary; item rest = Secondary — см. styles.css .gc-list-section-shell */
    --gc-list-section-shell-padding: var(--gc-panel-inset);
    --gc-list-section-shell-radius: var(--radius-16);
    --gc-list-section-shell-gap: var(--space-1);
    --gc-list-open-item-bg: var(--surface-secondary);
    --gc-list-open-item-hover-bg: var(--surface-interaction-row-hover);
    /* --gc-interactive-hover-bg, --gc-list-media-frame-bg, --gc-weapon-placeholder-bg — variables-colors.css (light-dark) */
    --gc-weapon-placeholder-border: var(--border-subtle);
    /* Figma canvas section header (1459:19541, 1457:18872) — H4 на canvas, без chip-padding */
    --gc-section-header-trigger-gap: var(--space-1-5);
    --gc-section-header-trigger-padding-block: 0;
    --gc-section-header-trigger-padding-inline: 0;
    --gc-section-header-trigger-radius: 0;
    --gc-section-header-trigger-hover-bg: var(--surface-interaction-control-hover);
    --gc-list-section-header-gap: var(--space-2);
    /* Figma event-card (1558:16816): row height 164px; date-pillar w 129px */
    --gc-event-index-card-date-width: 129px;
    --gc-event-index-card-row-height: 164px;
    /*
     * Файл и слот обложки (герой, баннер, форма): 16:9.
     * Карточки ленты ≥992 кропают файл до 5:2; <992 слот совпадает с файлом.
     * Оружие и брифинги: карточка совпадает с файлом (--gc-media-cover-aspect).
     * Аватары, логотипы и фото приза — 1:1, это не обложки.
     */
    --gc-cover-aspect: 16 / 9;
    --gc-media-cover-aspect: 16 / 9;
    --gc-event-index-card-cover-aspect: 5 / 2;
    /* Figma 1750:9991 — event-card-v2.1 в grid «Сообщества приглашают» */
    --gc-event-index-card-grid-aspect: 5 / 2;
    /* Carousel ≤1279px: тот же слот карточки */
    --gc-event-index-card-grid-aspect-adaptive: 5 / 2;
    /* Legacy v2 head / skeleton: не опираться на fixed strip — см. cover-aspect */
    --gc-event-index-card-surface-height: auto;
    /*
     * Единый фон карточек мероприятий на page ( /events, профиль, @user ).
     * Surface/Secondary: Light gray/0 (белые карточки на page) · Dark gray/900 (lift).
     */
    --gc-event-card-surface: var(--surface-secondary);
    /* Figma event-card-v2.1 (1724:5161) — typography tokens (v2 + v2.1) */
    --gc-event-card-date-day-size: var(--font-size-18);
    --gc-event-card-date-day-line-height: var(--type-heading-h4-line-height);
    --gc-event-card-date-day-weight: 600;
    --gc-event-card-secondary-size: var(--type-ui-title-size);
    --gc-event-card-secondary-line-height: var(--type-ui-title-line-height);
    --gc-event-card-secondary-weight: 400;
    --gc-event-card-price-size: var(--type-ui-caption-size);
    --gc-event-card-price-line-height: var(--type-ui-caption-line-height);
    --gc-event-card-price-weight: 400;
    --gc-event-card-price-emphasis-size: var(--type-body-size);
    --gc-event-card-price-emphasis-line-height: var(--type-body-line-height);
    --gc-event-card-context-size: var(--type-ui-title-size);
    --gc-event-card-context-line-height: var(--type-ui-title-line-height);
    --gc-event-card-title-size: var(--type-body-size);
    --gc-event-card-title-line-height: var(--type-body-line-height);
    --gc-event-card-title-weight: 500;
    --gc-event-index-card-mobile-cover-padding-top: var(--space-16);
    --gc-event-index-card-mobile-date-overlap: 28px;
    /* Figma mobile (1603:5102, 1604:5563): date pt/px space/3 pb space/2 · footer pt space/2 pb/px space/3 */
    --gc-event-index-card-mobile-date-padding: var(--space-3) var(--space-3) var(--space-2);
    --gc-event-index-card-mobile-head-padding-no-cover: var(--space-2) var(--space-3) var(--space-3);
    --gc-event-index-card-mobile-head-padding-cover: var(--space-3);
    --gc-event-index-card-mobile-footer-padding: var(--space-2) var(--space-3) var(--space-3);
    /* Figma event-card author (1591:24979): 40px desktop + mobile */
    --gc-event-index-card-author-avatar-size: var(--space-product-40);
    /* Внутри gc-list-stack-item (строка → callout/опрос): space/2; между пунктами shell — --gc-list-section-shell-gap (xs) */
    --gc-list-stack-item-gap: var(--space-2);
    --gc-list-open-row-padding: var(--space-2);
    --gc-list-section-shell-header-padding-block-end: var(--gc-list-stack-item-gap);
    --gc-list-callout-bg: var(--surface-subtle);
    /* Figma programm info desc (1270:17774): p space/2 (8px) */
    --gc-list-callout-padding: var(--space-2);
    --gc-list-callout-radius: var(--radius-4) var(--radius-16) var(--radius-16) var(--radius-16);

    --gc-month-toggle-padding-block: var(--space-2);
    --gc-month-toggle-padding-inline: var(--space-2);
    --gc-month-toggle-font-size: var(--font-size-14);
    --gc-month-toggle-bg: var(--surface-panel);
    --gc-month-toggle-border-color: var(--border-subtle);
    --gc-month-toggle-hover-bg: var(--surface-secondary);

    --gc-progress-track-height: var(--space-2);
    --gc-progress-segment-gap: var(--space-1);

    /* Shadows (--shadow-*, --gc-rail-section-shadow, --layout-app-rail-shadow) — variables-colors.css (light-dark) */
    --gc-dropdown-backdrop-gradient: linear-gradient(
        180deg,
        transparent 0%,
        transparent 24%,
        color-mix(in srgb, var(--fill-emphasis) 30%, transparent) 58%,
        color-mix(in srgb, var(--fill-emphasis) 52%, transparent) 100%
    );

    /* ===================================
       Border Radius — Figma radius/*
       =================================== */

    --radius-4: 4px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-full: 9999px;

    --gc-corner-outer: var(--radius-16);
    --gc-corner-nest: 0px;
    --gc-corner-inner: max(0px, calc(var(--gc-corner-outer) - var(--gc-corner-nest)));

    --gc-tab-link-min-height: var(--space-8);
    /* Soho control density: sm 32 · md h-9 (36) · pad-x 12 · text 14/medium */
    --gc-btn-sm-min-height: var(--space-8);
    --gc-btn-md-min-height: calc(var(--space-8) + var(--space-1));
    --gc-btn-padding-x-md: var(--space-3);
    --gc-btn-padding-y-md: var(--space-2);
    --gc-btn-padding-y-sm: calc((var(--gc-btn-sm-min-height) - var(--type-ui-caption-line-height) - 2px) / 2);
    --gc-btn-radius: var(--radius-12);
    /* Текстовые 32px — капсула. Квадратные icon-sm (ровно 32) остаются на --gc-btn-icon-radius-sm. */
    --gc-btn-sm-radius: var(--radius-full);
    /* Кнопки ниже 32px — тоже капсула. */
    --gc-btn-xs-radius: var(--radius-full);
    --gc-btn-icon-radius: var(--radius-12);
    --gc-btn-icon-radius-sm: var(--radius-10);
    --gc-btn-min-height: var(--gc-btn-md-min-height);
    --gc-btn-padding-x: var(--gc-btn-padding-x-md);
    --gc-btn-padding-x-sm: var(--space-3);
    --gc-btn-padding-x-lg: var(--space-6);
    --gc-btn-font-size: var(--font-size-14);
    --gc-btn-font-size-sm: var(--font-size-14);
    --gc-btn-font-size-lg: var(--font-size-14);
    --gc-btn-gap: var(--space-1-5);
    /* Rest outline/bordered = --gc-input-border. Hover = --gc-input-border-hover (+1 шаг, не Strong). */
    --gc-btn-outline-border: var(--gc-input-border);
    --gc-btn-outline-border-hover: var(--gc-input-border-hover);
    /* Soft outline ring — тот же rest / hover, что CSS-border у bordered */
    --gc-btn-outline-ring: var(--gc-btn-outline-border);
    --gc-btn-outline-ring-hover: var(--gc-btn-outline-border-hover);
    /* Soft outline: прозрачный fill (surface-agnostic), не surface-panel */
    --gc-btn-outline-hover-bg: color-mix(in srgb, var(--text-primary) 6%, transparent);
    --gc-btn-outline-bg: transparent;
    /*
     * Soft filled (secondary / subtle): читаемый hover (+5–6%), без грязного скачка.
     * Inner-depth — --gc-btn-soft-hover-shadow (glow on/off).
     */
    --gc-btn-secondary-bg: color-mix(in srgb, var(--text-primary) 10%, transparent);
    --gc-btn-subtle-bg: color-mix(in srgb, var(--text-primary) 5%, transparent);
    --gc-btn-secondary-hover-bg: color-mix(in srgb, var(--text-primary) 16%, transparent);
    --gc-btn-subtle-hover-bg: color-mix(in srgb, var(--text-primary) 10%, transparent);
    /* Bordered / soft inner-depth цвета (--gc-btn-bordered-*, --gc-btn-soft-inner-*) — variables-colors.css (light-dark) */
    --gc-btn-soft-hover-shadow:
        inset 0 1px 0 var(--gc-btn-soft-inner-top),
        inset 0 2px 8px var(--gc-btn-soft-inner-spread);
    /* Ghost — surface-agnostic (не surface-sunken: на page сливается) */
    --gc-btn-ghost-hover-bg: color-mix(in srgb, var(--text-primary) 10%, transparent);
    /* Primary hover sheen (--gc-btn-primary-hover-gradient-top) — variables-colors.css (light-dark) */

    /*
     * Inputs — outlined: цвета (--gc-input-bg, -fg, -placeholder, -border, -border-hover, -shadow-…) в variables-colors.css;
     * здесь только размеры. См. docs/ui-kit/COLOR_SURFACES.md § Inputs.
     *
     * Высота md = space/12 (48), не btn md (Soho 36): float-лейбл + value не влезают в 36
     * (pad-top 20 + value ~17 + pad-bottom 8). Спека: gc-input-float.css, FIGMA_COLOR_TOKENS.
     */
    /* Outlined control: radius растёт с size (sm 8 · md 10 · lg 12) */
    --gc-input-radius: var(--radius-10);
    --gc-input-radius-sm: var(--radius-8);
    --gc-input-radius-lg: var(--radius-12);
    --gc-input-min-height: var(--space-12);
    --gc-input-min-height-sm: var(--gc-btn-sm-min-height);
    --gc-input-min-height-lg: var(--space-12);
    --gc-input-padding-x: var(--space-3);
    --gc-input-padding-x-sm: var(--space-2);
    --gc-input-padding-x-lg: var(--space-4);
    --gc-input-font-size: var(--font-size-14);
    --gc-input-font-size-sm: var(--font-size-13);
    --gc-input-font-size-lg: var(--font-size-15);
    --gc-input-icon-inset: var(--space-product-40);

    /*
     * Checkbox box sizes (квадрат, не hit-area).
     * md = form `.gc-checkbox-container`; sm = `.gc-checkbox-sm`;
     * lg = selection mark на media radius-16 + inset space/2 → concentric radius-8.
     */
    --gc-checkbox-size: 20px;
    --gc-checkbox-radius: var(--radius-8);
    --gc-checkbox-sm-size: 16px;
    --gc-checkbox-sm-radius: var(--radius-4);
    --gc-checkbox-lg-size: 24px;
    --gc-checkbox-lg-radius: var(--radius-8);
    /* Inset-list row check — тот же size, острее (плотный list) */
    --gc-checkbox-list-radius: var(--radius-4);

    --gc-dropdown-icon-toggle-size: var(--gc-btn-md-min-height);
    /* Figma btns/icon sm — 32×32; hero ⋯ — 28px в event-show-constructor */
    --gc-dropdown-icon-toggle-size-sm: var(--space-8);
    --gc-dropdown-icon-toggle-size-xs: 28px;
    --gc-dropdown-icon-toggle-radius: var(--gc-btn-icon-radius);
    /* Единый размер шеврона dropdown + select (Phosphor caret, не ::after mask) */
    --gc-dropdown-caret-size: var(--font-size-14);
    --gc-dropdown-caret-width: 5px;
    --gc-dropdown-caret-height: 3px;

    /*
     * Dropdown menu — chromatic glass (always dark, theme-independent).
     * --fill-emphasis / --text-on-solid не инвертируются с data-theme.
     */
    --gc-dropdown-menu-bg: color-mix(in srgb, var(--fill-emphasis) 80%, transparent);
    --gc-dropdown-menu-bg-grouped: color-mix(in srgb, var(--fill-emphasis) 66%, transparent);
    --gc-dropdown-menu-bg-group: color-mix(in srgb, var(--fill-emphasis) 90%, transparent);
    --gc-dropdown-menu-bg-fallback: color-mix(in srgb, var(--fill-emphasis) 97%, transparent);
    --gc-dropdown-menu-border: color-mix(in srgb, var(--text-on-solid) 10%, transparent);
    --gc-dropdown-menu-blur: 20px;
    --gc-dropdown-menu-saturate: 180%;
    --gc-dropdown-menu-text: var(--text-on-solid);
    --gc-dropdown-menu-text-muted: var(--text-on-scrim-muted);
    --gc-dropdown-item-hover-bg: color-mix(in srgb, var(--text-on-solid) 10%, transparent);
    --gc-dropdown-item-icon-bg: color-mix(in srgb, var(--text-on-solid) 8%, transparent);
    --gc-dropdown-item-icon-border: color-mix(in srgb, var(--text-on-solid) 12%, transparent);
    /* Soho rhythm: group p-4, row h-36, item px-12 py-8, gap 10, icon 16px */
    --gc-dropdown-group-padding: var(--space-1);
    --gc-dropdown-item-min-height: 36px;
    --gc-dropdown-item-padding-x: var(--space-3);
    --gc-dropdown-item-padding-y: var(--space-2);
    --gc-dropdown-item-gap: var(--space-2-5);
    --gc-dropdown-item-radius: var(--radius-12);
    --gc-dropdown-item-icon-size: var(--font-size-16);
    --gc-dropdown-cta-bg: var(--gc-dropdown-item-icon-bg);
    --gc-dropdown-cta-hover-bg: color-mix(in srgb, var(--text-on-solid) 14%, transparent);

    --sidebar-profile-header-height: calc(var(--space-12) * 3 + var(--space-8) + var(--space-1));

    /* ===================================
       Z-Index
       =================================== */

    --z-dropdown: 1035;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --gc-modal-overlay-blur-radius: 10px;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;
    --z-search-button: 1040;

    /* ===================================
       Transitions
       =================================== */

    --transition-fast: 150ms;
    --transition-base: 200ms;
    --transition-slow: 300ms;
    --transition-slower: 500ms;

    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ===================================
       Breakpoints
       =================================== */

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    --breakpoint-xs-max: 575.98px;
    --breakpoint-sm-max: 767.98px;
    --breakpoint-md-max: 991.98px;
    --breakpoint-lg-max: 1199.98px;
    --breakpoint-xl-max: 1399.98px;

    /*
     * Вторичный сайдбар (context rail): ≥1280 — 2 колонки; <1280 — main на всю ширину (992–1279 планшет).
     * Ширина: compact <1400 (320px), wide ≥1400 (400px loadout).
     */
    --breakpoint-layout-secondary-sidebar: 1280px;
    --breakpoint-layout-secondary-sidebar-max: 1279px;
    --breakpoint-layout-wide: 1400px;

    /* ===================================
       Layout (dimensions; colors — variables-colors.css)
       =================================== */

    /* Адаптивный лейаут: gap секций (space/3); горизонтальный inset — space/2 (≥1280) */
    --layout-section-gap: var(--space-3);
    --layout-content-inset-x: var(--space-2);

    --layout-page-max-width: 1200px;
    /* Chrome header: rail brand + page subheader (Figma Frame 101 / 1907:17299) */
    --layout-app-chrome-header-height: 56px;
    --layout-three-col-subheader-height: var(--layout-app-chrome-header-height);
    --layout-three-col-subheader-gap: var(--space-4);
    /* Main-колонка с context rail (≥1280). <1280 rail скрыт — колонка на всю .gc-app-main */
    --layout-event-main-max-width: 768px;
    --layout-secondary-sidebar-width: 320px;
    --layout-secondary-sidebar-width-wide: 400px;
    /* Figma space/8 — gap между колонками (split-layout, app-rail → main) */
    --layout-column-gap: var(--space-8);
    --layout-app-rail-icon-width: 80px;
    --layout-app-rail-menu-width: 240px;
    --layout-app-rail-width: calc(var(--layout-app-rail-icon-width) + var(--layout-app-rail-menu-width));
    /* Inset rail от viewport (legacy floating); full-bleed: chrome-width = width */
    --layout-app-rail-gutter: var(--space-4);
    /* Sticky context rail (catalog-sidebar, split-left): линия начала контента под topbar */
    --layout-context-rail-sticky-top: calc(var(--gc-nav-bar-height) + var(--space-2));
    /* Full-bleed слева: body начинается сразу после stack */
    --layout-app-rail-chrome-width: var(--layout-app-rail-width);
    /* Full-bleed справа: context rail (weapon show и др.) */
    --layout-context-rail-chrome-width: var(--layout-event-loadout-sidebar-width);
    --layout-app-rail-shell-radius: var(--radius-16);
    --layout-app-rail-logo-height: calc(var(--space-4) + var(--space-1));
    /* Inset main/топбар от rail — как brand (space/4), не column-gap */
    --layout-app-rail-main-inset-x: var(--space-4);
    --layout-catalog-sidebar-width: var(--layout-secondary-sidebar-width);
    --layout-catalog-sidebar-wide-width: var(--layout-secondary-sidebar-width);
    --layout-event-loadout-sidebar-width: var(--layout-secondary-sidebar-width);
    --layout-channel-sidebar-width: var(--layout-secondary-sidebar-width);
    --gc-nav-bar-height: 58px;
    /* Нижняя капсула (Instagram 2026 Liquid Glass): зазор space/6 + padding + ряд + safe-area */
    --gc-mobile-bottom-nav-outer-height: calc(
        var(--space-6) + var(--space-1) + var(--space-12) + var(--space-1) + env(safe-area-inset-bottom, 0px)
    );
    /* Боковой inset floating-капсулы: уже full-bleed / space-4, шире max-content */
    --gc-mobile-bottom-nav-inset-x: var(--space-6);
    /*
     * Мобильная шапка (Figma 1305:17530): shell без padding; inset только safe-area на .gc-mobile-nav-top.
     * title_bar py lg (12); горизонтальный inset = контент страницы (--layout-content-inset-x).
     */
    --gc-mobile-nav-inset-x: var(--layout-content-inset-x);
    --gc-mobile-nav-glass-blur: 8px;
    --gc-mobile-nav-title-pill-bg: color-mix(in srgb, var(--surface-secondary) 60%, transparent);
    /* nav track (628:774): Figma rgba(255,255,255,0.8) ≈ surface-secondary @ 80% */
    --gc-mobile-nav-nav-track-bg: color-mix(in srgb, var(--surface-secondary) 80%, transparent);
    /*
     * Chrome control (Soho rail icon / subheader glass): 40px.
     * Отдельно от btn md (36) — glass circles и icon-rail держат 40.
     */
    --gc-chrome-control-size: var(--space-product-40);
    --gc-mobile-nav-title-icon-size: var(--gc-chrome-control-size);
    --gc-mobile-nav-sort-icon-size: var(--space-8);
    --gc-mobile-nav-tab-line-height: 20px;
    --gc-mobile-nav-tab-chip-height: 32px;
    --gc-mobile-nav-icon-shadow: 0 6px 12px color-mix(in srgb, var(--fill-emphasis) 8%, transparent);
    /* Subheader glass: короткая тень, без широкого blur mobile-nav */
    --gc-subheader-control-shadow: 0 1px 2px color-mix(in srgb, var(--fill-emphasis) 5%, transparent);
    /* Keyboard focus (chrome + content): рыжая обводка. Не --ui-focus-ring (это soft ring у инпутов). */
    --gc-focus-outline: 2px solid var(--accent-link);
    --gc-focus-outline-offset: 2px;
    --gc-mobile-nav-header-row-min-height: calc(var(--space-3) * 2 + var(--gc-mobile-nav-title-icon-size));
    --gc-mobile-nav-nav-track-padding: var(--space-2);
    --gc-mobile-nav-tabs-row-min-height: calc(
        var(--gc-mobile-nav-nav-track-padding) * 2 + var(--gc-mobile-nav-tab-chip-height)
    );
    --gc-mobile-nav-card-height-expanded: calc(
        var(--gc-mobile-nav-header-row-min-height) + var(--gc-mobile-nav-tabs-row-min-height)
    );
    --gc-mobile-nav-compact-inner-height: var(--gc-mobile-nav-header-row-min-height);
    --gc-mobile-nav-expanded-inner-height: var(--gc-mobile-nav-card-height-expanded);
    /* Page cover backdrop — ambient из обложки (YouTube-style), covers.css + PAGE_COVER_BACKDROP.md */
    --gc-page-cover-backdrop-pull-up-tabs: calc(
        env(safe-area-inset-top, 0px) + var(--gc-mobile-nav-expanded-inner-height)
    );
    --gc-page-cover-backdrop-pull-up-compact: calc(
        env(safe-area-inset-top, 0px) + var(--gc-mobile-nav-compact-inner-height)
    );
    --gc-page-cover-backdrop-pull-up: 0;
    --gc-page-cover-backdrop-fade-at: 50% 0%;
    /* side-pull: компенсация padding-inline gc-app-main; bleed-x: halo blur */
    --gc-page-cover-backdrop-side-pull: 0px;
    --gc-page-cover-backdrop-side-pull-left: var(--gc-page-cover-backdrop-side-pull);
    --gc-page-cover-backdrop-side-pull-right: var(--gc-page-cover-backdrop-side-pull);
    --gc-page-cover-backdrop-bleed-x: calc(var(--gc-page-cover-backdrop-blur-amount) * 0.75);
    --gc-page-cover-backdrop-height: min(32vh, 15rem);
    --gc-page-cover-backdrop-fade-size: 140% 122%;
    --gc-page-cover-backdrop-fade-ellipse-x: 150%;
    --gc-page-cover-backdrop-fade-ellipse-y: 115%;
    --gc-page-cover-backdrop-blur-amount: 4rem;
    --gc-page-cover-backdrop-blur-scale: 1.18;
    --gc-page-cover-backdrop-blur-opacity: 0.48;
    --gc-page-cover-backdrop-blur-saturate: 1.28;
    --gc-page-cover-backdrop-blur-brightness: 0.95;
    --gc-page-cover-backdrop-blur-opacity-reduced: 0.38;
    --gc-page-cover-backdrop-blur-amount-reduced: 1.25rem;
    --gc-scrollbar-comp: 0px;
}

@media (max-width: 1279px) {
    :root {
        --layout-content-inset-x: var(--space-3);
        --layout-section-gap: var(--space-4);
        /* --gc-panel-inset остаётся space/2 (LIST_STACK) — не ужимать до space/1 */
    }
}

@media (min-width: 1280px) {
    :root {
        --gc-page-cover-backdrop-height: min(24vh, 13.5rem);
        --gc-page-cover-backdrop-fade-size: 120% 108%;
        --gc-page-cover-backdrop-fade-ellipse-x: 130%;
        --gc-page-cover-backdrop-fade-ellipse-y: 105%;
        --gc-page-cover-backdrop-blur-amount: 3.25rem;
        --gc-page-cover-backdrop-blur-scale: 1.1;
        --gc-page-cover-backdrop-blur-opacity: 0.4;
        --gc-page-cover-backdrop-blur-saturate: 1.22;
        --gc-page-cover-backdrop-blur-brightness: 0.96;
        --gc-page-cover-backdrop-bleed-x: calc(var(--gc-page-cover-backdrop-blur-amount) * 0.85);
    }
}

@media (min-width: 1400px) {
    :root {
        --layout-catalog-sidebar-width: 300px;
        --layout-catalog-sidebar-wide-width: var(--layout-secondary-sidebar-width-wide);
        --layout-event-loadout-sidebar-width: var(--layout-secondary-sidebar-width-wide);
        --layout-context-rail-chrome-width: var(--layout-secondary-sidebar-width-wide);
        --layout-channel-sidebar-width: 300px;
    }
}

/* ===================================
   Accessibility - Prefers Reduced Motion
   =================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-slower: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}