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

@layer utilities {
    .nav__link {
        @apply relative text-base font-medium w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-pink-600 after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-right;
    }
}

/* Global theme transition */
.transition-theme {
    transition: background-color 0.7s ease, color 0.7s ease;
}

/* Light mode */
/* Light mode */
[data-theme="light"] {
    --primary-bg: #FAFAFA;       /* Soft off-white background */
    --secondary-bg: #F5F5F7;      /* Gentle off-white for subtle separation */
    --primary-text: #2E2E2E;      /* Dark grey text for clear readability */
    --secondary-text: #595959;    /* Medium grey for less prominent text */
    --nav-bg: #F8F8F8;            /* Light grey navigation background */
    --footer-bg: #E0E0E0;         /* Slightly darker grey for footer contrast */
}

/* Dark mode */
[data-theme="dark"] {
    --primary-bg: #2C2C2C;       /* Modern dark grey background */
    --secondary-bg: #333333;      /* A touch lighter grey for section differentiation */
    --primary-text: #E0E0E0;      /* Light grey text for optimal readability */
    --secondary-text: #B0B0B0;    /* Medium grey for secondary text elements */
    --nav-bg: #272727;           /* Subtle variation for the navigation area */
    --footer-bg: #242424;        /* Deep grey footer to add visual depth */
}