/**
 * BlazinStreetz CSS Variables & Settings
 * Phase 2 Componentization - BSAPP-517
 *
 * This file establishes the foundation for our component architecture
 * using CSS custom properties for consistent, maintainable styling.
 *
 * @version 6.0.4
 * @author Chief Architect
 */

:root {
    /* ===========================
       Grid System Configuration
       =========================== */

    /* Column counts for fixed grid philosophy */
    --bs-grid-columns-mobile: 2;
    --bs-grid-columns-tablet: 3;
    --bs-grid-columns-desktop: 4;

    /* Grid gaps responsive to viewport */
    --bs-grid-gap-mobile: 15px;
    --bs-grid-gap-tablet: 20px;
    --bs-grid-gap-desktop: 25px;

    /* ===========================
       Responsive Breakpoints
       =========================== */

    --bs-breakpoint-mobile-large: 576px;
    --bs-breakpoint-tablet: 577px;
    --bs-breakpoint-desktop: 992px;
    --bs-breakpoint-desktop-hd: 1440px;

    /* ===========================
       Component Dimensions
       =========================== */

    /* Card Component */
    --bs-card-radius: 12px;
    --bs-card-radius-sm: 8px;
    --bs-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --bs-card-shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.4);
    --bs-card-hover-translate: -8px;
    --bs-card-transition: all 0.3s ease;

    /* Slide Component */
    --bs-slide-height-desktop: 130px;
    --bs-slide-height-tablet: 110px;
    --bs-slide-height-mobile: 100px;
    --bs-slide-padding: 20px;
    --bs-slide-padding-mobile: 15px;

    /* Aspect Ratios */
    --bs-aspect-video: 16/9;
    --bs-aspect-square: 1/1;
    --bs-aspect-album: 4/3;

    /* ===========================
       Spacing System
       =========================== */

    --bs-spacing-xs: 4px;
    --bs-spacing-sm: 8px;
    --bs-spacing-md: 16px;
    --bs-spacing-lg: 24px;
    --bs-spacing-xl: 32px;
    --bs-spacing-xxl: 48px;

    /* ===========================
       Typography
       =========================== */

    --bs-font-size-xs: 0.75rem;
    --bs-font-size-sm: 0.875rem;
    --bs-font-size-base: 1rem;
    --bs-font-size-lg: 1.125rem;
    --bs-font-size-xl: 1.25rem;
    --bs-font-size-xxl: 1.5rem;

    --bs-line-height-tight: 1.2;
    --bs-line-height-base: 1.5;
    --bs-line-height-relaxed: 1.75;

    /* ===========================
       Colors & Theming
       =========================== */

    /* Preserve existing theme variables */
    --bs-background-primary: var(--background);
    --bs-background-secondary: var(--background-light);
    --bs-background-tertiary: var(--background-dark);

    --bs-text-primary: var(--text);
    --bs-text-secondary: var(--text-muted);
    --bs-text-accent: var(--accent-color);

    /* Component-specific colors */
    --bs-overlay-dark: rgba(0, 0, 0, 0.7);
    --bs-overlay-light: rgba(255, 255, 255, 0.1);
    --bs-badge-explicit: #dc3545;
    --bs-badge-clean: #28a745;

    /* ===========================
       Animation & Transitions
       =========================== */

    --bs-transition-fast: 150ms ease;
    --bs-transition-base: 300ms ease;
    --bs-transition-slow: 500ms ease;

    --bs-animation-pulse: pulse 2s infinite;
    --bs-animation-fade-in: fadeIn 300ms ease;

    /* ===========================
       Z-Index Scale
       =========================== */

    --bs-z-dropdown: 100;
    --bs-z-sticky: 200;
    --bs-z-overlay: 300;
    --bs-z-modal: 400;
    --bs-z-notification: 500;
    --bs-z-tooltip: 600;

    /* ===========================
       Filter Component
       =========================== */

    --bs-filter-padding: 8px 20px;
    --bs-filter-margin: 5px;
    --bs-filter-radius: 20px;
    --bs-filter-transition: var(--bs-transition-base);
    --bs-filter-bg-default: var(--background-light);
    --bs-filter-bg-hover: var(--accent-color);
    --bs-filter-bg-active: var(--accent-color);

    /* ===========================
       Media Queries as CSS Variables
       =========================== */

    --bs-media-mobile: 576px;
    --bs-media-tablet: 768px;
    --bs-media-desktop: 992px;
    --bs-media-desktop-lg: 1200px;
    --bs-media-desktop-xl: 1440px;
}

/* ===========================
   Utility Keyframes
   =========================== */

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===========================
   Media Query Mixins (CSS-only approach)
   =========================== */

/* Mobile First Approach */
/* Default styles apply to mobile */

/* Tablet and up */
@media (min-width: 577px) {
    :root {
        /* Update values for tablet */
        --bs-current-columns: var(--bs-grid-columns-tablet);
        --bs-current-gap: var(--bs-grid-gap-tablet);
        --bs-current-slide-height: var(--bs-slide-height-tablet);
    }
}

/* Desktop and up */
@media (min-width: 992px) {
    :root {
        /* Update values for desktop */
        --bs-current-columns: var(--bs-grid-columns-desktop);
        --bs-current-gap: var(--bs-grid-gap-desktop);
        --bs-current-slide-height: var(--bs-slide-height-desktop);
    }
}

/* ===========================
   Debug Mode (Development Only)
   =========================== */

/* Uncomment during development to see component boundaries */
/*
.bs-debug * {
    outline: 1px solid rgba(255, 0, 0, 0.2);
}

.bs-debug .bs-card {
    outline: 2px solid rgba(0, 255, 0, 0.3);
}

.bs-debug .bs-slide {
    outline: 2px solid rgba(0, 0, 255, 0.3);
}
*/