/**
 * SeoTiGR — CSS Custom Properties (змінні)
 * Всі кольори, шрифти та базові значення в одному місці.
 * Змінюйте тут для швидкої кастомізації всієї теми.
 */

:root {
    /* ---- Кольорова палітра ---- */
    --color-primary:       #2F4538;   /* Темно-зелений (основний) */
    --color-primary-light: #355A3F;   /* Зелений трохи світліший */
    --color-primary-dark:  #1E2E24;   /* Темніший відтінок для hover */
    --color-accent:        #D4AF37;   /* Золотистий / пісочний акцент */
    --color-accent-light:  #F4E4BC;   /* Світлий акцент для фонів */
    --color-accent-dark:   #B8950F;   /* Темне золото для hover */
    --color-white:         #FFFFFF;
    --color-light-gray:    #F8F8F8;   /* Нейтральний фон для секцій */
    --color-border:        #E8E8E0;   /* Колір рамок */
    --color-text:          #2C2C2C;   /* Основний колір тексту */
    --color-text-muted:    #6B7280;   /* Приглушений текст */
    --color-error:         #C0392B;   /* Помилки форм */
    --color-success:       #27AE60;   /* Успішні дії */

    /* ---- Типографіка ---- */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', 'Source Sans Pro', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --font-size-xs:   0.75rem;   /*  12px */
    --font-size-sm:   0.875rem;  /*  14px */
    --font-size-base: 1rem;      /*  16px */
    --font-size-lg:   1.125rem;  /*  18px */
    --font-size-xl:   1.25rem;   /*  20px */
    --font-size-2xl:  1.5rem;    /*  24px */
    --font-size-3xl:  1.875rem;  /*  30px */
    --font-size-4xl:  2.25rem;   /*  36px */
    --font-size-5xl:  3rem;      /*  48px */
    --font-size-6xl:  3.75rem;   /*  60px */

    --line-height-tight:  1.2;
    --line-height-snug:   1.35;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;

    /* ---- Анімації та переходи ---- */
    --transition:       0.3s ease;
    --transition-slow:  0.5s ease;
    --transition-fast:  0.15s ease;
    --easing-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Тіні ---- */
    --shadow-xs:    0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow:       0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-md:    0 6px 24px rgba(0, 0, 0, 0.10);
    --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.15);
    --shadow-lg:    0 12px 48px rgba(0, 0, 0, 0.18);

    /* ---- Заокруглення ---- */
    --radius-sm:  4px;
    --radius:     8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* ---- Відступи ---- */
    --spacing-xs:  0.25rem;   /*  4px */
    --spacing-sm:  0.5rem;    /*  8px */
    --spacing-md:  1rem;      /* 16px */
    --spacing-lg:  1.5rem;    /* 24px */
    --spacing-xl:  2rem;      /* 32px */
    --spacing-2xl: 3rem;      /* 48px */
    --spacing-3xl: 4rem;      /* 64px */
    --spacing-4xl: 5rem;      /* 80px */
    --spacing-5xl: 6rem;      /* 96px */

    /* ---- Макет ---- */
    --container:      1200px;
    --container-wide: 1400px;
    --container-sm:   960px;
    --sidebar-width:  320px;
    --header-height:  80px;

    /* ---- Z-index шари ---- */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-floating:   500;
    --z-toast:      600;
}

/* Темний режим (за бажанням розширити) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Можна додати dark mode пізніше */
    }
}