/*
 * Portal System - Design System Variables
 * 
 * File: /portal/public/css/design-system.css
 * Created: 2025-09-15
 * Modified: 2025-09-21
 * Version: 2.0
 * 
 * Description: Core design system variables and base utilities
 * Dependencies: None
 * 
 * Changes in v2.0:
 * - Consolidated all design tokens
 * - Removed duplicate component styles (moved to style.css)
 * - Added missing spacing and typography tokens
 * - Improved color system organization
 */

:root {
    /* === BRAND COLORS === */
    --primary-blue: rgb(22, 22, 122);
    --primary-blue-light: #4a5bcc;
    --primary-blue-hover: rgba(22, 22, 122, 0.8);
    --primary-blue-alpha: rgba(22, 22, 122, 0.1);
    
    /* === BACKGROUND SYSTEM === */
    --bg-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    --bg-primary: #1e3c72;
    --bg-secondary: #2a5298;
    
    /* === SURFACE COLORS === */
    --surface-primary: rgba(255, 255, 255, 0.98);
    --surface-secondary: rgba(255, 255, 255, 0.8);
    --surface-border: rgba(255, 255, 255, 0.3);
    --surface-divider: rgba(102, 102, 102, 0.2);
    
    /* === SHADOWS === */
    --shadow-card: 0 25px 50px rgba(0, 0, 0, 0.15);
    --shadow-button: 0 4px 15px rgba(22, 22, 122, 0.3);
    --shadow-button-hover: 0 8px 25px rgba(22, 22, 122, 0.4);
    --shadow-app-card: 0 3px 12px rgba(0, 0, 0, 0.08);
    --shadow-app-card-hover: 0 6px 20px rgba(0, 0, 0, 0.12);
    
    /* === TEXT COLORS === */
    --text-primary: rgb(22, 22, 122);
    --text-secondary: #666;
    --text-muted: #777;
    --text-white: white;
    --text-error: #721c24;
    --text-success: #0f5132;
    
    /* === FORM SYSTEM === */
    --input-border: #e9ecef;
    --input-border-focus: var(--primary-blue);
    --input-focus-shadow: 0 0 0 0.2rem rgba(22, 22, 122, 0.25);
    
    /* === ALERT COLORS === */
    --alert-danger-bg: rgba(220, 53, 69, 0.1);
    --alert-danger-border: #dc3545;
    --alert-success-bg: rgba(25, 135, 84, 0.1);
    --alert-success-border: #198754;
    
    /* === SPACING SYSTEM === */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;
    --space-xxxl: 4rem;
    
    /* === TYPOGRAPHY SCALE === */
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.3rem;
    --font-size-xxl: 1.8rem;
    --font-size-xxxl: 2.2rem;
    
    /* === RESPONSIVE TYPOGRAPHY === */
    --heading-xl: clamp(1.8rem, 4vw, 2.2rem);
    --heading-lg: clamp(1.1rem, 3vw, 1.3rem);
    --heading-md: clamp(1rem, 2.5vw, 1.1rem);
    --text-responsive: clamp(0.8rem, 2vw, 0.9rem);
    --text-small-responsive: clamp(0.75rem, 1.8vw, 0.85rem);
    
    /* === FONT WEIGHTS === */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    
    /* === BORDER RADIUS === */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-xxl: 25px;
    
    /* === TRANSITIONS === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* === Z-INDEX SCALE === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1500;
    --z-header: 2100;
}

/* === BASE RESET === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === ANIMATION SYSTEM === */
.fade-in {
    animation: fadeIn 0.8s ease-in-out;
}

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

/* === UTILITY CLASSES === */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-white { color: var(--text-white); }

.font-light { font-weight: var(--weight-light); }
.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); }

.transition-fast { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-slow { transition: all var(--transition-slow); }