/**
 * Main CSS
 * Телефонный справочник - Главный файл стилей
 * 
 * Импортирует все CSS модули в правильном порядке:
 * 1. Base (переменные, сброс, типографика)
 * 2. Themes (темы оформления)
 * 3. Layout (макет страницы)
 * 4. Components (компоненты UI)
 * 5. Pages (стили страниц)
 */

/* ===== Base ===== */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/typography.css');

/* ===== Themes ===== */
@import url('./themes/dark.css');
@import url('./themes/light.css');

/* ===== Layout ===== */
@import url('./layout/layout.css');

/* ===== Components ===== */
@import url('./components/navbar.css');
@import url('./components/sidebar.css');
@import url('./components/buttons.css');
@import url('./components/forms.css');
@import url('./components/table.css');
@import url('./components/cards.css');
@import url('./components/settings.css');

/* ===== Pages ===== */
@import url('./pages/phonebook.css');

/* ===== Дополнительные утилиты ===== */

/* Визуально скрытый элемент (для screen readers) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Отключение выделения текста */
.no-select {
    user-select: none;
}

/* Отключение событий указателя */
.no-pointer-events {
    pointer-events: none;
}

/* Принудительный перенос слов */
.break-word {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Анимация появления */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn var(--transition-normal) ease-out;
}

/* Анимация появления снизу */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    animation: slideUp var(--transition-normal) ease-out;
}

/* Анимация пульсации */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Анимация вращения */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}