:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --white: #ffffff;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.5;
    --border-radius: 0.25rem;
    --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --transition: all 0.3s ease;
    
    /* Минимальная ширина страницы */
    --min-width: 320px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--gray-800);
    background-color: var(--gray-100);
    
    /* Grid layout */
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-width: var(--min-width);
    width: 100%;
    overflow-x: auto;
    margin: 0;
}

/* Grid элементы (прямые потомки body) */
.header-grid-item,
.main-content,
.footer-grid-item {
    width: 100%;
    min-width: var(--min-width);
}

/* Основной контент - без паддингов */
.main-content {
    width: 100%;
    min-width: var(--min-width);
}

/* Контейнер для контента - здесь все паддинги */
.container {
    width: 100%;
    max-width: 1200px;
    min-width: var(--min-width);
    margin: 0 auto;
    padding: 2rem 15px;
    height: 100%;
}

/* Адаптивность */
@media (max-width: 768px) {
    .container {
        padding: 1rem 15px;
    }
}