@import 'tailwindcss';
@import './notion-style.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Inter', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
        
    /* Shipbly Brand Colors */
    --color-primary-dark: #2E3A59;
    --color-primary-light: #5A6B9A;
    --color-accent: #0a84ff;
    --color-text-dark: #1A1A1A;
    --color-background-light: #F4F6FA;
    --color-white: #FFFFFF;
    
    /* Custom color utilities - moved to tailwind.config.js */
}

/* Accessibility improvements */
@layer base {
    /* Enhanced focus indicators for WCAG compliance */
    *:focus {
        outline: 2px solid #0a84ff;
        outline-offset: 2px;
    }
    
    /* Skip link for screen readers */
    .skip-link {
        position: absolute;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    
    .skip-link:focus {
        position: fixed;
        top: 10px;
        left: 10px;
        width: auto;
        height: auto;
        padding: 8px 16px;
        background: #0a84ff;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        z-index: 9999;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
    
    /* Remove animations for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* Custom UI Enhancements */
@layer components {
    /* Compact mode for power users */
    .compact-mode {
        --row-padding: 8px;
        --font-size: 13px;
        --card-padding: 16px;
        --button-padding: 8px 12px;
        --input-padding: 8px 12px;
        --line-height: 1.4;
    }
    
    .compact-mode .compact-card {
        padding: var(--card-padding);
    }
    
    .compact-mode .compact-button {
        padding: var(--button-padding);
        font-size: var(--font-size);
        line-height: var(--line-height);
    }
    
    .compact-mode .compact-input {
        padding: var(--input-padding);
        font-size: var(--font-size);
    }
    
    .compact-mode .compact-text {
        font-size: var(--font-size);
        line-height: var(--line-height);
    }
    
    .compact-mode .compact-spacing {
        margin: var(--row-padding) 0;
    }
    
    /* Enhanced contrast for better accessibility */
    .high-contrast {
        --color-text-contrast: #ffffff;
        --color-bg-contrast: #000000;
        --color-accent-contrast: #ffff00;
    }
    
    .high-contrast .high-contrast-text {
        color: var(--color-text-contrast) !important;
        background: var(--color-bg-contrast) !important;
    }
    
    .high-contrast .high-contrast-accent {
        color: var(--color-accent-contrast) !important;
    }
    
    /* Mobile responsiveness and touch targets */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    .touch-friendly {
        padding: 12px 16px;
        min-height: 48px;
        touch-action: manipulation;
    }
    
    /* Enhanced focus indicators for keyboard navigation */
    .focus-enhanced:focus {
        outline: 3px solid #0a84ff;
        outline-offset: 2px;
        box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.2);
    }
    
    /* Loading states and performance */
    .skeleton {
        background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }
    
    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    /* Mobile-first responsive improvements */
    @media (max-width: 768px) {
        .mobile-full-width {
            width: 100% !important;
        }
        
        .mobile-stack {
            flex-direction: column !important;
        }
        
        .mobile-text-center {
            text-align: center !important;
        }
        
        .mobile-hidden {
            display: none !important;
        }
        
        .mobile-p-4 {
            padding: 1rem !important;
        }
        
        .mobile-text-sm {
            font-size: 0.875rem !important;
        }
    }
}

/* Performance optimizations */
@layer utilities {
    /* GPU acceleration for smooth animations */
    .transform-gpu {
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Optimized transitions */
    .transition-smooth {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Loading state utilities */
    .loading-skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }
    
    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
}