/* assets/css/styles.css - MERGED VERSION */
:root {
    --cambridge-blue: #7B9E87;
    --snow: #FCF7F8;
    --flame: #E4572E;
    --mikado-yellow: #FFC914;
    --pine-green: #034748;
}

/* Apply to all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--snow) !important;
    color: var(--pine-green) !important;
    scroll-behavior: smooth;
    line-height: 1.6;
}




/* ========== NAVIGATION ========== */
.nav-link {
    position: relative !important;
    text-decoration: none !important;
}

.nav-link::after {
    content: '' !important;
    position: absolute !important;
    width: 0 !important;
    height: 2px !important;
    bottom: -4px !important;
    left: 0 !important;
    background-color: var(--mikado-yellow) !important;
    transition: width 0.3s ease !important;
}

.nav-link:hover::after {
    width: 100% !important;
}

.active::after {
    width: 100% !important;
}

/* ========== OPACITY UTILITIES ========== */
.opacity-90 { opacity: 0.9 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-10 { opacity: 0.1 !important; }
.opacity-5 { opacity: 0.05 !important; }

/* ========== BACKGROUND OPACITY CLASSES ========== */
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9) !important; }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05) !important; }

.border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2) !important; }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3) !important; }

.border-yellow\/30 { border-color: rgba(255, 201, 20, 0.3) !important; }
.border-flame\/30 { border-color: rgba(228, 87, 46, 0.3) !important; }

.text-snow\/70 { color: rgba(252, 247, 248, 0.7) !important; }
.text-snow\/50 { color: rgba(252, 247, 248, 0.5) !important; }

.bg-flame\/10 { background-color: rgba(228, 87, 46, 0.1) !important; }
.bg-flame\/20 { background-color: rgba(228, 87, 46, 0.2) !important; }
.bg-yellow\/10 { background-color: rgba(255, 201, 20, 0.1) !important; }
.bg-yellow\/20 { background-color: rgba(255, 201, 20, 0.2) !important; }
.bg-cambridge\/10 { background-color: rgba(123, 158, 135, 0.1) !important; }
.bg-cambridge\/20 { background-color: rgba(123, 158, 135, 0.2) !important; }
.bg-pine\/10 { background-color: rgba(3, 71, 72, 0.1) !important; }
.bg-pine\/20 { background-color: rgba(3, 71, 72, 0.2) !important; }

/* ========== EFFECTS ========== */
.blur-3xl { filter: blur(64px) !important; }
.blur-xl { filter: blur(24px) !important; }
.blur-sm { filter: blur(8px) !important; }

.backdrop-blur-md { backdrop-filter: blur(12px) !important; }
.backdrop-blur-sm { backdrop-filter: blur(4px) !important; }

/* ========== CUSTOM DIMENSIONS ========== */
.w-8.h-8.bg-flame,
.w-6.h-6.bg-flame {
    background-color: var(--flame) !important;
}

.w-14.h-14.bg-pine,
.w-14.h-14.bg-flame,
.w-14.h-14.bg-yellow {
    background-color: inherit !important;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu {
    animation: slideDown 0.3s ease;
}

/* ========== LAYOUT UTILITIES ========== */
.gap-2 { gap: 0.5rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }
.gap-12 { gap: 3rem !important; }
.gap-20 { gap: 5rem !important; }

.aspect-video { aspect-ratio: 16/9 !important; }
.aspect-square { aspect-ratio: 1/1 !important; }

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

h1 { font-size: 3.5rem !important; }
h2 { font-size: 2.5rem !important; }
h3 { font-size: 1.875rem !important; }
h4 { font-size: 1.5rem !important; }

@media (max-width: 768px) {
    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 2rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--snow);
}

::-webkit-scrollbar-thumb {
    background: var(--cambridge-blue);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pine-green);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--cambridge-blue) var(--snow);
}