/* Загальні стилі (за замовчуванням - світлий режим) */
/* body {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --primary-color: #5d8d82;
    --primary-hover-color: #76b0a3;
    --secondary-color: #6c757d;
    --accent-color: #ffc107;
    --border-color: #dee2e6;
    --link-color: #00ffbd;
    --link-hover-color: #00b381;
    --code-bg-color: #e9ecef;
    --code-text-color: #24292e;
    --card-bg-color: #ffffffcc;
} */
 body {
    /* Фон став трохи складнішим, "дорожчим" сіро-тиловим відтінком */
    --bg-color: #1b594d; 
    
    /* Глибокий графітовий замість різкого чорного */
    --text-color: #1e293b; 
    
    /* Сучасний, глибокий шавлієво-тиловий (Sage/Teal) */
    --primary-color: #3b6e64; 
    --primary-hover-color: #4a8579; 
    
    /* Спокійний сірий для другорядних елементів та підказок */
    --secondary-color: #64748b; 
    
    /* Пастельний бурштиновий замість кричущого жовтого (для статусів, алертів) */
    --accent-color: #f59e0b; 
    
    /* Дуже тонка, витончена лінія розмежування */
    --border-color: #e2e8f0; 
    
    /* Тепер посилання читабельні на світлому фоні й пасують до primary */
    --link-color: #257a69; 
    --link-hover-color: #1b594d; 
    
    /* Контейнери для коду або технічних міток (м'який тон) */
    --code-bg-color: #f1f5f9; 
    --code-text-color: #0f172a; 
    
    /* Чистий білий для карток, щоб вони "виривалися" вперед на фоні --bg-color */
    --card-bg-color: #ffffff; 
}
  
  /* Класи для елементів, які використовуватимуть кольори */
  .bg-primary {
    background-color: var(--primary-color);
    color: #fff; /* Зазвичай білий текст на основному кольорі */
  }
  
  .bg-secondary {
    background-color: var(--secondary-color);
    color: #fff; /* Зазвичай білий текст на другорядному кольорі */
  }
  
  .bg-accent {
    background-color: var(--accent-color);
    color: #212529; /* Зазвичай темний текст на акцентному кольорі */
  }
  
  .bg-base {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  
  .text-primary {
    color: var(--primary-color);
  }
  
  .text-secondary {
    color: var(--secondary-color);
  }
  
  .text-accent {
    color: var(--accent-color);
  }
  
  .text-base {
    color: var(--text-color);
  }
  
  .border-base {
    border-color: var(--border-color);
  }
  
  .link-base {
    color: var(--link-color);
  }
  
  .link-base:hover {
    color: var(--link-hover-color);
  }
  
  .code-bg {
    background-color: var(--code-bg-color);
    color: var(--code-text-color);
  }
  
  .card-bg {
    background-color: var(--card-bg-color);
    color: var(--text-color); /* Залежно від основного тексту */
  }
  
  /* Темний режим (перевизначення змінних) */
  .dark-mode {
    --bg-color: #212529; /* Темно-сірий фон */
    --text-color: #f8f9fa; /* Світло-сірий текст */
    --primary-color: #1e88e5; /* Трохи світліший основний синій */
    --secondary-color: #495057; /* Трохи світліший другорядний сірий */
    --accent-color: #fdd835; /* Трохи світліший акцентний жовтий */
    --border-color: #343a40; /* Темно-сіра межа */
    --link-color: #42a5f5; /* Світліший колір посилань */
    --link-hover-color: #64b5f6; /* Світліший колір посилань при наведенні */
    --code-bg-color: #343a40; /* Темний фон для коду */
    --code-text-color: #f0f8ff; /* Світлий колір тексту в коді */
    --card-bg-color: #343a40; /* Темний фон для карток/контейнерів */
  }