/* Підключення шрифтів (резерв, якщо preload не спрацює) */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Roboto:wght@400;500&display=swap');

:root {
  /* Палітра на основі #2980B9 (Синій) та #16A085 (Зелений/Бірюзовий) */
  
  --primary-color: #2980B9;         /* Основний синій */
  --secondary-color: #16A085;      /* Вторинний зелений */
  --accent-color: #1ABC9C;         /* Яскравий бірюзовий (акцент) */
  --light-color: #EAF6FB;         /* Дуже світло-синій (фон блоків) */
  --dark-color: #2C3E50;          /* Темно-синій (текст, футер) */
  
  /* Градієнт на основі палітри */
  --gradient-primary: linear-gradient(135deg, #1ABC9C 0%, #2980B9 100%);
  
  /* Варіації */
  --hover-color: #2471A3;         /* Темніший --primary-color для hover */
  --background-color: #FCFEFF;    /* Дуже світлий фон сторінки */
  --text-color: #34495E;          /* Основний колір тексту */
  
  /* Кольори UI */
  --border-color: rgba(41, 128, 185, 0.2);     /* 20% --primary-color */
  --divider-color: rgba(41, 128, 185, 0.1);    /* 10% --primary-color */
  --shadow-color: rgba(44, 62, 80, 0.1);       /* 10% --dark-color */

  /* Компліментарний (протилежний синьому) - Помаранчевий */
  --highlight-color: #F39C12;
  
  /* Шрифти */
  --main-font: 'Oswald', sans-serif;
  --alt-font: 'Roboto', sans-serif;
}

/* Загальні стилі */
body {
  font-family: var(--alt-font);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--main-font);
  line-height: 1.3;
}

/* Специфічні класи для тіней, які краще виглядають з CSS змінними */
.shadow-lg {
   box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
}
.shadow-sm {
  box-shadow: 0 1px 2px 0 var(--shadow-color);
}
.shadow-inner {
  box-shadow: inset 0 2px 4px 0 var(--shadow-color);
}

/* Приховування z-index для SVG фону */
.-z-10 {
  z-index: -10;
}