/* ============================================
ПЕРЕМЕННЫЕ ПРОЕКТА
Версия: 1.2
============================================ */



:root {

/* ---------- ЦВЕТА (СЫРЫЕ) ---------- */

    /* Основа */
    --white: #fcfcfc;
    --black: #242424;

    --blue-100: #e7f3ff;
    --blue-500: #A4BFEF;
    --green-100: #e0f7e1;
    --green-500: #7AB900;
    --red-100: #ede4e5;
    --red-500: #E4757F;
    --orange-500: #FCCB60;

    --primary: #7AB900;
    --secondary: #ACACAC;

    /* Серый */
    --gray-100: #F6F6F6;
    --gray-200: #f1f3f4;
    --gray-300: #E6E6E6;
    --gray-400: #d7d7d7;
    --gray-500: #A5A5A5;
    --gray-700: #757678;
    --gray-900: #4B4B4B;


/* ---------- СЕМАНТИЧЕСКИЕ ЦВЕТА ---------- */

    /* Фоны */
    --bg-white: var(--white);
    --bg-black: var(--black);
    
    --bg-page: var(--white);
    
    --bg-primary: var(--gray-300);
    --bg-secondary: var(--gray-200);

    --bg-accent: var(--blue-500);
    --bg-danger: var(--red-500);
    --bg-light: var(--gray-300);

    /* Текст */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-light: var(--gray-300);

    --text-inverse: var(--white);

    --text-disabled: var(--gray-400);
    --text-link: var(--blue-500);
    --text-accent: var(--red-500);

    /* Акцентный цвет для рамок, иконок, мелких деталей (не фон и не текст) */
    --color-dark: var(--gray-700);
    --color-base: var(--gray-300);
    --color-primary: var(--primary);
    
    /* Акцент */
    --color-success: var(--green-500);
    --color-warning: var(--orange-500);
    --color-danger: var(--red-500);
    --color-netral: var(--blue-500);


    --color-red-light: var(--red-100);  
    --color-green-light: var(--green-100);  
    --color-blue-light: var(--blue-100);




/* ---------- КНОПКИ ---------- */

    --btn-primary:  var(--primary);
    --btn-secondary: var(--secondary);
    --btn-navigate: var(--secondary);

    --btn-success: var(--green-500);
    --btn-cancel: var(--gray-500);

    --btn-danger: var(--red-500);
    --btn-warning: var(--orange-500);

    /* Ховеры */
    --btn-primary-hover: var(--primary);
    --btn-secondary-hover: var(--gray-700);

    --btn-success-hover: #4da832;
    --btn-danger-hover: #a33d3d;
    --btn-warning-hover: #d97a45;



/* ---------- ОФОРМЛЕНИЕ ---------- */

    /* Рамки */
    --border: 1px solid var(--bg-primary);
    --border-light: 1px solid var(--bg-light);
    --border-focus: 1px solid var(--color-primary);

    /* Тени */
    --shadow-in: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-out: 0 1px 3px rgba(0, 0, 0, 0.1);

    /* Отступы (rem) */
    --spacing-xs: 0.400rem;    /* 10px */
    --spacing-sm: 1.0rem;       /* 20px */
    --spacing-md: 2.0rem;    /* 40px */
    --spacing-lg: 4.4rem;   /* 70px */

    /* Скругления */
    --radius-xs: 0.95rem;   
    --radius-sm: 1.4rem;    
    --radius-md: 3.0rem;     
    --radius-lg: 5.0rem;   

    /* Прочее */
    --max-width: 1200px;

    /* Шапка */
    --header-height: 100px;
    --main-height: calc(100vh - var(--header-height));




/* ---------- ТЕМНАЯ ТЕМА ---------- */
[data-theme="dark"] {
    --bg-page: var(--gray-900);
    --text-primary: var(--white);
    --text-secondary: var(--gray-400);
    --border: 1px solid #4a4f56;
}

}

/* ---------- АДАПТАЦИЯ (768px) ---------- */
@media (max-width: 768px) {
    :root {
        --spacing-xs: 0.5rem;     /* 8px */
        --spacing-sm: 1rem;       /* 16px */
        --spacing-md: 1.25rem;    /* 20px */
        --spacing-lg: 1.875rem;   /* 30px */
    }
}