/* ==============================================
   DYNAMIC THEME CSS VARIABLES
   Ці змінні оновлюються з Settings та застосовуються глобально
   ============================================== */

:root {
    /* Primary colors */
    --theme-primary: #B37A4C;
    --theme-secondary: #C28A50;
    --theme-accent: #E6B17E;
    
    /* Background colors */
    --theme-background: #0D0F14;
    --theme-surface: #1B2233;
    
    /* Text colors */
    --theme-text: #E2E8F0;
    --theme-text-secondary: #94A3B8;
    
    /* Fonts */
    --theme-font-family: 'Inter', sans-serif;
    --theme-heading-font-family: 'Oswald', sans-serif;
    
    /* Derived colors (для градієнтів, hover states) */
    --theme-primary-gradient: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    --theme-primary-hover: color-mix(in srgb, var(--theme-primary) 90%, white);
    --theme-primary-alpha-10: color-mix(in srgb, var(--theme-primary) 10%, transparent);
    --theme-primary-alpha-20: color-mix(in srgb, var(--theme-primary) 20%, transparent);
    --theme-primary-alpha-30: color-mix(in srgb, var(--theme-primary) 30%, transparent);
}

/* ==============================================
   APPLY TO COMMON ELEMENTS
   ============================================== */

body {
    font-family: var(--theme-font-family);
    color: var(--theme-text);
    background: var(--theme-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--theme-heading-font-family);
    color: var(--theme-text);
}

/* ==============================================
   BUTTON STYLES (застосовується до .hero-btn-primary і подібних)
   ============================================== */

.btn-primary,
.hero-btn-primary,
.submit-btn,
.cta-button {
    background: var(--theme-primary-gradient) !important;
    color: white !important;
}

.btn-primary:hover,
.hero-btn-primary:hover,
.submit-btn:hover {
    filter: brightness(1.1);
}

.btn-outline,
.hero-btn-secondary {
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

.btn-outline:hover,
.hero-btn-secondary:hover {
    background: var(--theme-primary-alpha-10) !important;
}

/* ==============================================
   LINKS AND ACCENTS
   ============================================== */

a.accent-link,
.text-accent {
    color: var(--theme-primary) !important;
}

a.accent-link:hover {
    color: var(--theme-secondary) !important;
}

/* ==============================================
   CARDS AND SURFACES
   ============================================== */

.card,
.section-card {
    background: var(--theme-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==============================================
   LOGO AND BRANDING
   ============================================== */

.logo,
.brand-text {
    color: var(--theme-primary) !important;
}