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

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Hind Siliguri', 'Noto Sans Arabic', sans-serif;
    background-color: var(--color-beige, #FDF8F0);
    color: var(--color-body-text, #1A1A1A);
}

.product-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.product-color:hover,
.product-color.active {
    border-color: var(--color-primary, #1A2A3A);
    transform: scale(1.1);
}