/**
 * Root стилі для інтернет-магазину з підтримкою світлої та темної тем
 * ========================================================================== */
 :root {
    /* Color */
    --color-primary: white; 
    --color-secondary:#62BC52;
    --color-accent: #38475a; 

    --color-bg-header: #FFFFFF; 
    --color-bg-footer:#38475a; 
  
    --color-text-primary: #212529; /* Основний колір тексту - темно-сірий (для світлої теми) */
  
    
    --color-text-secondary: #6c757d; /* Вторинний колір тексту - сірий (для світлої теми) */
  
    --color-link: #007bff; /* Колір посилань - синій (для світлої теми) */
    --color-link-hover: #0056b3; /* Колір посилань при наведенні - темніший синій (для світлої теми) */
  
    --color-border-light: #dee2e6; /* Колір роздільників/рамок - світло-сірий (для світлої теми) */
    --color-border-dark: #6c757d; /* Колір роздільників/рамок - сірий (для темної теми) */
  
    --color-success: #28a745; /* Колір успіху - зелений */
    --color-error: #dc3545; /* Колір помилки - червоний */
    --color-warning: #ffc107; /* Колір попередження - жовтий */
    --color-info: #17a2b8; /* Колір інформації - блакитний */
  
    /* Typography */
    --font-family-base: sans-serif; /* Основний шрифт */
    --font-family-heading: sans-serif; /* Шрифт для заголовків */
    --font-size-base: 1rem; /* Основний розмір шрифту */
    --font-size-h1: 2.5rem; /* Розмір шрифту H1 */
    --font-size-h2: 2rem; /* Розмір шрифту H2 */
    --font-size-h3: 1.75rem; /* Розмір шрифту H3 */
    --font-size-h4: 1.1rem; /* Розмір шрифту H4 */
    --font-size-h5: 1rem; /* Розмір шрифту H5 */
    --font-size-h6: 0.9rem; /* Розмір шрифту H6 */
    --line-height-base: 1.5; /* Міжрядковий інтервал */
  
    /* Padding */
    --space-xs: 0.25rem;  
    --space-s: 0.5rem;   
    --space-m: 70px;     
    --space-l: 1.5rem;   
    --space-xl: 2rem;    
    --space-xxl: 3rem;   
  
    /* Size conteiner */
    --container-max-width: 1440px; /* Максимальна ширина контейнера для контенту */
    --container-padding-x: var(--space-m); /* Горизонтальний відступ контейнера */

    --container-padding-mob-x: 20px;
    --container-padding-y: var(--space-l); /* Вертикальний відступ контейнера */

    --padding-header-x: var(--space-m);
    --padding-header-y: var(--space-l);
  
    /* Bbreakpoints */
    --breakpoint-mobile: 576px; /* Мобільні телефони */
    --breakpoint-tablet: 768px; /* Планшети */
    --breakpoint-desktop: 992px; /* Десктопи */
    --breakpoint-large-desktop: 1200px; /* Великі десктопи */
  
    /* Other */
    --border-radius-small: 0.25rem; /* Мале заокруглення кутів */
    --border-radius-default: 0.5rem; /* Стандартне заокруглення кутів */
    --border-radius-large: 1rem; /* Велике заокруглення кутів */
    --transition-duration-default: 0.2s; /* Тривалість анімацій/переходів */
    --transition-timing-function-default: ease-in-out; /* Функція часу для анімацій/переходів */
    --box-shadow-default-light: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* Тінь для світлої теми */
    --box-shadow-default-dark: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3); /* Тінь для темної теми (більш виразна) */

	/** Burger menu	*/
    --header-background:#1d2327;
	--sub-menu-background: #ffffff;
	--color-link-menu: #1A1A1A;
	--color-active-link-menu: #62BC52;
    --color-hover-link-menu: #62BC52;
	--burger-color: #62BC52;

  }