/* 
 * Современные CSS возможности 2025 для раскрасок
 * Включает: Container Queries, :has() селектор, CSS Layers, View Transitions
 */

/* CSS Layers для управления каскадом */
@layer reset, base, components, utilities, overrides;

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
}

@layer base {
    /* CSS Custom Properties с логическими значениями */
    :root {
        /* Цветовая система с P3 поддержкой */
        --rcp-primary-hsl: 213 63% 48%;
        --rcp-primary: hsl(var(--rcp-primary-hsl));
        --rcp-primary-p3: color(display-p3 0.242 0.484 0.722);
        
        /* Типографика с fluid размерами */
        --rcp-font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
        --rcp-font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
        --rcp-font-size-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
        
        /* Spacing система */
        --rcp-space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
        --rcp-space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);
        --rcp-space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
        --rcp-space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
        --rcp-space-xl: clamp(2rem, 1.6rem + 2vw, 3rem);
        
        /* Layout размеры */
        --rcp-content-max-width: 75rem;
        --rcp-content-padding: var(--rcp-space-md);
        
        /* Анимации с учетом prefers-reduced-motion */
        --rcp-transition-fast: 150ms ease-out;
        --rcp-transition-medium: 250ms ease-out;
        --rcp-transition-slow: 350ms ease-out;
        
        /* Shadow система */
        --rcp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --rcp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --rcp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        
        /* Border radius система */
        --rcp-radius-sm: 0.25rem;
        --rcp-radius-md: 0.5rem;
        --rcp-radius-lg: 0.75rem;
        --rcp-radius-xl: 1rem;
        --rcp-radius-full: 9999px;
    }
    
    /* Предпочтения пользователя */
    @media (prefers-color-scheme: dark) {
        :root {
            --rcp-primary-hsl: 213 63% 65%;
            --rcp-bg: #1a1a1a;
            --rcp-text: #ffffff;
        }
    }
    
    @media (prefers-reduced-motion: reduce) {
        :root {
            --rcp-transition-fast: 0ms;
            --rcp-transition-medium: 0ms;
            --rcp-transition-slow: 0ms;
        }
        
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
    
    /* Базовая типографика */
    body {
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        font-size: var(--rcp-font-size-base);
        line-height: 1.6;
        color: var(--rcp-text);
        background: var(--rcp-bg);
    }
    
    /* Улучшенный text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        font-variant-ligatures: common-ligatures;
        font-feature-settings: "liga" 1, "calt" 1;
    }
}

@layer components {
    /* Container queries для адаптивных компонентов */
    .rcp-container {
        container-type: inline-size;
        container-name: rcp-main;
        max-width: var(--rcp-content-max-width);
        margin-inline: auto;
        padding-inline: var(--rcp-content-padding);
    }
    
    /* Grid system с container queries */
    .rcp-grid {
        display: grid;
        gap: var(--rcp-space-md);
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    @container rcp-main (width > 768px) {
        .rcp-grid {
            gap: var(--rcp-space-lg);
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        }
    }
    
    @container rcp-main (width > 1024px) {
        .rcp-grid {
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        }
    }
    
    /* Карточка раскраски с современными возможностями */
    .rcp-card {
        container-type: inline-size;
        container-name: card;
        
        background: var(--rcp-card-bg, white);
        border-radius: var(--rcp-radius-lg);
        box-shadow: var(--rcp-shadow-md);
        overflow: hidden;
        transition: var(--rcp-transition-medium);
        
        /* Новый aspect-ratio */
        aspect-ratio: 3/4;
        
        /* Улучшенная поддержка фокуса */
        &:focus-visible {
            outline: 2px solid var(--rcp-primary);
            outline-offset: 2px;
        }
        
        /* Hover эффекты с transform */
        &:hover {
            transform: translateY(-2px);
            box-shadow: var(--rcp-shadow-lg);
        }
        
        /* Поддержка :has() селектора */
        &:has(.rcp-card__badge--new) {
            border: 2px solid var(--rcp-primary);
        }
        
        /* View Transition API */
        view-transition-name: card;
        
        /* Логический margin */
        margin-block-end: var(--rcp-space-md);
    }
    
    @container card (width > 300px) {
        .rcp-card__content {
            padding: var(--rcp-space-lg);
        }
        
        .rcp-card__title {
            font-size: var(--rcp-font-size-lg);
        }
    }
    
    /* Изображение с современными возможностями */
    .rcp-card__image {
        width: 100%;
        height: 60%;
        object-fit: cover;
        object-position: center;
        
        /* Aspect ratio для изображений */
        aspect-ratio: 1.414; /* A4 portrait */
        
        /* Современная загрузка изображений */
        loading: lazy;
        decoding: async;
        
        /* Цветовое пространство */
        color-profile: srgb;
    }
    
    /* Landscape ориентация */
    .rcp-card--landscape .rcp-card__image {
        aspect-ratio: 0.707; /* A4 landscape */
    }
    
    /* Фильтры с улучшенной семантикой */
    .rcp-filters {
        container-type: inline-size;
        container-name: filters;
        
        display: flex;
        flex-wrap: wrap;
        gap: var(--rcp-space-sm);
        
        /* Логические свойства */
        padding-block: var(--rcp-space-md);
        border-block-end: 1px solid var(--rcp-border);
    }
    
    @container filters (width > 600px) {
        .rcp-filters {
            justify-content: space-between;
        }
        
        .rcp-filter-group {
            flex: 1;
            min-width: 200px;
        }
    }
    
    /* Кнопки с улучшенным дизайном */
    .rcp-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--rcp-space-xs);
        
        padding-inline: var(--rcp-space-md);
        padding-block: var(--rcp-space-sm);
        
        background: var(--rcp-primary);
        color: white;
        
        border: none;
        border-radius: var(--rcp-radius-md);
        
        font-size: var(--rcp-font-size-base);
        font-weight: 500;
        text-decoration: none;
        
        cursor: pointer;
        transition: var(--rcp-transition-fast);
        
        /* Минимальный размер касания */
        min-block-size: 44px;
        min-inline-size: 44px;
        
        /* Фокус видимость */
        &:focus-visible {
            outline: 2px solid var(--rcp-primary);
            outline-offset: 2px;
        }
        
        /* Состояния */
        &:hover {
            background: hsl(var(--rcp-primary-hsl) / 0.9);
            transform: translateY(-1px);
        }
        
        &:active {
            transform: translateY(0);
        }
        
        &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
    }
    
    /* Модальное окно с backdrop-filter */
    .rcp-modal {
        position: fixed;
        inset: 0;
        z-index: 1000;
        
        display: grid;
        place-items: center;
        
        /* Современный backdrop */
        backdrop-filter: blur(8px);
        background: rgb(0 0 0 / 0.5);
        
        /* View Transition */
        view-transition-name: modal;
        
        /* Анимация появления */
        animation: modal-fade-in var(--rcp-transition-medium) ease-out;
        
        &[aria-hidden="true"] {
            display: none;
        }
    }
    
    @keyframes modal-fade-in {
        from {
            opacity: 0;
            backdrop-filter: blur(0px);
        }
        to {
            opacity: 1;
            backdrop-filter: blur(8px);
        }
    }
    
    .rcp-modal__content {
        background: var(--rcp-bg);
        border-radius: var(--rcp-radius-xl);
        box-shadow: var(--rcp-shadow-lg);
        
        max-width: min(90vw, 600px);
        max-height: min(90vh, 800px);
        
        overflow: auto;
        overscroll-behavior: contain;
        
        /* Анимация появления */
        animation: modal-slide-up var(--rcp-transition-medium) ease-out;
    }
    
    @keyframes modal-slide-up {
        from {
            transform: translateY(100px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* Search с улучшенным UX */
    .rcp-search {
        position: relative;
        container-type: inline-size;
        
        &::before {
            content: "🔍";
            position: absolute;
            inset-inline-start: var(--rcp-space-sm);
            inset-block-start: 50%;
            transform: translateY(-50%);
            color: var(--rcp-text-muted);
        }
    }
    
    .rcp-search__input {
        width: 100%;
        padding: var(--rcp-space-sm) var(--rcp-space-md);
        padding-inline-start: calc(var(--rcp-space-md) * 2);
        
        border: 2px solid var(--rcp-border);
        border-radius: var(--rcp-radius-full);
        
        font-size: var(--rcp-font-size-base);
        
        background: var(--rcp-bg);
        color: var(--rcp-text);
        
        transition: var(--rcp-transition-fast);
        
        &:focus {
            outline: none;
            border-color: var(--rcp-primary);
            box-shadow: 0 0 0 3px hsl(var(--rcp-primary-hsl) / 0.1);
        }
        
        &::placeholder {
            color: var(--rcp-text-muted);
        }
    }
    
    /* Loading состояния */
    .rcp-loading {
        display: grid;
        place-items: center;
        padding: var(--rcp-space-xl);
        
        &::after {
            content: "";
            width: 40px;
            height: 40px;
            border: 3px solid var(--rcp-border);
            border-top-color: var(--rcp-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    /* Skeleton loading */
    .rcp-skeleton {
        background: linear-gradient(
            90deg,
            transparent,
            var(--rcp-border),
            transparent
        );
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: var(--rcp-radius-sm);
    }
    
    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
}

@layer utilities {
    /* Утилиты для скрытия контента */
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    
    /* Утилиты для spacing */
    .space-y-sm > * + * { margin-block-start: var(--rcp-space-sm); }
    .space-y-md > * + * { margin-block-start: var(--rcp-space-md); }
    .space-y-lg > * + * { margin-block-start: var(--rcp-space-lg); }
    
    /* Утилиты для текста */
    .text-center { text-align: center; }
    .text-start { text-align: start; }
    .text-end { text-align: end; }
    
    .font-bold { font-weight: 700; }
    .font-medium { font-weight: 500; }
    .font-normal { font-weight: 400; }
    
    /* Утилиты для flex */
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }
    .items-center { align-items: center; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    
    /* Утилиты для grid */
    .grid { display: grid; }
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    
    /* Утилиты для скругления */
    .rounded-sm { border-radius: var(--rcp-radius-sm); }
    .rounded-md { border-radius: var(--rcp-radius-md); }
    .rounded-lg { border-radius: var(--rcp-radius-lg); }
    .rounded-full { border-radius: var(--rcp-radius-full); }
}

@layer overrides {
    /* Переопределения для конкретных случаев */
    [data-theme="dark"] {
        color-scheme: dark;
        
        --rcp-bg: #1a1a1a;
        --rcp-text: #ffffff;
        --rcp-border: #333333;
        --rcp-card-bg: #2a2a2a;
    }
    
    /* Высокая контрастность */
    @media (prefers-contrast: high) {
        :root {
            --rcp-border: #000000;
        }
        
        .rcp-button {
            border: 2px solid currentColor;
        }
    }
    
    /* Печать */
    @media print {
        .rcp-modal,
        .rcp-filters,
        .rcp-button {
            display: none !important;
        }
        
        .rcp-card {
            break-inside: avoid;
            box-shadow: none;
            border: 1px solid #000;
        }
    }
}

/* View Transitions API (экспериментальная поддержка) */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(card),
    ::view-transition-new(card) {
        animation-duration: 0.3s;
    }
    
    ::view-transition-old(modal),
    ::view-transition-new(modal) {
        animation-duration: 0.25s;
    }
}

/* CSS Anchoring (будущая поддержка) */
@supports (anchor-name: --anchor) {
    .rcp-tooltip {
        position: absolute;
        anchor-name: --tooltip;
        position-anchor: --tooltip;
        position-area: top;
    }
}

/* Container Style Queries (экспериментальная поддержка) */
@supports (container-type: inline-size) {
    @container style(--variant: compact) {
        .rcp-card {
            padding: var(--rcp-space-sm);
        }
    }
}