/* ===================================
   CSS VARIABLES
   Централизованные переменные для всего приложения
   =================================== */

:root {
    /* === COLORS === */

    /* Primary Colors */
    --color-primary: #4CAFFF;
    --color-secondary: #8A2BE2;
    --color-accent: #FF6B9D;

    /* Background Colors */
    --bg-dark-primary: #16213e;
    --bg-dark-secondary: #0f1829;
    --bg-gradient: linear-gradient(135deg, #16213e 0%, #0f1829 100%);

    /* Glass Morphism Colors */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-bg-hover: rgba(255, 255, 255, 0.15);
    --glass-bg-active: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-border-hover: rgba(255, 255, 255, 0.3);
    --glass-border-active: rgba(255, 255, 255, 0.4);

    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 1);
    --text-secondary: rgba(255, 255, 255, 0.9);
    --text-tertiary: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-disabled: rgba(255, 255, 255, 0.6);
    --text-faint: rgba(255, 255, 255, 0.5);

    /* Status Colors */
    --status-success: #4CAF50;
    --status-warning: #FF9800;
    --status-error: #F44336;
    --status-info: #2196F3;

    /* === SPACING === */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;

    /* === BORDER RADIUS === */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-round: 50%;

    /* === SHADOWS === */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.2);

    /* === BLUR === */

    --blur-sm: blur(10px);
    --blur-md: blur(20px);
    --blur-lg: blur(30px);

    /* === Z-INDEX === */

    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-tooltip: 1600;
    --z-notification: 1700;
    --z-max: 2147483647; /* Maximum z-index for critical elements */

    /* === TRANSITIONS === */

    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* === TYPOGRAPHY === */

    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-size-xs: 9px;
    --font-size-sm: 10px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-base: 1.4;
    --line-height-relaxed: 1.6;

    /* === LAYOUT === */

    --top-bar-height: 44px;
    --bottom-nav-height: 84px;
    /* УНИВЕРСАЛЬНОЕ ПРАВИЛО: Панели начинаются после top-bar с небольшим отступом */
    --panel-top-offset: calc(var(--safe-top, 20px) + var(--top-bar-height) + 8px);

    /* === CURRENCY COLORS === */

    --currency-credits: linear-gradient(135deg, #FFD700, #FFA500);
    --currency-gems: linear-gradient(135deg, #9C27B0, #E91E63);
    --currency-stars: linear-gradient(135deg, #2196F3, #00BCD4);
    --currency-ton: linear-gradient(135deg, #0088CC, #229ED9);

    /* === BUTTON GRADIENTS === */

    --btn-primary: linear-gradient(135deg, #4CAFFF, #8A2BE2);
    --btn-success: linear-gradient(135deg, #4CAF50, #66BB6A);
    --btn-danger: linear-gradient(135deg, #F44336, #E91E63);
    --btn-warning: linear-gradient(135deg, #FF9800, #FFC107);
    --btn-info: linear-gradient(135deg, #2196F3, #03A9F4);

    /* === GEAR QUALITY COLORS === */

    --quality-common: #9E9E9E;
    --quality-uncommon: #4CAF50;
    --quality-rare: #2196F3;
    --quality-epic: #9C27B0;
    --quality-legendary: #FF9800;
}