/* Satoshi Font Face Declarations */
@font-face {
    font-family: 'Satoshi';
    font-style: normal;
    font-weight: 400;
    src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Satoshi';
    font-style: normal;
    font-weight: 300;
    src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Light.woff') format('woff');
}

@font-face {
    font-family: 'Satoshi';
    font-style: normal;
    font-weight: 500;
    src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Satoshi';
    font-style: normal;
    font-weight: 700;
    src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Bold.woff') format('woff');
}

/* Verdana Font Face Declaration */
@font-face {
    font-family: 'Verdana';
    font-style: normal;
    font-weight: 400;
    src: local('Verdana'), url('https://fonts.cdnfonts.com/s/26084/VERDANAI.woff') format('woff');
}

/* Set default font family for the entire application */
html {
    font-family: 'Satoshi', system-ui, sans-serif;
}

body {
    @apply antialiased min-h-screen;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light theme defaults */
:root {
    background-color: #F6FCFE;
    color: #1f2937;
}

/* Dark theme defaults */
.dark {
    background-color: #000000;
    color: #f3f4f6;
}

h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
}

/* Focus styles */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
    @apply outline-none ring-2 ring-[#F6FCFE] ring-opacity-50;
}

.dark a:focus, .dark button:focus, .dark input:focus, .dark textarea:focus, .dark select:focus {
    @apply ring-[#016E84];
}

/* Button styles */
.btn-primary {
    @apply px-4 py-2 bg-[#016E84] text-white rounded-lg hover:bg-[#015A6E] 
        transition-all duration-300 focus:ring-2 focus:ring-[#F6FCFE] focus:ring-opacity-50;
}

.dark .btn-primary {
    @apply bg-[#016E84] text-white focus:ring-2 focus:ring-[#F6FCFE] focus:ring-opacity-50;
}

.btn-secondary {
    @apply px-4 py-2 border border-[#F6FCFE] rounded-lg hover:bg-[#F6FCFE]/20 
        transition-all duration-300 focus:ring-2 focus:ring-[#F6FCFE] focus:ring-opacity-50;
}

.dark .btn-secondary {
    @apply border-[#016E84]/20 hover:bg-[#016E84]/10 focus:ring-[#016E84];
}

.card {
    @apply bg-white rounded-xl shadow-md p-6 transition-all duration-300;
}

.dark .card {
    @apply bg-black shadow-xl;
}

/* Navbar specific styles - enhanced with gradient underline animation */
.nav-link {
    position: relative;
    @apply text-gray-700 dark:text-gray-200 hover:text-primary-DEFAULT dark:hover:text-white;
    transition: color 0.2s ease;
    font-weight: 400; /* Regular weight */
}

.nav-link.active {
    @apply text-primary-DEFAULT dark:text-white;
    font-weight: 600; /* Semi-bold for active */
}

.nav-link i {
    font-weight: 400 !important; /* Force regular weight for icons */
}

/* Enhanced gradient underline animation */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 10%,
    #FF8C00 50%,
    transparent 90%,
    transparent 100%
    );
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0.5px;
}

.nav-link:hover::after {
    width: 100%;
    animation: shimmer 2s infinite;
}

.dark .nav-link::after {
    background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 10%,
    #FFFFFF 50%,
    transparent 90%,
    transparent 100%
    );
}

/* Shimmer animation for the underline */
@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

/* Enhanced active state underline */
.nav-link.active::after {
    width: 100%;
    background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 10%,
    #FF8C00 50%,
    transparent 90%,
    transparent 100%
    );
    animation: pulse-glow 2s ease-in-out infinite alternate;
}

.dark .nav-link.active::after {
    background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 10%,
    #FFFFFF 50%,
    transparent 90%,
    transparent 100%
    );
}

/* Pulse glow animation for active state */
@keyframes pulse-glow {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

.dark .nav-link.active::after {
    animation: pulse-glow-dark 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow-dark {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background-color: #f3f4f6;
}

.dark ::-webkit-scrollbar-track {
    background-color: #1f2937;
}

::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}

/* Footer social link styles */
.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.footer-social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}