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

:root {
  /* Палітра на основі #D35400 (Помаранчевий) та #F39C12 (Жовтий) */
  
  --primary-color: #D35400;         /* Основний помаранчевий */
  --secondary-color: #F39C12;      /* Вторинний жовтий/золотий */
  --accent-color: #E67E22;         /* Яскравий помаранчевий (акцент) */
  --light-color: #FFF5E6;         /* Дуже світло-помаранчевий (фон блоків) */
  --dark-color: #A04000;          /* Темно-помаранчевий (темніший primary) */
  
  /* Градієнт на основі палітри */
  --gradient-primary: linear-gradient(135deg, #F39C12 0%, #D35400 100%);
  
  /* Варіації */
  --hover-color: #A04000;         /* Темніший --primary-color для hover */
  --background-color: #FFFCF9;    /* Дуже світлий фон сторінки (теплий) */
  --text-color: #4A2C0F;          /* Основний колір тексту (темно-коричневий) */
  
  /* Кольори UI */
  --border-color: rgba(211, 84, 0, 0.2);     /* 20% --primary-color */
  --divider-color: rgba(211, 84, 0, 0.1);    /* 10% --primary-color */
  --shadow-color: rgba(160, 64, 0, 0.1);       /* 10% --dark-color */

  /* Компліментарний (протилежний помаранчевому) - Синій */
  --highlight-color: #2980B9;
  
  /* Шрифти */
  --main-font: 'Montserrat', sans-serif;
  --alt-font: 'Lato', 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;
}