@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

:root {
    --color-primary: #FFC0CB;
    --color-secondary: #FFB6C1;
    --color-accent: #FF69B4;
    --color-background: #FFF0F5;
    --color-text: #333333;
}

body {
    font-family: 'Arial', sans-serif;
    color: var(--color-text);
    background-color: var(--color-background);
}

.unclickable-link {
    color: inherit;
    text-decoration: none;
    cursor: text;
    pointer-events: none;
}

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

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

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

.animate-slideIn {
    animation: slideIn 0.5s ease-out;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}