/* Design tokens — единый источник переменных для темы ruomi */
:root {
    --ruomi-space-xs: 0.25rem;
    --ruomi-space-sm: 0.5rem;
    --ruomi-space-md: 1rem;
    --ruomi-space-lg: 1.5rem;
    --ruomi-space-xl: 2rem;
    --ruomi-font-sm: 0.875rem;
    --ruomi-font-base: 1rem;
    --ruomi-font-lg: 1.125rem;
    --ruomi-font-xl: 1.25rem;
    --ruomi-radius-sm: 8px;
    --ruomi-radius-md: 12px;
    --ruomi-radius-lg: var(--warm-radius, 16px);
    --ruomi-transition: 0.2s ease;
    --ruomi-z-dropdown: 1000;
    --ruomi-z-modal: 1050;
    --ruomi-z-toast: 1100;
}

.ad-card,
.glass-card {
    border-radius: var(--ruomi-radius-lg);
    transition: transform var(--ruomi-transition), box-shadow var(--ruomi-transition);
}

.ad-title {
    font-size: var(--ruomi-font-lg);
}

.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.06) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

html[data-theme="light"] .skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 100%
    );
    background-size: 200% 100%;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}