@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --color-primary: #5D4037; /* Dark brown - للعناصر الرئيسية */
        --color-primary-light: #8D6E63; /* Medium brown */
        --color-primary-lighter: #BCAAA4; /* Light brown */
        --color-secondary: #FF6B35; /* Orange-red - للعناصر المميزة */
        --color-secondary-light: #FF8A65; /* Light orange-red */
        --color-accent: #E8D5C4; /* Sandy beige - للخلفيات */
        --color-accent-light: #F5E6D3; /* Light beige */
        --color-success: #76c791;
    }
}

@layer components {
    /* Notification Popup Animation - Center */
    #notification-popup {
        animation: fadeInScale 0.3s ease-out;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
