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

:root {
    --primary-color: #4f46e5;
    /* Indigo-600 */
    --secondary-color: #10b981;
    /* Emerald-500 */
    --background-color: #f3f4f6;
    /* Gray-100 */
    --card-background: #ffffff;
    --text-color: #1f2937;
    /* Gray-800 */
    --subtle-text-color: #6b7280;
    /* Gray-500 */
}


html,
body {
    overflow-x: hidden;
    width: 100%;
}


body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*
 * Modified the animation to only use 'opacity'.
 * The 'transform' property was causing 'position: fixed' elements (like modals)
 * to be positioned relative to the body instead of the viewport, which created
 * positioning issues on scrolled pages. This change fixes the modal centering
 * while keeping a global fade-in effect.
*/
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}