:root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --secondary: #64748b;
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;
            --gray-50: #f8fafc;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-300: #cbd5e1;
            --gray-400: #94a3b8;
            --gray-500: #64748b;
            --gray-600: #475569;
            --gray-700: #334155;
            --gray-800: #1e293b;
            --gray-900: #0f172a;
        }
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        body {
            background-color: var(--gray-50);
            color: var(--gray-900);
        }
        
        /* Mobile-first responsive breakpoints */
        @media (max-width: 767px) {
            .mobile-hidden { display: none !important; }
            .mobile-full { width: 100% !important; }
        }
        
        @media (min-width: 768px) {
            .desktop-hidden { display: none !important; }
        }
        
        /* Touch-friendly buttons */
        .touch-target {
            min-height: 44px;
            min-width: 44px;
        }
        
        /* Smooth transitions */
        .transition-smooth {
            transition: all 0.2s ease-in-out;
        }
        
        /* Custom scrollbar */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: var(--gray-100);
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: var(--gray-300);
            border-radius: 3px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: var(--gray-400);
        }
        
        /* Mobile drawer animation */
        .drawer-enter {
            transform: translateX(-100%);
        }
        
        .drawer-enter-active {
            transform: translateX(0);
            transition: transform 0.3s ease-out;
        }
        
        .drawer-exit {
            transform: translateX(0);
        }
        
        .drawer-exit-active {
            transform: translateX(-100%);
            transition: transform 0.3s ease-in;
        }
        
        /* Bottom sheet for mobile modals */
        .bottom-sheet {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-radius: 16px 16px 0 0;
            transform: translateY(100%);
            transition: transform 0.3s ease-out;
            z-index: 50;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .bottom-sheet.open {
            transform: translateY(0);
        }
        
        /* Card hover effects */
        .card-hover {
            transition: all 0.2s ease-in-out;
        }
        
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        /* Loading states */
        .loading-shimmer {
            background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }
        
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        /* Focus states for accessibility */
        .focus-ring:focus {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
        
        /* Status colors */
        .status-active { background-color: #dbeafe; color: #1e40af; }
        .status-on-hold { background-color: #fef3c7; color: #92400e; }
        .status-complete { background-color: #d1fae5; color: #065f46; }
        .status-cancelled { background-color: #fee2e2; color: #991b1b; }
        
        /* Phase colors */
        .phase-cds { background-color: #e0e7ff; color: #3730a3; }
        .phase-sa { background-color: #f0f9ff; color: #0c4a6e; }
        .phase-con { background-color: #f0fdf4; color: #166534; }
        .phase-fp { background-color: #fefce8; color: #a16207; }
        .phase-ab { background-color: #fdf2f8; color: #be185d; }
        .phase-pp { background-color: #fdf4ff; color: #86198f; }
    </style>