/* =====================================================
   CLASSIFIED - Design System Foundation
   ===================================================== */

/* ===== ROOT VARIABLES ===== */
:root {
    /* Primary Colors */
    --primary-blue: #3b82f6;
    --primary-blue-dark: #2563eb;
    --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    
    --secondary-red: #FF6B6B;
    --secondary-red-light: #FF8C8C;
    --secondary-gradient: linear-gradient(135deg, #FF6B6B, #FF8C8C);
    
    --accent-cyan: #00D4FF;
    --accent-cyan-dark: #0099CC;
    --accent-gradient: linear-gradient(135deg, #00D4FF, #0099CC);
    
    --accent-gold: #FFD700;
    --accent-gold-dark: #FFA500;
    --gold-gradient: linear-gradient(135deg, #FFD700, #FFA500);
    
    /* Neutrals */
    --bg-dark: #1a1a1a;
    --bg-darker: #0a0a0a;
    --bg-card: #2b2b2b;
    --bg-elevated: #2a2a2a;
    
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-heavy: rgba(255, 255, 255, 0.3);
    
    /* Semantic Colors */
    --success: #4CAF50;
    --success-bg: rgba(76, 175, 80, 0.2);
    --success-border: rgba(76, 175, 80, 0.3);
    
    --error: #FF6B6B;
    --error-bg: rgba(255, 107, 107, 0.2);
    --error-border: rgba(255, 107, 107, 0.3);
    
    --warning: #FFD93D;
    --warning-bg: rgba(255, 217, 61, 0.2);
    --warning-border: rgba(255, 217, 61, 0.3);
    
    --info: #00D4FF;
    --info-bg: rgba(0, 212, 255, 0.2);
    --info-border: rgba(0, 212, 255, 0.3);
    
    /* Spacing Scale */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 40px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-pill: 25px;
    --radius-circle: 50%;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);
    
    /* Typography */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --text-xs: 10px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 32px;
    
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slowest: 0.5s ease;
    
    /* Z-index Scale - Organized Hierarchy */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 50;
    
   /* Overlays: 100-199 */
    --z-overlay-base: 100;           /* Base overlay screens */
    --z-overlay-chat: 320;           /* Chat screens */
    --z-overlay-business-chat: 330;  /* Business chat (slightly higher) */
    
    /* Floating UI: 300-399 */
    --z-carousel: 355;               /* Favorites carousel */
    
    /* Profiles: 400-449 (MUST be above chats) */
    --z-overlay-profile: 420;        /* User/profile views - ABOVE chats */
    --z-business-profile: 425;       /* Business profile overlay - ABOVE chats */
    
    /* Editors & Settings: 400-499 */
    --z-profile-editor: 460;         /* Profile editors */
    --z-settings: 470;               /* Settings overlay */
    
    /* Authentication: 500-599 */
    --z-auth-portal: 500;            /* Login/Register/Business auth screens */
    
    /* System: 600-999 */
    --z-loading: 600;                /* Loading overlays */
    
    /* Top Level: 1000+ */
    --z-modal: 1000;                 /* Match popup, alerts */
    --z-toast: 1100;                 /* Toast notifications */
    
    /* Layout */
    --container-max: 430px;
    --header-height: 60px;
    --nav-height: 80px;
}

/* ===== UTILITY CLASSES ===== */

/* Spacing Utilities */
.m-0 { margin: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

/* Text Utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }

.font-normal { font-weight: var(--weight-normal); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Background Utilities */
.bg-dark { background: var(--bg-dark); }
.bg-card { background: var(--bg-card); }
.bg-elevated { background: var(--bg-elevated); }

.bg-primary-gradient { background: var(--primary-gradient); }
.bg-secondary-gradient { background: var(--secondary-gradient); }
.bg-accent-gradient { background: var(--accent-gradient); }

/* Border Utilities */
.border { border: 1px solid var(--border-light); }
.border-medium { border: 1px solid var(--border-medium); }
.border-heavy { border: 1px solid var(--border-heavy); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: var(--radius-circle); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Flex Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* ===== REUSABLE COMPONENTS ===== */

/* Buttons */
.btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--primary-gradient);
    color: var(--text-primary);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-accent {
    background: var(--accent-gradient);
    color: var(--text-primary);
}

.btn-accent:hover {
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.3);
}

.btn-danger {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-border);
}

.btn-danger:hover {
    background: var(--error-border);
}

/* Cards */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-medium);
}

.card-elevated {
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
}

/* Form Elements */
.input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    transition: all var(--transition-base);
}

.input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px var(--info-bg);
}

.input::placeholder {
    color: var(--text-tertiary);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--spacing-sm);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-border);
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.badge-error {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-border);
}

/* Dividers */
.divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--spacing-lg) 0;
}

.divider-text {
    position: relative;
    text-align: center;
    color: var(--text-tertiary);
    margin: var(--spacing-lg) 0;
}

.divider-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-light);
}

.divider-text span {
    position: relative;
    background: var(--bg-dark);
    padding: 0 var(--spacing-md);
}


/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Visible */
*:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile-specific */
@media (max-width: 430px) {
    :root {
        --spacing-lg: 16px;
        --spacing-xl: 20px;
        --text-lg: 16px;
        --text-xl: 18px;
    }
}