/* Configuration CSS - Video Vision Security */
/* Centralized configuration for consistent layout and styling */

:root {
    /* Layout Width Configuration */
    --content-padding-mobile: 1.5rem;
    --content-padding-desktop: 3vh;
    
    /* Topbar Configuration */
    --topbar-padding-mobile: var(--content-padding-mobile);
    --topbar-padding-desktop: var(--content-padding-desktop);
    
    /* Navbar Configuration */
    --navbar-padding-mobile: var(--content-padding-mobile);
    --navbar-padding-desktop: var(--content-padding-desktop);
    
    /* Content Configuration */
    --page-content-padding-mobile: var(--content-padding-mobile);
    --page-content-padding-desktop: var(--content-padding-desktop);
    
    /* Border Radius Configuration */
    --border-radius-small: 8px;
    --border-radius-medium: 12px;
    --border-radius-large: 15px;
    --border-radius-xlarge: 20px;
    
    /* Color Configuration */
    --primary-color: #0080FF;
    --secondary-color: #9B9B9B;
    --light-color: #F5F5F5;
    --dark-color: #161616;
    
    /* Glass Effect Configuration */
    --glass-blur: blur(10px);
    --glass-background: rgba(229,229,229,0.9);
    
    /* Shadow Configuration */
    --shadow-light: 0 2px 10px rgba(0,0,0,0.05);
    --shadow-medium: 0 4px 15px rgba(0,0,0,0.1);
    --shadow-heavy: 0 8px 25px rgba(0,0,0,0.15);
    
    /* Transition Configuration */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.5s ease;
    --transition-slow: 0.8s ease;
}

/* Global Layout Classes */
.vvs-container-padding {
    padding-left: var(--content-padding-mobile);
    padding-right: var(--content-padding-mobile);
}

@media (min-width: 992px) {
    .vvs-container-padding {
        padding-left: var(--content-padding-desktop);
        padding-right: var(--content-padding-desktop);
    }
}

/* Responsive Layout Utilities */
.vvs-topbar-padding {
    padding-left: var(--topbar-padding-mobile);
    padding-right: var(--topbar-padding-mobile);
}

@media (min-width: 992px) {
    .vvs-topbar-padding {
        padding-left: var(--topbar-padding-desktop);
        padding-right: var(--topbar-padding-desktop);
    }
}

.vvs-navbar-padding {
    padding-left: var(--navbar-padding-mobile);
    padding-right: var(--navbar-padding-mobile);
}

@media (min-width: 992px) {
    .vvs-navbar-padding {
        padding-left: var(--navbar-padding-desktop);
        padding-right: var(--navbar-padding-desktop);
    }
}

/* Easy Configuration Instructions */
/*
To adjust layout width consistently across the site:

1. MOBILE PADDING: Change --content-padding-mobile value (currently 1.5rem)
2. DESKTOP PADDING: Change --content-padding-desktop value (currently 3vh)

Example adjustments:
- For narrower layout: --content-padding-desktop: 2vh;
- For wider layout: --content-padding-desktop: 5vh;
- For fixed pixel widths: --content-padding-desktop: 2rem;

All topbar, navbar, content, and vendor bars will automatically adjust.
*/