itube-specs 0.0.857 → 0.0.858

package/assets/scss/themes/dark/_theme.scss

@@ -0,0 +1,961 @@
+@use 'vars/palette' as *;
+
+$bg-fade-0: $color-zinc-950-0; // прозрачный
+
+// ============================================
+// DARK THEME (default)
+// ============================================
+// ─── Fonts & rendering ───
+$default-font-family: 'Geist', system-ui, -apple-system, sans-serif;
+
+// ─── Body ───
+$body-bg: $color-black;
+$body-text: $color-white;
+$main-bg: $color-black;
+
+// ─── Link ───
+$link-text: $color-white;
+
+// ─── Cards (shared) ───
+$card-ring-shadow--hover: none;
+
+// ─── Scrollbar ───
+$scrollbar-thumb: $color-zinc-700;
+$scrollbar-thumb--hover: $color-zinc-600;
+
+// ─── Layout ───
+$layout-header-border: $color-zinc-800-30;
+$layout-nav-border: $color-zinc-800-50;
+$layout-skip-link-bg: $color-zinc-800-60;
+$layout-skip-link-text: $color-white;
+
+// ─── Page footer links (mixin) ───
+$page-footer-links-border: $color-zinc-800;
+$nav-bg: $color-zinc-800-60;
+$nav-bg--active: $color-indigo-600-20;
+$nav-bg--hover: $color-zinc-700-70;
+$nav-text: $color-zinc-300;
+$nav-text--active: $color-white;
+$nav-text--hover: $color-zinc-300;
+$nav-font-weight: 400;
+$nav-border--active: $color-indigo-500-50;
+$nav-border--hover: transparent;
+$nav-border: $color-zinc-700-50;
+$nav-icon: $color-zinc-400;
+$nav-icon-accent: $color-red-400;
+$nav-icon--active: $nav-text--active;
+$nav-container-bg: $color-black;
+$nav-down-icon: $color-zinc-500;
+$nav-menu-bg: $color-zinc-900;
+$nav-container-border: transparent;
+$nav-menu-item-bg--hover: $color-zinc-800;
+$nav-menu-item-icon: $color-zinc-400;
+
+// ─── Кнопки Сhips ───
+$chips-bg: $color-zinc-800-50;
+$chips-bg--hover: $color-zinc-700;
+$chips-alphabet-bg--active--hover: $color-indigo-600;
+$chips-bg--active: $color-zinc-700;
+$chips-text: $color-zinc-400;
+$chips-text--hover: $color-white;
+$chips-text--active: $color-white;
+$chips-micro-bg: $color-zinc-800;
+$chips-micro-text: $color-zinc-400;
+$chips-small-bg: $color-zinc-800-50;
+$chips-small-bg--hover: $color-zinc-700;
+$chips-small-text: $color-zinc-400;
+$chips-bg-alphabet: $color-zinc-800-50;
+$chips-bg-alphabet--hover: $color-zinc-700;
+
+// ─── Input ───
+$input-bg: $color-zinc-800-50;
+$input-text: $color-white;
+$input-placeholder: $color-zinc-500;
+$input-border: $color-zinc-700;
+$input-border--focus: $color-zinc-600;
+$input-label: $color-zinc-400;
+$input-icon: inherit;
+$input-pre-icon: $color-zinc-500;
+$input-s-bg: $color-zinc-800;
+$input-s-border: transparent;
+$input-s-border--focus: $color-zinc-600;
+$input-text--disabled: $color-zinc-400;
+$input-text--error: $color-red-500;
+$input-border--error: $color-red-500;
+$input-autofill-text: $color-white;
+$input-button-text: $color-zinc-500;
+$input-button-text--hover: $color-white;
+
+// ─── Surfaces ("островки") ───
+// Тёмная тема подложки не различает — пустая карта, ничего не печатается.
+$surfaces: ();
+
+// ─── Segmented Control ───
+$segmented-label: $color-zinc-300;
+$segmented-bg: $color-zinc-800-50;
+$segmented-bg--small: $color-zinc-800;
+$segmented-text: $color-zinc-400;
+$segmented-text--hover: $color-zinc-300;
+$segmented-bg--active: $color-indigo-600;
+$segmented-text--active: $color-white;
+$segmented-label-icon: $color-zinc-400;
+
+// ─── Count ───
+$count-bg: $color-zinc-800;
+$count-text: $color-zinc-400;
+
+// ─── Search ───
+$search-bg: $color-zinc-800;
+$search-text: $color-white;
+$search-bg--mobile: $color-zinc-800;
+$search-border--active--mobile: $color-indigo-500;
+$search-border--mobile: $color-zinc-700-50;
+$search-text--mobile: $color-white;
+$search-placeholder--mobile: $color-zinc-500;
+$search-placeholder: $color-zinc-500;
+$search-border: $color-zinc-700-50;
+$search-border--active: $color-indigo-500;
+$search-button-bg: $color-indigo-600;
+$search-button-bg--hover: $color-indigo-500;
+$search-max-width: 500px;
+$search-max-width-md: 672px;
+$search-mobile-bg: $mono-black-95;
+$search-mobile-border: $color-zinc-800;
+$search-mobile-decorate: $mono-black-50;
+$search-mobile-button: $color-zinc-200;
+
+// ─── Search result ───
+$search-result-bg: $color-zinc-900;
+$search-result-bg--mobile: $color-zinc-900;
+$search-result-border: $color-zinc-800;
+$search-result-border--mobile: $color-zinc-800;
+$search-result-shadow: 0 25px 50px -12px #{$mono-black-25};
+
+// ─── Pagination ───
+$pagination-bg: $color-zinc-800-50;
+$pagination-bg--hover: $color-zinc-700;
+$pagination-bg--active: $color-indigo-600;
+$pagination-text: $color-zinc-400;
+$pagination-text--hover: $color-white;
+$pagination-text--active: $color-white;
+
+// ─── Popup ───
+$popup-header-bg: $color-black;
+$popup-content-bg: $color-night;
+$popup-decorate-bg: $mono-black-70;
+$popup-min-width: 446px;
+$popup-auth-size: 32px;
+$popup-auth-icon: $color-indigo-900;
+$popup-auth-icon-bg: $color-indigo-600;
+$popup-border: $color-zinc-800;
+$popup-footer-border: transparent;
+$popup-text: $color-white;
+$popup-scrollbar: $color-zinc-800;
+$popup-close-icon: $color-zinc-400;
+$popup-close-icon--hover: $color-white;
+
+// ─── Additional links ───
+$additional-links-text: $color-zinc-400;
+$additional-links-text--hover: $color-white;
+$additional-links-separator: $color-zinc-600;
+
+// ─── Breadcrumbs ───
+$breadcrumbs-text: $color-zinc-500;
+$breadcrumbs-text--current: $color-zinc-400;
+$breadcrumbs-text--hover: $color-white;
+
+// ─── Letter ───
+$letter-size: 40px;
+$letter-bg: $color-zinc-300;
+$letter-text: $color-zinc-900;
+
+// ─── Categories ───
+$categories-link-text: $color-zinc-400;
+$categories-link-text--hover: $color-indigo-400;
+$categories-link-text-top: $color-white;
+$categories-link-count: $color-zinc-600;
+$categories-section-icon: $color-zinc-500;
+$categories-link-mobile-bg: $color-zinc-800-60;
+$categories-link-top-bg: $color-zinc-700-80;
+$categories-link-mobile-text: $color-zinc-300;
+$categories-link-mobile-border: $color-zinc-700-50;
+$categories-link-all-bg: $color-zinc-800;
+$categories-link-all-text: $color-zinc-300;
+$categories-link-all-bg--hover: $color-zinc-700;
+
+// ─── Category card ───
+$category-card-bg: $color-zinc-900-50;
+$category-card-border: $color-zinc-800-50;
+$category-card-border--hover: $color-zinc-700;
+$category-card-title--hover: $color-indigo-400;
+$category-card-subtext: $color-zinc-500;
+$category-card-wrapper-bg: $color-zinc-800-50;
+$category-card-title: $color-white;
+
+// ─── Video card ───
+$video-card-text: $color-white;
+$video-card-text--hover: $color-indigo-400;
+$video-card-dropdown-icon: $color-zinc-500;
+$video-card-dropdown-icon--hover: $color-white;
+$video-card-resolution-bg: $color-green-500;
+$video-card-resolution-text: $mono-black-100;
+$video-card-secondary: $color-zinc-500;
+$video-card-mini-title: $color-zinc-300;
+$video-card-mini-weight: 400;
+$video-card-user-text: $color-zinc-400;
+$video-card-user-bg: $color-zinc-700;
+$video-card-preview-loader-bg: linear-gradient(to right, $color-indigo-muted, $color-indigo-deep);
+
+// ─── Video card dropdown ───
+$video-card-dropdown-border: $color-zinc-800;
+$video-card-dropdown-size--hover: 1;
+
+// ─── Video info ───
+$video-info-item-text: $color-zinc-500-70;
+$video-info-handler-text: $color-zinc-400;
+$video-info-description-text: $color-zinc-400;
+
+// ─── Video interface ───
+$video-interface-button-bg: $color-zinc-800;
+$video-interface-button-text: $color-zinc-400;
+$video-interface-button-bg--hover: $color-zinc-700;
+$video-interface-button-text--hover: $color-white;
+
+// ─── Video channel ───
+$video-channel-bg: $color-zinc-800-60;
+$video-channel-initials-gradient-from: $color-indigo-500;
+$video-channel-initials-gradient-to: $color-purple-600;
+$video-channel-initials-text: $color-white;
+$video-channel-name: $color-zinc-300;
+$video-channel-name--hover: $color-white;
+$video-channel-subscribe-text: $color-white;
+$video-channel-subscribe-bg: $color-indigo-600;
+$video-channel-subscribe-bg--hover: $color-indigo-500;
+$video-channel-count: $color-zinc-500;
+
+// ─── Video sponsored ───
+$video-sponsored-bg: $color-indigo-800;
+$video-sponsored-site-text: $color-zinc-500;
+
+// ─── Video follow ───
+$video-follow-bg: $color-zinc-900;
+$video-follow-text: $color-white;
+$video-follow-count: $color-zinc-500;
+
+// ─── Video autoplay ───
+$video-autoplay-text: $color-zinc-500;
+
+// ─── Video playlist ───
+$video-playlist-bg: $color-zinc-925;
+$video-playlist-border: $color-zinc-800;
+$video-playlist-row-shadow-start: $bg-fade-0;
+$video-playlist-row-shadow-end: $video-playlist-bg;
+$video-playlist-header-border: $color-zinc-800;
+$video-playlist-now-text: $color-zinc-400;
+$video-playlist-now-value: $color-white;
+$video-playlist-title-text: $color-white;
+$video-playlist-now-border: $color-zinc-800;
+$video-playlist-list-bg: $color-zinc-925;
+$video-playlist-card-bg: transparent;
+$video-playlist-card-bg--hover: $color-zinc-800-50;
+$video-playlist-card-border: transparent;
+$video-playlist-card-border--hover: transparent;
+$video-playlist-card-border--active: transparent;
+$video-playlist-card-count-text: $color-zinc-500;
+$video-playlist-card-bg--active: $color-zinc-800-70;
+$video-playlist-card-title--active: $color-indigo-400;
+$video-playlist-card-dropdown-text: $color-zinc-500;
+$video-playlist-card-dropdown-text--hover: $color-white;
+$video-playlist-header-button-text: $color-zinc-400;
+$video-playlist-header-button-bg--hover: $color-zinc-800;
+$video-playlist-header-button-text--hover: $color-white;
+$video-playlist-header-button-text--active: $color-indigo-400;
+$video-playlist-header-button-bg--active: $color-indigo-500-10;
+
+// ─── Like ───
+$like-text: $color-zinc-400;
+$like-icon: $color-zinc-400;
+$like-text--hover: $color-white;
+$like-icon--active: $color-green-500;
+$like-icon-dislike--active: $color-red-500;
+$like-bar-bg: $color-zinc-700;
+$like-bar-likes: $color-zinc-500;
+
+// ─── Playlist input ───
+$playlist-input-label: $color-white;
+$playlist-input-toggle-icon: $color-zinc-500;
+$playlist-input-toggle-icon--active: $color-zinc-400;
+$playlist-input-hint-text: $color-zinc-900;
+$playlist-input-hint-bg: $color-zinc-600;
+$playlist-input-hint-bg--hover: $color-zinc-500;
+$playlist-input-back: $color-zinc-500;
+$playlist-input-back--hover: $color-white;
+$playlist-input-tooltip-highlight: $color-white;
+$playlist-input-delete-text: $color-red-400;
+$playlist-input-delete-bg: $color-red-500-10;
+$playlist-input-delete-bg--hover: $color-red-500-20;
+
+// ─── Playlist add ───
+$playlist-add-item-bg--hover: $color-zinc-800-50;
+$playlist-add-item-border: $color-zinc-800;
+$playlist-add-item-icon: $color-zinc-500;
+$playlist-add-item-icon-first: $color-zinc-400;
+$playlist-add-item-text: $color-white;
+$playlist-add-item-new: $color-indigo-400;
+$playlist-add-item-edit: $color-zinc-500;
+$playlist-add-item-edit--hover: $color-white;
+
+// ─── Playlist edit ───
+$playlist-edit-border: $color-zinc-800;
+$playlist-edit-icon: $color-indigo-600;
+
+// ─── Playlist delete video ───
+$playlist-delete-video-icon: $color-indigo-600;
+
+// ─── Popular card ───
+$card-round-size: 96px;
+$card-round-text: $color-zinc-200;
+$card-round-text--hover: $color-indigo-400;
+$card-round-subtext: $color-zinc-500;
+$card-round-border: $color-zinc-700;
+$card-round-border--hover: $color-zinc-500;
+$card-round-all-bg: $color-night;
+$card-round-all-bg--hover: $color-night;
+$card-round-all-text: $color-zinc-400;
+
+// ─── Language ───
+$language-text: $color-zinc-300;
+$language-border: $color-zinc-800;
+$language-angle: $color-zinc-500;
+$language-icon: $color-zinc-400;
+$language--current: $color-zinc-500;
+$language-title: $color-zinc-500;
+$language-item-text: $color-zinc-300;
+$language-item-bg--hover: $color-zinc-800;
+$language-item-text--current: $color-white;
+$language-item-bg--current: $color-zinc-700;
+$language-value-text: $color-white;
+$language-description: $color-zinc-500;
+$language-empty-text: $color-zinc-300;
+
+// ─── Footer language ───
+$footer-language-bg: $color-zinc-800-50;
+$footer-language-bg--hover: $color-zinc-700;
+$footer-language-text: $color-zinc-400;
+$footer-language-menu-bg: $color-zinc-800;
+$footer-language-menu-border: $color-zinc-700;
+$footer-language-item-text: $color-zinc-300;
+$footer-language-item-bg--active: $color-indigo-600-20;
+$footer-language-item-text--active: $color-indigo-400;
+
+// ─── Burger ───
+$burger-backdrop: $mono-black-50;
+$burger-bg: $color-zinc-900-98;
+$burger-border: transparent;
+$burger-buttons-border: $color-zinc-800;
+$burger-button-text: $color-zinc-300;
+$burger-button-icon-bg: $color-zinc-800;
+$burger-menu-border: $color-zinc-800;
+$burger-close-bg: $color-zinc-700;
+$burger-close-text: $color-zinc-300;
+
+// ─── Burger menu item ───
+$burger-menu-item-text: $color-zinc-300;
+$burger-menu-item-icon: $color-zinc-400;
+$burger-menu-item-bg--active: $color-indigo-600-20;
+$burger-menu-item-text--active: $color-white;
+$burger-menu-item-icon--active: $color-indigo-400;
+$burger-menu-item-accent-icon: $nav-icon-accent;
+$burger-menu-item-child-text: $color-zinc-400;
+$burger-menu-item-child-icon: $color-zinc-500;
+
+// ─── Header ───
+$header-bg: $color-black;
+$header-burger-icon: $color-zinc-200;
+$header-user-icon: $color-zinc-500;
+$header-language-trigger: $color-zinc-400;
+$header-language-angle--hover: $color-white;
+$header-language-menu-bg: $color-night;
+$header-language-menu-border: $color-zinc-800;
+$header-language-menu-item--hover: $color-zinc-800-50;
+
+// ─── Header user ───
+$header-user-trigger-icon: $color-zinc-400;
+$header-user-dropdown-bg: $color-night;
+$header-user-dropdown-border: $color-zinc-800;
+$header-user-profile-border: $color-zinc-800;
+$header-user-profile-bg--hover: $color-zinc-800-50;
+$header-user-profile-text: $color-zinc-500;
+$header-user-profile-title: $color-white;
+$header-user-item-text: $color-zinc-300;
+$header-user-item-bg--hover: $color-zinc-800-50;
+$header-user-links-border: $color-zinc-800;
+$header-user-item-icon: $color-zinc-400;
+
+// ─── Footer ───
+$footer-bg: $color-black;
+$footer-text: $color-white;
+$footer-copyright: $color-zinc-600;
+$footer-disclaimer: $color-zinc-600;
+$footer-links-border: $color-zinc-800-50;
+
+// ─── Cookie ───
+$cookie-text: $color-zinc-500;
+
+// ─── Dropdown menu ───
+$dropdown-menu-bg: $color-zinc-800;
+$dropdown-menu-bg--hover: $color-zinc-700;
+$dropdown-menu-text: $color-zinc-200;
+$dropdown-menu-border: $color-zinc-700;
+$dropdown-mobile-bg: $color-zinc-900;
+$dropdown-mobile-border: $color-zinc-800;
+$dropdown-mobile-item-text: $color-white;
+$dropdown-mobile-icon: $color-zinc-500;
+$dropdown-icon: $color-zinc-400;
+$dropdown-crest: $color-zinc-500;
+$dropdown-separator: $color-zinc-800-60;
+
+// ─── Snackbar ───
+$snackbar-bg: $color-zinc-800;
+$snackbar-text: $color-zinc-200;
+$snackbar-border: $color-zinc-700;
+$snackbar-close: $color-zinc-500;
+$snackbar-close--hover: $color-zinc-300;
+$snackbar-close-bg--hover: $color-zinc-700;
+$snackbar-success: $color-green-200;
+$snackbar-success-bg: $color-green-925;
+$snackbar-success-icon: $color-green-300;
+$snackbar-success-icon-bg: $color-green-800;
+$snackbar-error: $color-red-200;
+$snackbar-error-bg: $color-red-925;
+$snackbar-error-icon: $color-red-300;
+$snackbar-error-icon-bg: $color-red-800;
+
+// ─── Button ───
+$button-primary-bg: $color-indigo-600;
+$button-primary-bg--hover: $color-indigo-500;
+$button-primary-text: $color-white;
+$button-primary-border: transparent;
+$button-text: $color-white;
+$button-border: transparent;
+$button-secondary-bg: $color-zinc-800-60;
+$button-secondary-bg--hover: $color-zinc-700-70;
+$button-secondary-bg--active: $color-indigo-600;
+$button-secondary-text: $color-zinc-400;
+$button-secondary-text--active: $color-white;
+$button-secondary-border: $color-zinc-700-50;
+$button-secondary-border--active: $color-indigo-500;
+$button-secondary-icon: $color-indigo-600;
+$button-muted-bg: $color-zinc-800;
+$button-muted-text: $color-zinc-300;
+$button-muted-bg--hover: $color-zinc-700;
+$button-muted-border: transparent;
+$button-muted-border--hover: transparent;
+
+// Вид кнопки в конкретном месте: ключ → имя варианта. Ключа нет — вариант
+// берётся из пропа theme= на вызове.
+$button-variant-overrides: ();
+$button-warning-bg: $color-red-600-20;
+$button-warning-border: $color-red-600-30;
+$button-warning-text: $color-red-400;
+$button-warning-bg--hover: $color-red-600-30;
+
+// ─── Notification ───
+$notification-bg: $color-zinc-900;
+$notification-text: $color-white;
+$notification-content-text: $color-zinc-500;
+
+// ─── Swiper ───
+$swiper-fade: $color-black;
+$swiper-fade-end: $bg-fade-0;
+$swiper-nav-border: transparent;
+$swiper-nav-bg: transparent;
+$swiper-nav-bg--hover: transparent;
+$swiper-nav-text: $color-white;
+$swiper-nav-shadow: transparent;
+
+// ─── Select ───
+$select-icon: $color-zinc-400;
+$select-bg: $color-zinc-800-60;
+$select-border: $color-zinc-700;
+$select-text: $color-zinc-300;
+$select-placeholder: $color-zinc-500;
+$select-label: $color-zinc-400;
+$select-label-secondary: $color-zinc-300;
+$select-border-secondary: $color-zinc-700-50;
+$select-option-bg: $color-black;
+$select-option-text: $color-white;
+$select-count-bg--active: $color-indigo-600;
+$select-count-text--active: $color-white;
+$select-bg--active: color-mix(in oklch, #{$color-indigo-500} 10%, transparent);
+$select-border--active: $color-indigo-500;
+
+// ─── Toggle ───
+$toggle-bg: $color-zinc-700;
+$toggle-bg--active: $color-emerald-500;
+$toggle-handle: $mono-white-50;
+$toggle-handle--active: $mono-white-100;
+$toggle-text--disabled: $mono-white-25;
+$toggle-handle--disabled: $mono-white-25;
+
+// ─── Checkbox ───
+$checkbox-border: $color-zinc-600;
+$checkbox-color: $color-white;
+$checkbox-bg--checked: $color-indigo-600;
+$checkbox-border--checked: $color-indigo-600;
+$checkbox-label: $color-zinc-400;
+$checkbox-label--hover: $color-zinc-300;
+$checkbox-description: $color-zinc-500;
+$checkbox-border--disabled: $color-zinc-800;
+$checkbox-text--disabled: $color-zinc-400;
+$checkbox-border--error: $color-red-500;
+
+// ─── Radio ───
+$radio-border: $color-zinc-600;
+$radio-bg: $color-zinc-800;
+$radio-border--checked: $color-indigo-600;
+$radio-bg--checked: $color-indigo-600;
+$radio-label: $color-white;
+$radio-label--hover: $color-zinc-300;
+$radio-description: $color-zinc-500;
+$radio-border--disabled: $color-zinc-800;
+$radio-text--disabled: $color-zinc-400;
+$radio-border--error: $color-red-500;
+
+// ─── Label ───
+$label-primary-bg: $color-indigo-600;
+$label-primary-text: $color-white;
+$label-gradient-bg: $color-indigo-600;
+$label-gradient-text: $color-white;
+$label-yellow-bg: $color-amber-500;
+$label-yellow-text: $mono-black-100;
+$label-green-bg: $color-green-500;
+$label-green-text: $color-white;
+$label-white-bg: $mono-white-75;
+$label-white-text: $color-zinc-400;
+$label-black-bg: $color-black;
+$label-black-text: $color-white;
+$label-bordered-text: $color-zinc-500;
+$label-bordered-border: $color-zinc-800;
+$label-backdrop-bg: $mono-black-50;
+$label-backdrop-text: $mono-white-75;
+
+// ─── Tooltip ───
+$tooltip-bg: $color-zinc-800;
+$tooltip-text: $color-zinc-300;
+$tooltip-shadow: 0 4px 12px rgb(0 0 0 / 25%);
+
+// ─── Avatar ───
+$avatar-gradient-from: $color-indigo-600;
+$avatar-gradient-to: $color-indigo-800;
+$avatar-text: $color-white;
+
+// ─── Setup (profile) ───
+$setup-avatar-edit-bg: $color-zinc-700;
+$setup-avatar-edit-border: $color-zinc-900;
+$setup-avatar-edit-text: $color-zinc-300;
+$setup-avatar-edit-bg--hover: $color-zinc-600;
+$setup-delete-bg: $color-red-500;
+$setup-delete-bg--hover: $color-red-600;
+$setup-delete-text: $color-white;
+$setup-delete-border: $color-zinc-900;
+$setup-members-text: $color-zinc-500;
+$setup-border: $color-zinc-800;
+$setup-history-icon: $color-zinc-400;
+$setup-history-text: $color-zinc-300;
+
+// ─── Profile guest ───
+$profile-guest-description: $color-zinc-500;
+
+// ─── Delete profile ───
+$delete-profile-text: $color-zinc-500;
+
+// ─── Options panel ───
+$options-panel-filter-border: $color-zinc-700;
+$options-panel-count-border: $color-zinc-800;
+
+// ─── Pagination (extra) ───
+$pagination-bg--disabled: $color-zinc-800;
+$pagination-text--disabled: $color-zinc-300;
+
+// ─── Expand row ───
+$expand-row-fade-start: $bg-fade-0;
+$expand-row-fade-end: $color-black;
+$expand-row-link-border: $color-zinc-800;
+$expand-row-pre-text: $color-zinc-500;
+
+// ─── Full description ───
+$full-description-text: $color-zinc-400;
+$full-description-bg: $color-zinc-800-50;
+
+// ─── Swiper items ───
+$swiper-items-all-text: $color-zinc-400;
+
+// ─── Report ───
+$report-category-border: $color-zinc-800;
+$report-category-bg--hover: $color-zinc-800-50;
+$report-category-icon: $color-zinc-600;
+$report-category-icon-desktop: $color-zinc-500;
+$report-text: $color-zinc-400;
+$report-required: $color-red-500;
+$report-text--error: $color-red-500;
+
+// ─── Model filters ───
+$model-filters-border: $color-zinc-800;
+
+// ─── Share ───
+$share-cancel-border: $color-zinc-800;
+$share-button-copy-bg: $color-zinc-800;
+$share-copy-bg: $color-zinc-800-50;
+$share-copy-border: $color-zinc-700;
+$share-copy-url-text: $color-zinc-300;
+$share-copy-button: $color-zinc-500;
+$share-copy-button-desktop: $color-zinc-400;
+$share-copy-button--hover: $color-white;
+$share-copy-accent: $color-green-500;
+
+// ─── SEO footer text ───
+$seo-footer-text: $color-zinc-400;
+$seo-footer-link: $color-indigo-400;
+$seo-footer-link--hover: $color-indigo-300;
+$seo-footer-bg: $color-zinc-800-50;
+
+// ─── Empty ───
+$empty-text: $color-zinc-500;
+
+// ─── Filter chips ───
+$filter-chips-border: $color-zinc-700;
+$filter-chips-bg: $color-zinc-800;
+$filter-chips-text: $color-zinc-300;
+$filter-chips-bg--hover: $color-zinc-700;
+$filter-chips-close: $color-zinc-500;
+
+// ─── Filter button ───
+$filter-button-count-bg: $color-zinc-300;
+$filter-button-count-text: $color-indigo-700;
+
+// ─── Filter popup ───
+$filter-popup-border: $color-zinc-800;
+$filter-popup-main-border: $color-zinc-800;
+$filter-popup--active: $color-zinc-400;
+$filter-popup-active-bg: $color-zinc-800;
+$filter-popup-quick-title: $color-zinc-400;
+$filter-popup-group-border: $color-zinc-800;
+$filter-popup-summary-description: $color-zinc-500;
+$filter-popup-active-chip-bg: $color-indigo-600;
+$filter-popup-active-chip-bg--hover: $color-indigo-500;
+$filter-popup-active-chip-border: $color-indigo-600;
+$filter-popup-active-chip-text: $color-white;
+$filter-popup-active-chip-close: $color-white;
+
+// ─── Player menu (external drawer) — под мини-стенд v0 ───
+$player-menu-bg: $color-zinc-900;                    // bg-zinc-900
+$player-menu-row-border: $color-zinc-800-60;         // border-zinc-800/60
+$player-menu-row-text: $color-zinc-200;              // text-zinc-200
+$player-menu-value: $color-zinc-400;                 // text-zinc-400
+$player-menu-icon: $color-zinc-500;                  // chevron closed: text-zinc-500
+$player-menu-icon--open: $color-white;               // chevron open: text-white
+$player-menu-option-text: $color-zinc-300;
+$player-menu-option-bg--active: $mono-white-10;      // bg-white/10
+$player-menu-option-text--active: $color-white;
+$player-menu-option-bar--active: $color-zinc-400;    // bg-zinc-400
+$player-menu-row-bg--hover: $mono-white-10;
+$player-menu-option-bg--hover: $mono-white-5;        // hover:bg-white/5
+$player-menu-toggle-bg--active: $color-indigo-500;   // switch on: bg-indigo-500
+
+// accordion (scene types)
+$player-menu-acc-border: $color-zinc-800-60;         // border-zinc-800/60
+$player-menu-acc-head-text: $color-zinc-200;         // text-zinc-200
+$player-menu-acc-head-text--open: $color-white;      // text-white
+$player-menu-acc-head-bg--hover: $mono-white-5;      // hover:bg-white/5
+$player-menu-scene-text: $color-zinc-400;            // text-zinc-400
+$player-menu-scene-text--current: $color-white;      // text-white
+$player-menu-scene-bg--current: $mono-white-10;      // bg-white/10
+$player-menu-scene-bg--hover: $mono-white-5;         // hover:bg-white/5
+$player-menu-scene-bar--current: $color-zinc-400;    // bg-zinc-400
+$player-menu-scene-time: $color-zinc-500;            // text-zinc-500
+$player-menu-scene-time--current: $color-zinc-200;   // text-zinc-200
+$player-menu-section-title: $color-zinc-400;
+
+// ─── Filter page ───
+$filter-page-group-title: $color-white;
+$filter-page-group-border: $color-zinc-800;
+
+// ─── Search ───
+$search-close-bg: $color-zinc-700;
+$search-close-text: $color-zinc-300;
+
+// ─── Search item ───
+$search-item-text: $color-zinc-400;
+$search-item-text--mobile: $color-zinc-400;
+$search-item-text--hover: $color-white;
+$search-item-bg--hover: $color-zinc-800-50;
+$search-item-dot: $color-zinc-600;
+$search-item-highlight: $color-white;
+$search-item-count: $color-zinc-600;
+
+// ─── Search input ───
+$search-input-icon: $color-zinc-400;
+$search-input-clear: $color-zinc-500;
+$search-input-clear--hover: $color-zinc-300;
+
+// ─── Search result ───
+$search-result-scrollbar: $color-zinc-800;
+$search-result-text: $color-white;
+$search-result-text--mobile: $color-white;
+
+// ─── Filters main ───
+$filters-main-slider-bg: $color-night;
+$filters-main-slider-border: $color-zinc-800;
+$filters-main-select-border--active: $color-indigo-500-50;
+$filters-main-select-bg--active: $color-indigo-600-20;
+$filters-main-select-text--active: $color-indigo-300;
+$filters-main-select-icon: $color-zinc-400;
+$filters-main-slider-content-bg: $color-zinc-900;
+$filters-main-bg--hover: $color-zinc-700-70;
+
+// ─── Info grid ───
+$info-grid-group-title: $color-zinc-300;
+$info-grid-item-bg: $color-zinc-700-50;
+$info-grid-item-border: $color-zinc-700-50;
+$info-grid-item-bg--hover: $color-zinc-700-30;
+$info-grid-item-border--hover: $color-zinc-600;
+$info-grid-item-title: $color-zinc-500;
+$info-grid-item-title-bg: $color-zinc-900;
+$info-grid-item-value-bg: $color-zinc-900;
+$info-grid-item-value-bg--link: $color-zinc-700-50;
+$info-grid-item-value-link-bg--hover: $color-zinc-700-50;
+$info-grid-item-value--link: $color-white;
+$info-grid-item-value-border: $color-zinc-700-50;
+$info-grid-item-values: $color-white;
+$info-grid-item-success: $color-green-400;
+$info-grid-item-warning: $color-red-400;
+$info-grid-item-icon: $color-zinc-400;
+$info-grid-plain-text: $color-zinc-400;
+
+// ─── Info (model) ───
+$info-border: $color-zinc-800-50;
+$info-bg: $color-zinc-900-50;
+$info-img-bg: $color-zinc-800;
+$info-img-border: $color-zinc-700;
+$info-description: $color-zinc-400;
+$info-parameters-border: $color-zinc-800-50;
+$info-parameters-text: $color-zinc-500;
+$info-parameters-text--hover: $color-zinc-300;
+$info-parameters-also: $color-zinc-400;
+$info-parameters-also-title: $color-zinc-500;
+$info-parameters-born: $color-zinc-400;
+$info-parameters-born-icon: $color-zinc-500;
+
+// ─── Info socials ───
+$info-socials-bg: $color-zinc-800;
+$info-socials-icon: $color-zinc-400;
+$info-socials-bg--hover: $color-zinc-700;
+
+// ─── Slider ───
+$slider-handler-bg: $color-white;
+$slider-track-bg: $color-zinc-800;
+$slider-active-color: $color-indigo-600;
+$slider-header-text: $color-zinc-300;
+$slider-label-icon: $color-zinc-400;
+$slider-range-text: $color-zinc-400;
+$slider-tooltip-bg: $color-zinc-800-60;
+$slider-handle-ring-color: $color-indigo-800;
+$slider-connect-bg--disabled: $color-zinc-500;
+$slider-tooltip-bg--disabled: $color-zinc-500;
+$slider-tooltip-color: $color-white;
+
+// ─── Тени ───
+$shadow-color-strong: $mono-black-32; // усиленная тень (слайдер)
+$shadow-color--active: $mono-black-42; // тень при drag
+
+// ─── Page models ───
+$page-models-popular-border: $color-zinc-800;
+$page-models-categories-border: $color-zinc-800-50;
+
+// ─── Page model videos ───
+$page-model-videos-section-border: $color-zinc-800-50;
+
+// ─── Page videos ───
+$page-videos-title-border: $color-zinc-800-50;
+$page-videos-footer-border: $color-zinc-800;
+$page-videos-categories-border: $color-indigo-600;
+$page-videos-categories-icon: $color-indigo-600;
+
+// ─── Градиенты fade ───
+$bg-fade-90: $color-zinc-950-90; // почти непрозрачный
+
+// ─── Оверлей карточек ───
+
+// ─── Model card ───
+$model-card-bg: $color-zinc-900-50;
+$model-card-bg--hover: $color-zinc-800-50;
+$model-card-border: $color-zinc-800-50;
+$model-card-border--hover: $color-zinc-700-50;
+$model-card-params: $color-zinc-500;
+$model-card-params-footer: $color-zinc-500;
+$model-card-name: $color-zinc-200;
+$model-card-name--hover: $color-indigo-400;
+$model-card-count: $color-zinc-500;
+$model-card-divider: $color-zinc-700;
+
+// ─── Playlist card ───
+$playlist-card-bg: $color-zinc-800-50;
+$playlist-card-border: $color-zinc-800-50;
+$playlist-card-img-border: $color-zinc-800-50;
+$playlist-card-border--hover: $color-zinc-700;
+$playlist-card-preview-border: $color-zinc-800;
+$playlist-card-title: $color-white;
+$playlist-card-title--hover: $color-indigo-400;
+$playlist-card-user: $color-zinc-500;
+$playlist-card-type: $color-zinc-500;
+$playlist-card-empty-gradient-from: $color-zinc-700;
+$playlist-card-empty-gradient-to: $color-zinc-800;
+$playlist-card-empty-text: $color-white;
+$playlist-card-tags: $color-zinc-500;
+$playlist-card-tags-border: $color-zinc-800-50;
+$playlist-card-meta: $color-zinc-500;
+$playlist-card-placeholder-text: $color-zinc-400;
+$playlist-card-placeholder-bg: $color-zinc-700;
+$playlist-card-dropdown-icon: $color-zinc-500;
+$playlist-card-dropdown-icon--hover: $color-white;
+
+// ─── Channel card ───
+$channel-card-border: $color-zinc-800-50;
+$channel-card-bg: $color-zinc-800-50;
+$channel-card-border--hover: $color-zinc-700;
+$channel-card-placeholder-text: $color-zinc-400;
+$channel-card-placeholder-bg: $color-zinc-700;
+$channel-card-info: $color-zinc-500;
+$channel-card-title: $color-white;
+$channel-card-title--hover: $color-indigo-400;
+
+// ─── Model card mini ───
+$model-card-mini-name: $color-white;
+$model-card-mini-info: $color-zinc-500;
+
+// ─── Channel card mini ───
+$channel-card-mini-placeholder-text: $color-zinc-500;
+$channel-card-mini-placeholder-bg: $color-zinc-800;
+$channel-card-mini-name: $color-white;
+$channel-card-mini-info: $color-zinc-400;
+
+// ─── Playlist card mini ───
+$playlist-card-mini-empty-gradient-from: $color-zinc-700;
+$playlist-card-mini-empty-gradient-to: $color-zinc-800;
+$playlist-card-mini-empty-text: $color-white;
+$playlist-card-mini-name: $color-white;
+$playlist-card-mini-user: $color-zinc-500;
+$playlist-card-mini-count: $color-zinc-500;
+
+// ─── Category card mini ───
+$category-card-mini-name: $color-white;
+$category-card-mini-info: $color-zinc-400;
+
+// ─── Video mini card ───
+$video-mini-card-title: $color-white;
+$video-mini-card-channel: $color-zinc-500;
+$video-mini-card-duration: $color-zinc-500;
+
+// ─── Auth recovery ───
+$auth-recovery-text: $color-zinc-400;
+$auth-recovery-login: $color-zinc-400;
+$auth-recovery-login--hover: $color-white;
+
+// ─── Auth login ───
+$auth-login-border: $color-zinc-800;
+$auth-login-back: $color-zinc-500;
+$auth-login-back-link: $color-indigo-400;
+$auth-login-back-link--hover: $color-indigo-400;
+$auth-login-forgot: $color-white;
+$auth-login-forgot--hover: $color-zinc-300;
+
+// ─── Auth register ───
+$auth-register-border: $color-zinc-800;
+$auth-register-agreement: $color-zinc-500;
+$auth-register-link: $color-indigo-400;
+$auth-register-link--hover: $color-indigo-300;
+$auth-register-login: $color-zinc-500;
+
+// ─── Native card ───
+$native-card-bg: $color-black;
+$native-card-primary: $color-zinc-400;
+$native-card-secondary: $color-zinc-500;
+
+// ─── Page: grouped categories ───
+$grouped-highlight-border: $color-zinc-800;
+$grouped-separator: $color-zinc-800;
+$grouped-category-icon: $color-zinc-500;
+$grouped-footer-text: $color-zinc-500;
+$grouped-section-border: $color-zinc-800;
+
+// ─── Page: search ───
+$search-show-all-bg: $color-zinc-800-50;
+$search-show-all-border: $color-zinc-700;
+$search-show-all-text: $color-zinc-500;
+$search-show-all-border--hover: $color-indigo-500;
+$search-show-all-text--hover: $color-indigo-400;
+$search-show-all-number: $color-zinc-400;
+$search-show-all-number--hover: $color-indigo-400;
+
+// ─── Page: profile ───
+$profile-bg: $color-zinc-900-50;
+$profile-text: $color-white;
+$profile-border: $color-zinc-800;
+$profile-header-border: $color-zinc-800;
+$profile-placeholder-bg: $color-zinc-800;
+$profile-placeholder-border: $color-zinc-700;
+$profile-avatar-icon: $color-zinc-500;
+$profile-member-text: $color-zinc-500;
+$profile-icon-bg: $color-zinc-800;
+$profile-icon: $color-zinc-400;
+$profile-item-title: $color-zinc-500;
+$profile-item-text: $color-white;
+
+// ─── Page: settings ───
+$settings-bg: $color-zinc-900-50;
+$settings-border: $color-zinc-800;
+
+// ─── Page: recovery ───
+$recovery-bg: $color-zinc-900;
+$recovery-text: $color-white;
+
+// ─── Page: error ───
+$error-text: $color-zinc-500;
+
+// ─── Page: contacts ───
+$contacts-text: $color-zinc-400;
+$contacts-title: $color-white;
+$contacts-text-border: $color-zinc-700;
+$contacts-border: $color-zinc-800;
+$contacts-wrapper-bg: $color-zinc-900;
+$contacts-link: $color-indigo-400;
+$contacts-link--hover: $color-indigo-300;
+
+// ─── Page: playlist ───
+$page-playlist-edit: $color-zinc-500;
+$page-playlist-edit-border: $color-zinc-800;
+$page-playlist-header-border: $color-zinc-800;
+$page-playlist-avatar-bg: $color-indigo-600;
+$page-playlist-avatar-text: $color-white;
+$page-playlist-user-name: $color-zinc-400;
+$page-playlist-private-bg: $color-zinc-800-60;
+$page-playlist-like-bg: $color-zinc-900;
+
+// ─── Page: playlists ───
+$page-playlists-border: $color-zinc-800;
+
+// ─── Page: channels ───
+$page-channels-border: $color-zinc-800;
+
+// ─── Page: channel ───
+$page-channel-border: $color-zinc-800;
+
+// ─── Document ───
+$document-header-border: $color-zinc-700;
+$document-section-bg: $color-night;
+$document-section-border: $color-zinc-800;
+$document-text: $color-zinc-400;
+$document-heading: $color-white;
+$document-link: $color-indigo-400;
+$document-link--hover: $color-indigo-300;