@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: $color-zinc-400;
$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-80;
$chips-micro-bg--hover: $color-zinc-700;
$chips-micro-text: $color-zinc-300;
$chips-micro-text--hover: $color-white;
$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-text: $color-white;
$input-s-border: transparent;
$input-s-border--focus: $color-zinc-600;
$input-text--disabled: $color-zinc-400;
$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-50;
$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: $color-neutral-940-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: $color-zinc-800;
$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-secondary: $color-zinc-500;
$video-card-mini-title: $color-zinc-300;
$video-card-mini-weight: 400;
$video-card-user-text: $color-zinc-500;
$video-card-user-bg: $color-zinc-800;
$video-card-progress-bg: $mono-white-50;
$video-card-progress-fill: $color-indigo-500;
$video-card-remaining: $color-indigo-400;

// ─── Video card actions (избранное / смотреть позже на постере) ───
$video-card-action-bg: $color-zinc-900-70;
$video-card-action-bg--hover: $color-zinc-800;
$video-card-action-border: $color-zinc-800-60;
$video-card-action-icon: $color-zinc-300;
$video-card-action-active-bg: $color-zinc-800;
$video-card-action-active-bg--hover: $color-red-600;
$video-card-action-active-border: $color-zinc-800;
$video-card-action-active-border--hover: $color-red-600;
$video-card-action-active-icon: $color-white;
$video-card-action-active-icon--hover: $color-white;

// ─── 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-interface-button-bg--active: $color-zinc-700;
$video-interface-button-text--active: $color-white;
$video-interface-mobile-icon: $color-white;
$video-interface-mobile-label: $color-zinc-300;
$video-interface-mobile-border: $color-zinc-800;

// ─── 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-icon: $color-zinc-400;
$like-icon--hover: $color-white;
$like-icon--active: $color-white;
$like-count: $color-zinc-500;
$like-mobile-icon: $color-white;
$like-mobile-count: $color-zinc-300;
$like-bar-bg: $color-zinc-700;
$like-bar-likes: $color-zinc-500;

// ─── Playlist input ───
$playlist-input-bg: $color-zinc-900;
$playlist-input-back: $color-zinc-500;
$playlist-input-back--hover: $color-white;
$playlist-input-back-bg: $color-zinc-800;
$playlist-input-back-bg--hover: $color-zinc-700;

// ─── Playlist visibility ───
$playlist-visibility-icon: $color-zinc-400;
$playlist-visibility-hint-text: $color-zinc-900;
$playlist-visibility-hint-bg: $color-zinc-600;
$playlist-visibility-hint-bg--hover: $color-zinc-500;
$playlist-visibility-tooltip-highlight: $color-white;

// ─── 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-delete-text: $color-red-400;
$playlist-edit-delete-text--hover: $color-red-300;
$playlist-edit-confirm-highlight: $color-white;
$playlist-edit-confirm-note: $color-zinc-500;

// ─── Playlist delete video ───
$playlist-delete-video-icon: $color-indigo-600;

// ─── Popular card ───
$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;

// ─── View all (плитка «смотреть все» в конце ленты) ───
$view-all-gradient-from: $color-indigo-500-10;
$view-all-gradient-via: $color-zinc-800-50;
$view-all-gradient-to: $color-zinc-800-50;
$view-all-dots: $color-indigo-400-10;
$view-all-border: $color-zinc-700-70;
$view-all-border--hover: $color-zinc-600;
$view-all-icon: $color-indigo-300;
$view-all-icon-bg: $color-indigo-500-20;
$view-all-icon-border: $color-indigo-500-40;
$view-all-text: $color-white;
$view-all-note: $color-zinc-400;

// ─── New-badge (карточки на странице подписок) ───
$card-new-badge-bg: $color-indigo-600;
$card-new-badge-text: $color-white;
$card-new-badge-ring: $main-bg;

// ─── 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;

// ─── Niche ───
$niche-trigger-text: $color-zinc-400;
$niche-angle--hover: $color-white;
$niche-title: $color-zinc-500;
$niche-value-text: $color-white;
$niche-menu-bg: $color-night;
$niche-menu-border: $color-zinc-800;
$niche-item-text: $color-zinc-300;
$niche-item-bg--hover: $color-zinc-800;
$niche-item-text--current: $color-white;
$niche-item-bg--current: $color-zinc-700;

// ─── 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-item-text: $color-zinc-300;
$burger-item-icon: $color-zinc-400;
$burger-item-bg--active: $color-indigo-600-20;
$burger-item-text--active: $color-white;
$burger-item-icon--active: $color-indigo-400;
$burger-item-accent-icon: $nav-icon-accent;
$burger-item-child-text: $color-zinc-400;
$burger-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;

// ─── notifications ───
$notifications-icon: $color-zinc-300;
$notifications-icon--mobile: $color-zinc-200;
$notifications-icon--hover: $color-white;
$notifications-badge-bg: $color-indigo-600;
$notifications-badge-text: $color-white;
$notifications-badge-ring: $color-black;

// ─── 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-border: $color-zinc-700;
$snackbar-text: $color-zinc-200;
$snackbar-highlight: $color-white;
$snackbar-icon: $color-zinc-300;
$snackbar-icon-bg: $color-zinc-700-60;
$snackbar-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
$snackbar-action-bg: $color-indigo-600;
$snackbar-action-bg--hover: $color-indigo-500;
$snackbar-action-text: $color-white;

// ─── Follow button ───
$follow-btn-bg: $color-indigo-600;
$follow-btn-bg--hover: $color-indigo-500;
$follow-btn-border: $color-indigo-500;
$follow-btn-border--hover: $color-indigo-500;
$follow-btn-text: $color-white;
$follow-btn-following-bg: $color-zinc-800;
$follow-btn-following-bg--hover: $color-red-600;
$follow-btn-following-border: $color-zinc-800;
$follow-btn-following-border--hover: $color-red-500;
$follow-btn-following-text: $color-white;
$follow-btn-following-text--hover: $color-white;

// ─── 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-simple-text: $color-white;
$button-simple-text--hover: $color-zinc-300;
$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-zinc-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-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-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;

// ─── 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;

// ─── 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-arrow: $color-zinc-400;
$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
$player-center-label-shadow: $color-black-50;   // мета в центре бара поверх видео

// 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;

// ─── 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-white;
$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-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-border: $color-zinc-700-50;
$info-grid-item-bg--hover: $color-zinc-700-30;
$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-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 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;

// ─── 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;
$playlist-card-visibility-icon: $color-zinc-400;
$playlist-card-delete-text: $color-red-400;

// ─── My playlists empty state ───
$playlists-empty-border: $color-zinc-800;
$playlists-empty-title: $color-white;
$playlists-empty-text: $color-zinc-400;
$playlists-empty-chip-bg: $color-zinc-800;
$playlists-empty-chip-text: $color-zinc-300;
$playlists-empty-chip-icon: $color-zinc-400;
$playlists-empty-arrow: $color-zinc-600;

// ─── Collections section ───
$collections-badge-text: $color-indigo-300;
$collections-badge-bg: $color-indigo-500-20;
$collections-badge-border: $color-indigo-500-40;
$collections-more-bg: $color-zinc-800;
$collections-more-border: $color-zinc-800-50;
$collections-more-border--hover: $color-zinc-700;
$collections-more-scrim: $color-black-50;
$collections-more-scrim--hover: $color-black-42;
$collections-more-count: $color-white;
$collections-more-text: $color-zinc-200;

// ─── 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-category-icon: $color-zinc-500;
$grouped-footer-text: $color-zinc-500;
$grouped-section-border: $color-zinc-800;

// ─── 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: playlists ───

// ─── Page: channels ───
$page-channels-border: $color-zinc-800;

// ─── Page: channel ───
$page-channel-border: $color-zinc-800;

// ─── Library item (карточка-ссылка) ───
$library-item-bg: $color-zinc-900-40;
$library-item-bg--hover: $color-zinc-900;
$library-item-border: $color-zinc-800;
$library-item-border--hover: $color-indigo-500-50;
$library-item-icon: $color-indigo-400;
$library-item-icon-bg: $color-indigo-500-10;
$library-item-icon-bg--hover: $color-indigo-500-20;
$library-item-icon-border: $color-indigo-500-20;
$library-item-icon-border--hover: $color-indigo-500-40;
$library-item-title: $color-white;
$library-item-title--hover: $color-indigo-400;
$library-item-subtitle: $color-zinc-500;
$library-item-avatar-bg: $color-zinc-700;
$library-item-avatar-text: $color-zinc-200;
$library-item-avatar-border: $color-zinc-900;
$library-item-rest-bg: $color-zinc-800;
$library-item-rest-text: $color-zinc-400;

// ─── Library feed (блок подписки: модель / канал / категория) ───
$library-feed-bg: $color-zinc-900-40;
$library-feed-border: $color-zinc-800;
$library-feed-avatar-border: $color-zinc-700;
$library-feed-avatar-border--hover: $color-zinc-500;
$library-feed-initials: $color-zinc-400;
$library-feed-initials-gradient-from: $color-zinc-700;
$library-feed-initials-gradient-to: $color-zinc-800;
$library-feed-name: $color-white;
$library-feed-name--hover: $color-indigo-400;
$library-feed-badge-bg: $color-indigo-600;
$library-feed-badge-text: $color-white;
$library-feed-params: $color-zinc-400;
$library-feed-age: $color-zinc-500;
$library-feed-meta: $color-zinc-500;
$library-feed-meta-dot: $color-zinc-600;
$library-feed-title: $color-zinc-500;
$library-feed-open: $color-zinc-400;
$library-feed-open--hover: $color-white;

// ─── Page: library ───
$page-library-toggle-text: $color-zinc-300;

// ─── Page: history ───
$page-history-confirm-text: $color-zinc-300;
$page-history-confirm-muted: $color-zinc-500;
$page-history-confirm-link: $color-indigo-400;
$page-history-confirm-link--hover: $color-indigo-300;

// ─── 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;

// ─── Вебкам-блок ───
$webcam-icon-text: $color-white;
$webcam-icon-bg: $color-white-10;
$webcam-header-promo-text: $color-white;
$webcam-header-promo-bg: $color-indigo-600;
$webcam-header-promo-bg--hover: $color-indigo-500;
$webcam-counters-text: $color-emerald-400;
$webcam-counters-bg: $color-emerald-500-10;
$webcam-counters-dot: $color-emerald-400;
$webcam-counters-language-text: $color-zinc-300;
$webcam-counters-language-bg: $color-zinc-800-70;
$card-webcam-poster-bg: $color-zinc-800;
$card-webcam-online-dot: $color-emerald-400;
$card-webcam-online-ring: $color-black-42;
$card-webcam-badge-text: $color-white-90;
$card-webcam-badge-bg: $color-black-45;
$card-webcam-badge-border: $color-white-25;
$card-webcam-badge-shadow: $color-black-90;
$card-webcam-goal-text: $color-white;
$card-webcam-goal-label: $color-zinc-400;
$card-webcam-goal-percent: $color-white-70;
$card-webcam-goal-plain-text: $color-zinc-300;
$card-webcam-goal-plain-percent: $color-zinc-400;
$card-webcam-goal-track-bg: $color-white-15;
$card-webcam-goal-fill-bg: $color-emerald-400;
$card-webcam-goal-shade-from: $color-black-95;
$card-webcam-goal-shade-via: $color-black-70;
$card-webcam-name-text: $color-white;
$card-webcam-name-text--hover: $color-indigo-300;
$card-webcam-meta-text: $color-zinc-500;
$card-webcam-meta-text--hover: $color-zinc-300;
$card-webcam-tag-text: $color-zinc-300;
$card-webcam-tag-bg: $color-zinc-800;
$card-webcam-tag-text--hover: $color-white;
$card-webcam-tag-bg--hover: $color-zinc-700;
$page-webcams-divider: $color-zinc-700;
$page-webcams-control-bg: $color-zinc-800-30;
$page-webcams-control-border: $color-zinc-700-30;
$page-webcams-control-text: $color-white;

// ─── Switcher ───
$switcher-bg: $color-zinc-900-80;
$switcher-border: $color-zinc-800;
$switcher-text: $color-zinc-400;
$switcher-text--hover: $color-white;
$switcher-text--active: $color-white;
$switcher-bg--active: $color-indigo-600;
$switcher-icon: $color-zinc-500;
$switcher-icon--active: $color-emerald-400;
$switcher-subtitle: $color-zinc-600;
$switcher-subtitle--active: $color-white-60;

// ─── Filter: сброс всех фильтров в облаке чипсов ───
$filter-model-clear-text: $color-zinc-500;
$filter-model-clear-text--hover: $color-white;

// ─── Вебкам-карточка (продолжение) ───
$card-webcam-languages-border: $color-white-20;
$card-webcam-languages-fallback-bg: $color-zinc-800;
$card-webcam-languages-fallback-icon: $color-zinc-300;