/* ==================== CSS VARIABLES ==================== */
:root {
    /* Theme Colors */
    --primary-color: #d4af37;        /* Gold (Акцент: Заработок, Баланс) */
    --secondary-color: #0d1222;      /* Darker BG for main container */
    --accent-color: #00d4ff;         /* Cyan accent (для прогресса, лимитов) */
    --text-primary: #eef6fb;         /* Light text */
    --text-secondary: #9aa4b2;       /* Muted text */
    --border-color: rgba(255,255,255,0.08); /* Чуть темнее, чтобы не терялся */
    --bg-page: #0b1020;              /* Главный фон страницы (соответствует bg-1) */
    --bg-container: rgba(255,255,255,0.02); /* Фон карточек/элементов (соответствует secondary-color из старой версии) */
    --overlay-bg: rgba(0,0,0,0.85);

    /* Status Colors */
    --color-success: #34d399; /* Green */
    --color-danger: #ef4444;  /* Red */

    /* Spacing System */
    --spacing-xs: 6px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-2xl: 28px;

    /* Component Dimensions */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --nav-height: 80px;
    --btn-height: 48px;     /* ДОБАВЛЕНО */
    --input-height: 48px;   /* ДОБАВЛЕНО */

    /* Typography */
    --font-inter: 'Inter', sans-serif;
    --font-accent: 'Monomakh', serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --font-size-xs: 10px;
    --font-size-sm: 11px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-2xl: 36px;
    --font-size-3xl: 48px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 780px) {
    :root {
        --font-size-xl: 24px;
        --font-size-2xl: 32px;
        --font-size-3xl: 40px;
        --spacing-lg: 16px;
        --spacing-xl: 16px;
    }
}

@media (max-width: 360px) {
    :root {
        --spacing-xl: 14px;
        --font-size-xl: 20px;
        --font-size-2xl: 28px;
        --font-size-3xl: 36px;
    }
}