@import url('https://fonts.googleapis.com/css2?family=Onest:wght@600&family=Source+Sans+3:wght@400;500;600&display=swap');

:root {
  /* Цвета */
  --color-white: #ffffff;
  --color-bg-subtle: #fafcfe;
  --color-bg-muted: #f0f2f5;
  --color-border: #dde3ea;
  --color-text-primary: #1a2332;
  --color-text-secondary: #3d4f5f;
  --color-text-muted: #8a97b1;
  --color-text-placeholder: #5c6b7a;
  --color-text-tertiary: #5a6b7b;
  --color-bg-thumb: #f0f7fc;
  --color-primary: #1565a8;
  --color-primary-dark: #0a3e68;
  --color-primary-mid: #0f4f87;
  --gradient-promo: linear-gradient(90deg, #1565a8 0%, #0f4f87 45%, #0a3d68 100%);

  /* Карточки */
  --shadow-card: 0 2px 12px rgba(26, 35, 50, 0.06);
  --shadow-card-hover: 0 8px 20px rgba(26, 35, 50, 0.12);
  --shadow-nav-button: 0 2px 8px rgba(26, 35, 50, 0.08);
  --color-tile-overlay-rgb: 10, 26, 51;
  --category-grid-tile-overlay-opacity: 0.22;
  --category-grid-tile-overlay-opacity-hover: 0.08;
  --color-media-overlay: rgba(26, 35, 50, 0.06);
  --color-accent: #d84315;
  --color-accent-bg: #e8f2fa;
  --color-bg-sidebar: #f7fafc;
  --color-bg-active: #f0f7fe;
  --color-bg-footer: #f0f5fa;
  --color-bg-catalog: #f0f4f8;

  /* Типографика */
  --font-family-base: 'Source Sans 3', system-ui, sans-serif;
  --font-family-brand: 'Onest', system-ui, sans-serif;
  --font-size-xs: 0.6875rem;  /* 11px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 0.9375rem;  /* 15px */
  --font-size-lg: 1rem;       /* 16px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.125rem;  /* 18px */
  --font-size-label: var(--font-size-xs);
  --font-size-group: 0.75rem;   /* 12px */
  --font-size-link: 0.8125rem;  /* 13px */
  --font-size-2xs: 0.625rem;    /* 10px */
  --font-size-3xl: 1.375rem;    /* 22px */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-height-base: 1.2;

  /* Отступы */
  --spacing-2xs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-base: 12px;
  --spacing-md: 14px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 20px;
  --spacing-btn-y: 10px;

  /* Радиусы */
  --radius-pill: 999px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-checkbox: 4px;

  /* Тени */
  --shadow-header: 0 1px 0 rgba(26, 35, 50, 0.04);
  --shadow-dropdown-desktop: 0 12px 32px rgba(26, 35, 50, 0.12);
  --shadow-dropdown-mobile: 0 8px 24px rgba(26, 35, 50, 0.1);
  --shadow-search-dropdown: 0 12px 32px rgba(26, 35, 50, 0.14);
  --shadow-mini-cart: 0 8px 12px rgba(26, 35, 50, 0.12);
  --shadow-user-menu-desktop: 0 8px 24px rgba(26, 35, 50, 0.12);
  --shadow-modal: 0 12px 16px rgba(26, 35, 50, 0.15);

  /* Формы */
  --color-input-placeholder: #7a97b1;
  --color-focus: #3d8fd4;
  --color-border-hover: #c8d2dc;
  --color-secondary-hover: #e0ecf6;
  --color-buy-active-bg: #d6e6f2;
  --shadow-focus-ring: 0 0 0 2px rgba(61, 143, 212, 0.22);
  --shadow-button-primary-hover: 0 3px 8px rgba(26, 35, 50, 0.12);
  --shadow-button-secondary-hover: 0 2px 6px rgba(26, 35, 50, 0.08);
  --shadow-button-buy-hover: 0 2px 8px rgba(21, 101, 168, 0.12);

  /* Размеры контролов */
  --size-control-sm: 40px;
  --size-control-md: 44px;
  --size-control-lg: 48px;
  --size-touch-target: 36px;
  --size-icon-sm: 20px;
  --size-icon-md: 22px;
  --size-close-btn: 32px;
  --opacity-disabled: 0.45;

  /* Overlay / modal — scrim выше fixed sidebar фильтров (201), header-shell выше scrim */
  --z-index-page-scrim: 250;
  --z-index-header-shell: 300;
  --z-index-overlay: 301;
  --z-index-overlay-panel: 302;
  --modal-width-mobile: var(--layout-panel);
  --modal-width-desktop: 480px;
  --modal-login-width-mobile: var(--layout-panel);
  --modal-login-width-desktop: 420px;
  --shadow-login-modal: 0 12px 32px rgba(26, 35, 50, 0.15);
  --modal-viewport-inset: var(--spacing-lg);
  --modal-padding-mobile: var(--spacing-2xl) var(--spacing-lg);
  --modal-padding-desktop: var(--spacing-xl);
  --modal-gap-mobile: var(--spacing-md);
  --modal-gap-desktop: var(--spacing-lg);
  --form-stack-gap: var(--spacing-base);
  --form-footer-gap: var(--spacing-base);

  /* Promo slider */
  --promo-slider-height-mobile: 120px;
  --promo-slider-height-desktop: 160px;
  --promo-slider-nav-size: 40px;
  --promo-slider-dot-size: 8px;
  --promo-slider-padding-mobile: var(--spacing-base) var(--spacing-lg);
  --promo-slider-padding-desktop: var(--spacing-lg) var(--spacing-xl);
  --promo-slide-padding-mobile: 50px 32px 30px;
  --promo-slide-padding-desktop: 70px 32px 18px;
  --font-size-promo-title-mobile: var(--font-size-3xl);
  --font-size-promo-title-desktop: 1.75rem;
  --font-size-promo-nav-mobile: var(--font-size-lg);
  --font-size-promo-nav-desktop: 1.75rem;

  /* Category grid */
  --category-grid-gap-mobile: var(--spacing-base);
  --category-grid-gap-desktop: var(--spacing-lg);
  --category-grid-padding-mobile: var(--spacing-xl) var(--spacing-lg) 48px;
  --category-grid-padding-desktop: 32px var(--spacing-xl) 40px;
  --category-grid-header-gap-mobile: var(--spacing-base);
  --category-grid-header-gap-desktop: 20px;
  --category-grid-tile-height-mobile: 120px;
  --category-grid-tile-height-desktop: 152px;
  --category-grid-image-height-mobile: 80px;
  --category-grid-image-height-desktop: 108px;
  --category-grid-label-padding-mobile: 5px var(--spacing-sm);
  --category-grid-label-padding-desktop: var(--spacing-btn-y) var(--spacing-base);
  --category-grid-columns-mobile: 2;
  --category-grid-columns-desktop: 4;
  --category-grid-tile-transition-in: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  --category-grid-tile-transition-out: 0.14s ease-out;
  --category-grid-tile-hover-lift: -3px;
  --category-grid-tile-hover-scale: 1.06;
  --category-grid-tile-border-hover: rgba(21, 101, 168, 0.28);
  --shadow-category-tile-hover: 0 12px 28px rgba(21, 101, 168, 0.1), 0 4px 14px rgba(26, 35, 50, 0.08);

  --product-promo-padding-mobile: 48px 0 40px;
  --product-promo-padding-desktop: 32px var(--spacing-xl) 40px;
  --product-promo-carousel-min-height-mobile: 280px;
  --product-promo-carousel-min-height-desktop: 315px;
  --product-promo-fade-width-mobile: 48px;
  --product-promo-fade-width-desktop: 72px;
  --product-promo-fade-bottom-mobile: 112px;
  --product-promo-fade-bottom-desktop: 115px;
  --product-promo-track-gap-mobile: 12px;
  --product-promo-card-width-mobile: 280px;
  --product-promo-card-width-tablet: 220px;
  --product-promo-card-width-desktop: 296px;
  --product-promo-image-height-mobile: 168px;
  --product-promo-image-height-tablet: 180px;
  --product-promo-image-height-desktop: 200px;
  --product-promo-nav-size-mobile: 32px;
  --product-promo-nav-size-desktop: 36px;
  --product-promo-nav-offset-mobile: 10px;
  --product-promo-nav-offset-desktop: 24px;

  /* Анимации */
  --transition-fast: 0.15s ease;
  --transition-slider: transform 0.35s ease;
  --transition-interactive: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);

  /* Прозрачности и градиенты */
  --color-fade-subtle: rgba(250, 252, 254, 0);
  --color-fade-white: rgba(255, 255, 255, 0);
  --color-overlay-promo-light: rgba(255, 255, 255, 0.2);
  --color-overlay-promo-mid: rgba(255, 255, 255, 0.35);
  --color-overlay-scroll: rgba(26, 35, 50, 0.12);
  --color-backdrop: rgba(26, 35, 50, 0.35);

  /* Layout */
  --layout-mobile: 360px;
  --layout-panel: 328px;
  --layout-desktop: 1280px;
  --layout-content-max: min(100vw - var(--spacing-xl) * 2, var(--layout-desktop));
  --layout-inline-offset: 0px;
  --header-mobile-height: 168px;

  /* Catalog filter */
  --color-bg-filter-nav: #eef4fa;
  --shadow-filter-sidebar: 0 2px 6px rgba(26, 35, 50, 0.06);
  --catalog-filter-width-sidebar: 260px;
  --catalog-filter-sheet-height: 680px;

  /* Product page */
  --qty-stepper-cell: 32px;
  --qty-stepper-width: 96px;
  --product-gallery-thumb: 52px;
  --product-gallery-main-height-mobile: 240px;
  --product-gallery-main-height-desktop: 308px;
  --product-tabs-clip-height: 174px;
  --product-tabs-overlay-max-height: 520px;
  --product-sku-table-head-height: 48px;
  --product-sku-scroll-fade-width: 32px;
  --product-sku-scrollbar-track: #f0f2f5;
  --product-sku-row-in-cart: #f8fbfd;
  --color-stock-unavailable: #8a97a8;
  --color-stock-unavailable-bg: #eef1f5;

  /* Footer */
  --color-footer-muted: #b8c4d0;
  --color-footer-link: #7eb8e8;
  --color-footer-rating-bg: #243044;
  --color-footer-rating-border: #2d3a4a;

  /* Статусы */
  --color-stock-available: #2e7d32;
  --color-stock-bg: #e8f5e9;
  --color-stock-order: #b45309;
  --color-stock-order-bg: #fff3e0;

  /* Order status — обзор ЛК */
  --color-order-status-delivery-bg: #fff3e0;
  --color-order-status-delivery-text: #b45309;
  --color-order-status-delivered-bg: #e8f5ec;
  --color-order-status-delivered-text: #1b7a3a;

  /* Order status — карточка «Мои заказы» */
  --color-order-status-card-processing-bg: #fff6db;
  --color-order-status-card-processing-text: #92560f;
  --color-order-status-card-shipped-bg: #e0f2ff;
  --color-order-status-card-shipped-text: #1852a1;
  --color-order-status-card-completed-bg: #e1f9e9;
  --color-order-status-card-completed-text: #166b3f;
  --color-order-status-cancelled-bg: #f3f4f6;
  --color-order-status-cancelled-text: #6b7280;
  --color-order-status-card-cancelled-bg: #f3f4f6;
  --color-order-status-card-cancelled-text: #6b7280;

  /* Order item */
  --color-order-item-alt-bg: #fafbfc;
  --color-order-item-card-bg: #f8fbfe;
  --color-order-item-date-muted: #6b7280;
  --color-orders-section-head-bg: #f8fafd;
  --color-orders-filters-border: #e2eaf4;
  --color-orders-filters-label: #647288;

  /* Breakpoints (для справки в JS) */
  --breakpoint-desktop: 1280px;
}