/* ============================================
   ПЕРЕМЕННЫЕ
   ============================================ */
:root {
    --color-primary: #6C63FF;
    --color-primary-dark: #5a52d6;
    --color-secondary: #764ba2;
    --color-success: #2ecc71;
    --color-danger: #e74c3c;
    --color-warning: #f39c12;
    --color-info: #3498db;

    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;

    --color-text: #333333;
    --color-text-secondary: #555555;
    --color-text-muted: #999999;

    --font-family: 'Inter', sans-serif;

    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-md: 1.125rem;
    --font-lg: 1.25rem;
    --font-xl: 1.5rem;
    --font-2xl: 2rem;
    --font-3xl: 2.5rem;
    --font-4xl: 3.5rem;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
}

/* ============================================
   СБРОС
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-family);
    font-size: var(--font-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-white);
}

/* ============================================
   КОНТЕЙНЕРЫ
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ============================================
   СЕТКА
   ============================================ */
.grid {
    display: grid;
    gap: var(--space-lg);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ============================================
   ОТСТУПЫ
   ============================================ */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }

.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }

.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }

.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================
   ТИПОГРАФИЯ
   ============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-white { color: var(--color-white); }

.fs-sm { font-size: var(--font-sm); }
.fs-base { font-size: var(--font-base); }
.fs-md { font-size: var(--font-md); }
.fs-lg { font-size: var(--font-lg); }
.fs-xl { font-size: var(--font-xl); }
.fs-2xl { font-size: var(--font-2xl); }
.fs-3xl { font-size: var(--font-3xl); }
.fs-4xl { font-size: var(--font-4xl); }

.fw-light { font-weight: 300; }
.fw-regular { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.fw-extrabold { font-weight: 800; }

/* ============================================
   ФОНЫ
   ============================================ */
.bg-white { background: var(--color-white); }
.bg-gray { background: var(--color-gray-100); }
.bg-dark { background: var(--color-gray-900); }
.bg-primary { background: var(--color-primary); }
.bg-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.bg-success { background: var(--color-success); }
.bg-info { background: var(--color-info); }
.bg-warning { background: var(--color-warning); }

/* ============================================
   СКРУГЛЕНИЯ
   ============================================ */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-full { border-radius: var(--radius-full); }

/* ============================================
   ТЕНИ
   ============================================ */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ============================================
   FLEX
   ============================================ */
.d-flex { display: flex; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex-column { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow { flex: 1; }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ============================================
   УНИВЕРСАЛЬНЫЕ КОМПОНЕНТЫ
   ============================================ */
/* Карточка */
.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.card-body { padding: var(--space-lg); }

/* Бейдж */
.badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }
.badge-warning { background: var(--color-warning); color: var(--color-white); }
.badge-info { background: var(--color-info); color: var(--color-white); }
.badge-gray { background: var(--color-gray-200); color: var(--color-gray-700); }

/* Аватар */
.avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.3);
}
.avatar-sm { width: 50px; height: 50px; }
.avatar-md { width: 100px; height: 100px; }
.avatar-lg { width: 150px; height: 150px; }
.avatar-xl { width: 200px; height: 200px; }
.avatar-xxl { width: 350px; height: 350px; }

.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-gray-200);
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-2xl);
}

/* Секция */
.section { padding: var(--space-3xl) 0; }
.section-title {
    text-align: center;
    font-size: var(--font-3xl);
    font-weight: 700;
    margin-bottom: var(--space-lg);
}
.section-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: calc(-1 * var(--space-md)) auto var(--space-2xl);
    font-size: var(--font-md);
}

/* ============================================
   НАВИГАЦИЯ (глобальная)
   ============================================ */
.navbar {
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    padding: var(--space-md) 0;
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar .brand {
    font-size: var(--font-xl);
    font-weight: 800;
    text-decoration: none;
    color: var(--color-text);
}
.navbar .brand span { color: var(--color-primary); }
.navbar .nav a {
    color: var(--color-text);
    text-decoration: none;
    margin-left: var(--space-xl);
    font-weight: 600;
    transition: color 0.3s ease;
    font-size: var(--font-sm);
}
.navbar .nav a:hover { color: var(--color-primary); }

/* ============================================
   ФУТЕР (глобальный)
   ============================================ */
.footer {
    background: var(--color-gray-900);
    color: var(--color-white);
    padding: var(--space-2xl) 0;
}
.footer a {
    color: var(--color-gray-400);
    text-decoration: none;
    margin-left: var(--space-lg);
    transition: color 0.3s ease;
}
.footer a:hover { color: var(--color-primary); }

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */
@media (max-width: 992px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
    .navbar .container { flex-direction: column; gap: var(--space-sm); }
    .navbar .nav a { margin: 0 var(--space-sm); font-size: var(--font-xs); }
    .section { padding: var(--space-2xl) 0; }
    .section-title { font-size: var(--font-2xl); }
    .fs-4xl { font-size: var(--font-3xl); }
    .fs-3xl { font-size: var(--font-2xl); }
    .avatar-xxl { width: 200px; height: 200px; }
    .footer .container { flex-direction: column; text-align: center; gap: var(--space-md); }
    .footer a { margin: 0 var(--space-sm); }
}
@media (max-width: 480px) {
    .container { padding: 0 var(--space-sm); }
    .navbar .nav { display: flex; flex-wrap: wrap; justify-content: center; }
    .avatar-xxl { width: 150px; height: 150px; }
    .avatar-xl { width: 120px; height: 120px; }
}

/* ============================================
   ФУТЕР
   ============================================ */
.footer {
    background: var(--color-gray-900);
    color: var(--color-white);
    padding: var(--space-2xl) 0;
}
.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer .social a {
    color: var(--color-gray-400);
    text-decoration: none;
    margin-left: var(--space-lg);
    transition: color 0.3s ease;
    font-size: var(--font-sm);
}
.footer .social a:hover {
    color: var(--color-primary);
}
.footer a {
    color: var(--color-gray-400);
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer a:hover {
    color: var(--color-primary);
}
.footer .d-flex a {
    color: var(--color-gray-500);
    text-decoration: none;
    font-size: var(--font-sm);
}
.footer .d-flex a:hover {
    color: var(--color-white);
}

@media (max-width: 768px) {
    .footer .container {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }
    .footer .social a {
        margin: 0 var(--space-sm);
    }
    .footer .d-flex {
        flex-wrap: wrap;
        justify-content: center;
    }
}