/* Meatbot Site | Build v0.9.8R.12 - CSS Variables */

:root {
  /* Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-red-primary: #EE3838;
  --color-red-secondary: #9F2121;
  --color-red-dark: #852626;
  --color-gray-light: #FFF1F1;
  --color-gray-medium: #FFEFEF;
  --color-gray-dark: #656565;
  
  /* Gradients */
  --gradient-red: linear-gradient(180deg, #852626 0%, #9F2121 50%, #EE3838 100%);
  
  /* Typography */
  --font-family-inter: 'Inter', sans-serif;
  --font-family-ubuntu: 'Ubuntu', sans-serif;
  --font-family-ubuntu-mono: 'Ubuntu Mono', monospace;
  
  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 24px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  
  /* Line Heights */
  --line-height-tight: 1.09;
  --line-height-normal: 1.2;
  --line-height-relaxed: 1.5;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  
  /* Layout */
  --container-max-width: 1440px;
  --hero-height: 1024px;
  
  /* Z-index */
  --z-background: 1;
  --z-decorative: 2;
  --z-content: 10;
  --z-robot: 5;
  
  /* Responsive Layout Variables - Desktop First */
  --container-padding: 20px;
  --section-padding: 120px 0 140px;
  --hero-height: 100vh;
  --hero-container-width: 1440px;
  --hero-content-padding: 0;
  --hero-features-grid: repeat(3, 1fr);
  --hero-features-gap: 24px;
  
  /* Typography Responsive */
  --hero-title-size: 48px;
  --hero-subtitle-size: 18px;
  --hero-features-title-size: 16px;
  --hero-features-desc-size: 14px;
  
  /* Navbar */
  --navbar-height: 56px;
  --navbar-padding: 0 20px;
  --navbar-menu-gap: 40px;
}

/* Tablet Styles */
@media (max-width: 1024px) {
  :root {
    --container-padding: 16px;
    --section-padding: 80px 0 100px;
    --hero-container-width: 100%;
    --hero-content-padding: 0 16px;
    --hero-features-grid: repeat(2, 1fr);
    --hero-features-gap: 20px;
    
    --hero-title-size: 36px;
    --hero-subtitle-size: 16px;
    --hero-features-title-size: 14px;
    --hero-features-desc-size: 12px;
    
    --navbar-padding: 0 16px;
    --navbar-menu-gap: 24px;
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  :root {
    --container-padding: 12px;
    --section-padding: 60px 0 80px;
    --hero-height: 100vh;
    --hero-container-width: 100%;
    --hero-content-padding: 0 12px;
    --hero-features-grid: 1fr;
    --hero-features-gap: 16px;
    
    --hero-title-size: 28px;
    --hero-subtitle-size: 14px;
    --hero-features-title-size: 13px;
    --hero-features-desc-size: 11px;
    
    --navbar-height: 80px; /* Увеличиваем для двухстрочного меню */
    --navbar-padding: 8px 12px;
    --navbar-menu-gap: 8px;
  }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
  :root {
    --container-padding: 8px;
    --section-padding: 40px 0 60px;
    --hero-content-padding: 0 8px;
    --hero-features-gap: 12px;
    
    --hero-title-size: 24px;
    --hero-subtitle-size: 13px;
    --hero-features-title-size: 12px;
    --hero-features-desc-size: 10px;
    
    --navbar-height: 70px; /* Немного меньше для маленьких экранов */
    --navbar-padding: 6px 8px;
    --navbar-menu-gap: 6px;
  }
}