@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    /* -- Light Mode Colors -- */
    --primary: #e3651d;
    --secondary: #750e21;
    --bg: #ffffff;
    --secondary-bg: #f3f4f6;
    --card: #f9fafb;
    --title: #e76209;
    --sub-title: #191919;
    --desc: #444444;
    --accent: #bed754;
    --neutral: #374151;
    --border-color: #ecedef;
    --gold: #f4c542;
    --teal: #0d9488;
    --royal-blue: #1e40af;
    --rose: #be123c;
    --violet: #7c3aed;
    --gradient-start: #e3651d;
    --gradient-end: #750e21;
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --button-color-x: rgba(0, 0, 0, 0.642);
}

[data-theme='dark'] {
    --primary: #ff7b33;
    --secondary: #af102e;
    --bg: #181818;
    --secondary-bg: #1f1f1f;
    --card: #131313;
    --title: #ff914d;
    --sub-title: #ffffff;
    --desc: #e5e5e5;
    --accent: #d4e157;
    --neutral: #d1d5db;
    --border-color: #3e3d3d;
    --gold: #ffd84d;
    --teal: #14b8a6;
    --royal-blue: #3b82f6;
    --rose: #f43f5e;
    --violet: #a855f7;
    --gradient-start: #ff7b33;
    --gradient-end: #af102e;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --button-color-x: rgba(255, 255, 255, 0.1);
}

/* @media (prefers-color-scheme: dark) ব্লকটি এখান থেকে মুছে ফেলা হয়েছে।
  কারণ আপনার base.html ফাইলের জাভাস্ক্রিপ্ট এটি ম্যানেজ করছে
  এবং tailwind.config.js এ darkMode: 'class' সেট করা আছে।
*/

body {
    background-color: var(--bg);
    color: var(--title);
    transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    font-family: 'Inter', sans-serif;
}

.container {
    width: 100%;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

.title {
    color: var(--title);
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
}

.subtitle {
    color: var(--sub-title);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.desc {
    color: var(--desc);
    font-family: 'Raleway', sans-serif;
}