/* ============================================
   WAY DESIGN SYSTEM
   Философия: WAY — это чувства, а не функции
   Система должна быть НЕВИДИМОЙ
   ============================================ */

:root {
    /* ============================================
       ЦВЕТОВАЯ ПАЛИТРА WAY - DARK THEME
       Спокойные, приглушённые тона
       Requirements: 6.1
       ============================================ */
    
    /* Основные цвета */
    --way-blue: #1a1a2e;        /* Глубокий синий — основа, спокойствие */
    --way-sand: #1e1e1e;        /* Тёмный фон — чистота */
    --way-accent: #0084ff;      /* Акцентный голубой — действие */
    
    /* Дополнительные цвета */
    --way-success: #10b981;     /* Успех — завершение */
    --way-warning: #f59e0b;     /* Внимание — осторожность */
    --way-danger: #ef4444;      /* Ошибка — важность */
    --way-muted: #6b7280;       /* Приглушённый — второстепенное */
    
    /* Фоны - DARK */
    --way-bg-primary: #111111;
    --way-bg-secondary: #1a1a1a;
    --way-bg-tertiary: #222222;
    
    /* Текст - DARK */
    --way-text-primary: #ffffff;
    --way-text-secondary: #a0a0a0;
    --way-text-muted: #666666;
    
    /* Границы - DARK */
    --way-border: #2a2a2a;
    --way-border-hover: #3a3a3a;
    
    /* ============================================
       ТИПОГРАФИЯ
       Requirements: 6.4, 6.5
       ============================================ */
    
    /* Размеры шрифтов */
    --way-font-size-mobile: 16px;   /* Мобильные — крупнее для читаемости */
    --way-font-size-desktop: 14px;  /* Десктоп — компактнее */
    --way-font-size-small: 12px;
    --way-font-size-large: 18px;
    --way-font-size-xl: 24px;
    --way-font-size-xxl: 32px;
    
    /* Межстрочный интервал */
    --way-line-height: 1.5;         /* Комфортное чтение */
    --way-line-height-tight: 1.3;
    --way-line-height-loose: 1.7;
    
    /* Семейство шрифтов */
    --way-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    
    /* ============================================
       АНИМАЦИИ
       Requirements: 6.2, 6.3
       ============================================ */
    
    /* Плавные переходы */
    --way-transition: all 0.3s ease-in-out;
    --way-transition-fast: all 0.15s ease-in-out;
    --way-transition-slow: all 0.5s ease-in-out;
    
    /* Тени */
    --way-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --way-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --way-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    /* Радиусы */
    --way-radius-sm: 4px;
    --way-radius-md: 8px;
    --way-radius-lg: 12px;
    --way-radius-xl: 16px;
    --way-radius-round: 50%;
    
    /* Отступы */
    --way-spacing-xs: 4px;
    --way-spacing-sm: 8px;
    --way-spacing-md: 16px;
    --way-spacing-lg: 24px;
    --way-spacing-xl: 32px;
    --way-spacing-xxl: 48px;
}

/* ============================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ "ВОЛНА"
   Requirements: 6.3
   ============================================ */

@keyframes waveIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes waveInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes waveInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes waveInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-soft {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* ============================================
   КЛАССЫ АНИМАЦИЙ
   ============================================ */

.way-wave-in {
    animation: waveIn 0.4s ease-out;
}

.way-wave-in-left {
    animation: waveInLeft 0.4s ease-out;
}

.way-wave-in-right {
    animation: waveInRight 0.4s ease-out;
}

.way-wave-in-scale {
    animation: waveInScale 0.3s ease-out;
}

.way-pulse {
    animation: pulse-soft 2s ease-in-out infinite;
}

.way-breathe {
    animation: breathe 3s ease-in-out infinite;
}

/* Задержки анимаций для каскадного эффекта */
.way-delay-1 { animation-delay: 0.1s; }
.way-delay-2 { animation-delay: 0.2s; }
.way-delay-3 { animation-delay: 0.3s; }
.way-delay-4 { animation-delay: 0.4s; }
.way-delay-5 { animation-delay: 0.5s; }

/* ============================================
   ПЛАВНЫЕ ПЕРЕХОДЫ
   Requirements: 6.2
   ============================================ */

.way-transition {
    transition: var(--way-transition);
}

.way-transition-fast {
    transition: var(--way-transition-fast);
}

.way-transition-slow {
    transition: var(--way-transition-slow);
}

/* ============================================
   ТИПОГРАФИЯ WAY
   Requirements: 6.4, 6.5
   ============================================ */

.way-text {
    font-family: var(--way-font-family);
    line-height: var(--way-line-height);
    color: var(--way-text-primary);
}

.way-text-secondary {
    color: var(--way-text-secondary);
}

.way-text-muted {
    color: var(--way-text-muted);
}

.way-text-accent {
    color: var(--way-accent);
}

.way-text-success {
    color: var(--way-success);
}

.way-text-warning {
    color: var(--way-warning);
}

.way-text-danger {
    color: var(--way-danger);
}

/* Размеры текста */
.way-text-sm {
    font-size: var(--way-font-size-small);
}

.way-text-lg {
    font-size: var(--way-font-size-large);
}

.way-text-xl {
    font-size: var(--way-font-size-xl);
}

.way-text-xxl {
    font-size: var(--way-font-size-xxl);
}

/* ============================================
   КАРТОЧКИ WAY
   ============================================ */

.way-card {
    background: var(--way-bg-primary);
    border: 1px solid var(--way-border);
    border-radius: var(--way-radius-lg);
    box-shadow: var(--way-shadow-sm);
    transition: var(--way-transition);
    animation: waveIn 0.4s ease-out;
}

.way-card:hover {
    box-shadow: var(--way-shadow-md);
    border-color: var(--way-border-hover);
}

.way-card-header {
    padding: var(--way-spacing-md) var(--way-spacing-lg);
    border-bottom: 1px solid var(--way-border);
    background: var(--way-bg-secondary);
    border-radius: var(--way-radius-lg) var(--way-radius-lg) 0 0;
}

.way-card-body {
    padding: var(--way-spacing-lg);
}

.way-card-footer {
    padding: var(--way-spacing-md) var(--way-spacing-lg);
    border-top: 1px solid var(--way-border);
    background: var(--way-bg-secondary);
    border-radius: 0 0 var(--way-radius-lg) var(--way-radius-lg);
}

/* ============================================
   КНОПКИ WAY
   ============================================ */

.way-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--way-spacing-sm);
    padding: var(--way-spacing-sm) var(--way-spacing-md);
    font-family: var(--way-font-family);
    font-size: var(--way-font-size-mobile);
    font-weight: 500;
    line-height: var(--way-line-height);
    border: 1px solid transparent;
    border-radius: var(--way-radius-md);
    cursor: pointer;
    transition: var(--way-transition);
    text-decoration: none;
}

.way-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--way-shadow-sm);
}

.way-btn:active {
    transform: translateY(0);
}

.way-btn-primary {
    background: var(--way-accent);
    color: white;
    border-color: var(--way-accent);
}

.way-btn-primary:hover {
    background: #2980b9;
    border-color: #2980b9;
}

.way-btn-secondary {
    background: var(--way-bg-secondary);
    color: var(--way-text-primary);
    border-color: var(--way-border);
}

.way-btn-secondary:hover {
    background: var(--way-bg-tertiary);
    border-color: var(--way-border-hover);
}

.way-btn-success {
    background: var(--way-success);
    color: white;
    border-color: var(--way-success);
}

.way-btn-success:hover {
    background: #219a52;
    border-color: #219a52;
}

/* ============================================
   ФОРМЫ WAY
   ============================================ */

.way-input {
    width: 100%;
    padding: var(--way-spacing-sm) var(--way-spacing-md);
    font-family: var(--way-font-family);
    font-size: var(--way-font-size-mobile);
    line-height: var(--way-line-height);
    color: var(--way-text-primary);
    background: var(--way-bg-primary);
    border: 1px solid var(--way-border);
    border-radius: var(--way-radius-md);
    transition: var(--way-transition);
}

.way-input:focus {
    outline: none;
    border-color: var(--way-accent);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.way-input::placeholder {
    color: var(--way-text-muted);
}

.way-label {
    display: block;
    margin-bottom: var(--way-spacing-xs);
    font-size: var(--way-font-size-small);
    font-weight: 500;
    color: var(--way-text-secondary);
}

/* ============================================
   СТАТУСЫ WAY
   ============================================ */

.way-status {
    display: inline-flex;
    align-items: center;
    gap: var(--way-spacing-xs);
    padding: var(--way-spacing-xs) var(--way-spacing-sm);
    font-size: var(--way-font-size-small);
    font-weight: 500;
    border-radius: var(--way-radius-sm);
    transition: var(--way-transition);
}

.way-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--way-radius-round);
    background: currentColor;
}

.way-status-new {
    background: rgba(52, 152, 219, 0.1);
    color: var(--way-accent);
}

.way-status-progress {
    background: rgba(243, 156, 18, 0.1);
    color: var(--way-warning);
}

.way-status-completed {
    background: rgba(39, 174, 96, 0.1);
    color: var(--way-success);
}

.way-status-cancelled {
    background: rgba(231, 76, 60, 0.1);
    color: var(--way-danger);
}

/* ============================================
   УТИЛИТЫ WAY
   ============================================ */

/* Отступы */
.way-p-xs { padding: var(--way-spacing-xs); }
.way-p-sm { padding: var(--way-spacing-sm); }
.way-p-md { padding: var(--way-spacing-md); }
.way-p-lg { padding: var(--way-spacing-lg); }
.way-p-xl { padding: var(--way-spacing-xl); }

.way-m-xs { margin: var(--way-spacing-xs); }
.way-m-sm { margin: var(--way-spacing-sm); }
.way-m-md { margin: var(--way-spacing-md); }
.way-m-lg { margin: var(--way-spacing-lg); }
.way-m-xl { margin: var(--way-spacing-xl); }

/* Тени */
.way-shadow-sm { box-shadow: var(--way-shadow-sm); }
.way-shadow-md { box-shadow: var(--way-shadow-md); }
.way-shadow-lg { box-shadow: var(--way-shadow-lg); }

/* Радиусы */
.way-rounded-sm { border-radius: var(--way-radius-sm); }
.way-rounded-md { border-radius: var(--way-radius-md); }
.way-rounded-lg { border-radius: var(--way-radius-lg); }
.way-rounded-xl { border-radius: var(--way-radius-xl); }
.way-rounded-full { border-radius: var(--way-radius-round); }

/* Фоны */
.way-bg-primary { background: var(--way-bg-primary); }
.way-bg-secondary { background: var(--way-bg-secondary); }
.way-bg-tertiary { background: var(--way-bg-tertiary); }
.way-bg-accent { background: var(--way-accent); }

/* Границы */
.way-border { border: 1px solid var(--way-border); }
.way-border-accent { border-color: var(--way-accent); }

/* ============================================
   АДАПТИВНАЯ ТИПОГРАФИЯ
   Requirements: 6.4
   ============================================ */

/* Mobile-first: базовый размер 16px */
.way-body {
    font-family: var(--way-font-family);
    font-size: var(--way-font-size-mobile);
    line-height: var(--way-line-height);
    color: var(--way-text-primary);
}

/* Desktop: размер 14px */
@media (min-width: 768px) {
    .way-body {
        font-size: var(--way-font-size-desktop);
    }
}

/* ============================================
   ПРИВЕТСТВИЕ WAY
   ============================================ */

.way-greeting {
    font-size: var(--way-font-size-xl);
    font-weight: 600;
    color: var(--way-blue);
    margin-bottom: var(--way-spacing-sm);
    animation: waveIn 0.5s ease-out;
}

.way-greeting-subtitle {
    font-size: var(--way-font-size-mobile);
    color: var(--way-text-secondary);
    animation: waveIn 0.5s ease-out 0.1s both;
}

/* ============================================
   КОНТЕЙНЕР WAY
   ============================================ */

.way-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--way-spacing-md);
}

@media (min-width: 768px) {
    .way-container {
        padding: 0 var(--way-spacing-lg);
    }
}

/* ============================================
   СЕТКА WAY
   ============================================ */

.way-grid {
    display: grid;
    gap: var(--way-spacing-md);
}

.way-grid-2 {
    grid-template-columns: repeat(1, 1fr);
}

.way-grid-3 {
    grid-template-columns: repeat(1, 1fr);
}

.way-grid-4 {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .way-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .way-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .way-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   СПИСОК WAY
   ============================================ */

.way-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.way-list-item {
    padding: var(--way-spacing-md);
    border-bottom: 1px solid var(--way-border);
    transition: var(--way-transition);
    animation: waveIn 0.3s ease-out;
}

.way-list-item:last-child {
    border-bottom: none;
}

.way-list-item:hover {
    background: var(--way-bg-secondary);
}

/* ============================================
   ИКОНКИ WAY
   ============================================ */

.way-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--way-radius-md);
    background: var(--way-bg-secondary);
    color: var(--way-accent);
    transition: var(--way-transition);
}

.way-icon:hover {
    background: var(--way-accent);
    color: white;
}

.way-icon-sm {
    width: 32px;
    height: 32px;
}

.way-icon-lg {
    width: 48px;
    height: 48px;
}

/* ============================================
   РАЗДЕЛИТЕЛЬ WAY
   ============================================ */

.way-divider {
    height: 1px;
    background: var(--way-border);
    margin: var(--way-spacing-md) 0;
}

.way-divider-vertical {
    width: 1px;
    height: 100%;
    background: var(--way-border);
    margin: 0 var(--way-spacing-md);
}


/* ============================================
   БЕЙДЖ УНИВЕРСИТЕТА
   Requirements: 5.1.2
   ============================================ */

.university-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: var(--way-accent);
    border-radius: 10px;
    animation: pulse-soft 2s ease-in-out infinite;
}

.university-badge.badge-warning {
    background: var(--way-warning);
}

.university-badge.badge-success {
    background: var(--way-success);
    animation: none;
}