@import 'tailwindcss';
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');

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

@theme {
    --font-sans: 'Roboto', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --font-serif: 'Times New Roman', Times, Georgia, serif;
    
    /* Memorycloset Media color palette */
    --color-primary: #000000;
    --color-primary-light: #1a1a1a;
    --color-primary-dark: #000000;
    
    --color-secondary: #e6d5b8;
    --color-secondary-light: #f5f5dc;
    --color-secondary-dark: #d4c4a0;
    
    --color-accent: #ffffff;
    --color-background: #f3f4f6;
    --color-background-light: #f9fafb;
    --color-background-dark: #e5e7eb;
    
    --color-link: #2563eb;
    --color-link-hover: #1d4ed8;
    
    --color-text: #000000;
    --color-text-light: #ffffff;
    --color-text-muted: #6b7280;
    
    --color-grey: #808080;
    --color-grey-light: #d1d5db;
    --color-grey-dark: #4b5563;
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

.animate-slideUp {
    animation: slideUp 0.4s ease-out;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
    background: #808080;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

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

.sr-only.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}