/* base.css - Dark Theme (Deep Gray, Not Black) */
:root {
    /* Colors - Deep gray theme, easy on eyes */
    --color-bg-primary: #0f0f13;      /* Deep charcoal background */
    --color-bg-secondary: #1a1a1f;    /* Slightly lighter for cards */
    --color-bg-card: #1e1e24;         /* Card background */
    --color-bg-elevated: #25252d;     /* Hover states / modals */
    
    /* Purple theme - Muted but visible */
    --color-purple-50: #f3e8ff;
    --color-purple-100: #c084fc;
    --color-purple-200: #a855f7;
    --color-purple-300: #9333ea;
    --color-purple-400: #7e22ce;
    --color-purple-500: #6b21a5;
    --color-purple-glow: rgba(168, 85, 247, 0.08);
    --color-purple-light: rgba(168, 85, 247, 0.12);
    
    /* Gray scale - Warm grays for readability */
    --color-gray-50: #fafafa;
    --color-gray-100: #e5e5e5;    /* Main text */
    --color-gray-200: #d4d4d4;    /* Headings */
    --color-gray-300: #a3a3a3;    /* Secondary text */
    --color-gray-400: #737373;    /* Labels / Icons */
    --color-gray-500: #525252;    /* Placeholders */
    --color-gray-600: #404040;    /* Borders */
    --color-gray-700: #292929;    /* Dividers */
    --color-gray-800: #1c1c1e;    /* Deep background */
    
    /* Borders - Subtle */
    --border-color: rgba(168, 85, 247, 0.15);
    --border-color-light: rgba(168, 85, 247, 0.08);
    --border-color-hover: rgba(168, 85, 247, 0.3);
    
    /* Gradients - Softer */
    --gradient-primary: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    --gradient-text: linear-gradient(135deg, #e5e5e5, #c084fc);
    --gradient-glow: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
    
    /* Shadows - For depth */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 48px;
    
    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--color-bg-primary);
    color: var(--color-gray-100);
    overflow-x: hidden;
}

/* Custom scrollbar - Dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-gray-800);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-purple-500);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-purple-400);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-purple-500) var(--color-gray-800);
}

/* base.css - Dark Theme (Deep Gray, Not Black) - ДОБАВИТЬ В КОНЕЦ */

/* Telegram Mini App specific */
body {
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-x pan-y;
}

/* Для корректной работы скролла в Mini App */
html, body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Исправляем скролл внутри контейнеров */
.calendar-container,
.schedule-staff-list,
.modal-body {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Убираем pull-to-refresh эффект где не нужно */
.main-content,
.club-container,
.dashboard-container {
    overscroll-behavior: none;
}

/* Адаптация под тему Telegram через CSS переменные */
:root {
    --tg-bg-color: #0f0f13;
    --tg-text-color: #e5e5e5;
    --tg-hint-color: #737373;
    --tg-link-color: #c084fc;
    --tg-button-color: #a855f7;
    --tg-button-text-color: #ffffff;
    --tg-secondary-bg-color: #1a1a1f;
}