/* Переменные и базовые настройки (взяты из Работающего Кода 1) */
:root {
  --primary: #2cade5;
  --secondary: #4d7abc;
  --dark: #0F172A;
  --light: #F8FAFC;
  --gradient: linear-gradient(135deg, #2cade5, #4d7abc);
  
  --navbar-height: 5rem; 

  --btn-primary: var(--secondary);
  --btn-accent: rgb(255, 217, 0);
  
  /* Дополнительные цвета */
  --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;
  
  /* Spacing system */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;
  
  /* Border radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

  --primary-rgb: 44, 206, 229;   /* #2cade5 */
  --secondary-rgb: 77, 122, 188; /* #4d7abc */
  --dark-rgb: 15, 23, 42;        /* #0F172A */
}


/* ==========================================
   Доступность: Стили для фокуса
   ========================================== */
.nav-links a:focus-visible,
.btn:focus-visible,
.social-links a:focus-visible,
.page-link:focus-visible,
.btn-filter:focus-visible,
.publication-preview-btn:focus-visible,
.publication-download-btn:focus-visible,
.filter-btn:focus-visible,
.search-input:focus-visible,
.form-group input:focus-visible,
.form-group textarea:focus-visible {
  outline: 3px solid rgba(42, 202, 229, 0.6); /* Яркая и заметная обводка */
  outline-offset: 3px; /* Небольшой отступ от элемента */
  box-shadow: 0 0 0 4px rgba(42, 94, 232, 0.3); /* Дополнительная тень для лучшей видимости */
  border-radius: var(--radius-sm); /* Скругляем углы обводки, если у элемента есть радиус */
}


/* БАЗОВЫЕ СТИЛИ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--light);
  color: var(--dark);
  line-height: 1.7;
  font-size: 1rem;
}
html {
  scroll-padding-top: var(--navbar-height);
  scroll-behavior: smooth; /* Приятный бонус: плавная прокрутка */
}