/**
 * VideoHub360 CSS Variables
 * 
 * Centralized CSS custom properties for consistent styling across all components
 * This file should be loaded first before any other VideoHub360 stylesheets
 * 
 * @since 2.0.0
 */

:root {
    /* ============================
     * Color System
     * ============================ */
    --vh360-color-white: #fff;
    --vh360-color-black: #000;
    --vh360-color-dark: #333;
    --vh360-color-dark-alt: #1a1a1a;
    --vh360-color-dark-medium: #2d2d2d;
    --vh360-color-darker: #222;
    --vh360-color-medium: #666;
    --vh360-color-light: #999;
    --vh360-color-light-gray: #909090;
    --vh360-color-gray: #6b7280;
    --vh360-color-gray-light: #9ca3af;
    --vh360-color-border: #e0e0e0;
    --vh360-color-border-light: #ccc;
    --vh360-color-border-dark: #555;
    --vh360-color-admin: #23282d;
    --vh360-color-primary: #2196F3;
    --vh360-color-primary-dark: #1976d2;
    --vh360-color-accent: #ff6b00;
    --vh360-color-success: #4CAF50;
    --vh360-color-error: #f44336;
    --vh360-color-warning: #ff9800;
    
    /* Background colors */
    --vh360-bg-white: #fff;
    --vh360-bg-light: #f9f9f9;
    --vh360-bg-lighter: #f8f9fa;
    --vh360-bg-medium: #f5f5f5;
    --vh360-bg-dark: #f0f0f0;
    --vh360-bg-dark-theme: #2a2a2a;
    --vh360-bg-dark-hover: #444;
    
    /* ============================
     * Opacity Values
     * ============================ */
    --vh360-opacity-overlay: 0.8;
    --vh360-opacity-light: 0.6;
    --vh360-opacity-subtle: 0.1;
    
    /* ============================
     * Border Radius Scale
     * ============================ */
    --vh360-radius-sm: 4px;
    --vh360-radius-md: 8px;
    --vh360-radius-lg: 12px;
    --vh360-radius-full: 50%;
    
    /* ============================
     * Spacing Scale
     * ============================ */
    --vh360-spacing-xs: 4px;
    --vh360-spacing-sm: 8px;
    --vh360-spacing-md: 12px;
    --vh360-spacing-lg: 16px;
    --vh360-spacing-xl: 20px;
    --vh360-spacing-2xl: 24px;
    
    /* ============================
     * Transitions
     * ============================ */
    --vh360-transition-fast: 0.15s ease;
    --vh360-transition-normal: 0.2s ease;
    --vh360-transition-slow: 0.3s ease;
    
    /* ============================
     * Z-Index Scale
     * Systematic layering for proper UI stacking
     * ============================ */
    --vh360-z-base: 1;          /* Base content, main wrapper */
    --vh360-z-ui-low: 10;       /* Low-priority UI elements */
    --vh360-z-ui-medium: 100;   /* Medium-priority UI, controls */
    --vh360-z-ui-high: 1000;    /* High-priority UI, dropdowns */
    --vh360-z-overlay: 10000;   /* Overlays, chat panels */
    --vh360-z-modal: 10001;     /* Modals, dialogs */
    --vh360-z-system: 100000;   /* System-level UI, fullscreen */
    --vh360-z-picker: 1000000;  /* Emoji picker, tooltips - must be above chat popup (999999) */
    
    /* ============================
     * Multi-View Layout Variables
     * ============================ */
    
    /* Multi-view colors */
    --vh360-mv-bg-dark: #1a1a1a;
    --vh360-mv-bg-medium: #2a2a2a;
    --vh360-mv-border: #333;
    --vh360-mv-border-hover: #0084ff;
    --vh360-mv-border-active: #4CAF50;
    --vh360-mv-text-light: rgba(255, 255, 255, 0.7);
    
    /* Multi-view dimensions - Desktop */
    --vh360-mv-thumbnail-lg: 180px;
    --vh360-mv-thumbnail-md: 160px;
    --vh360-mv-thumbnail-sm: 120px;
    
    /* Multi-view dimensions - Mobile (768px and below) */
    --vh360-mv-thumbnail-mobile-lg: 120px;
    --vh360-mv-thumbnail-mobile-md: 110px;
    --vh360-mv-thumbnail-mobile-sm: 90px;
    
    /* Multi-view dimensions - Tablet (769px to 1024px) */
    --vh360-mv-thumbnail-tablet-lg: 160px;
    --vh360-mv-thumbnail-tablet-md: 140px;
    --vh360-mv-thumbnail-tablet-sm: 110px;
    
    /* Multi-view spacing */
    --vh360-mv-gap-lg: 18px;
    --vh360-mv-gap-md: 12px;
    --vh360-mv-gap-sm: 8px;
    --vh360-mv-padding-lg: 20px;
    --vh360-mv-padding-md: 15px;
    --vh360-mv-padding-sm: 10px;
    
    /* Multi-view aspect ratios */
    --vh360-mv-aspect-standard: 16/9;
    --vh360-mv-aspect-square: 4/3;
    --vh360-mv-aspect-mobile: 3/4;
    
    /* Multi-view transitions */
    --vh360-mv-transition-fast: 0.2s ease;
    --vh360-mv-transition-smooth: 0.3s ease;
    --vh360-mv-transition-slow: 0.5s ease;
}

/* ============================
 * Utility Classes
 * Common patterns used across components
 * ============================ */

/* Border radius utilities */
.vh360-circle { border-radius: var(--vh360-radius-full); }
.vh360-rounded { border-radius: var(--vh360-radius-md); }
.vh360-rounded-sm { border-radius: var(--vh360-radius-sm); }
.vh360-rounded-lg { border-radius: var(--vh360-radius-lg); }