/**
 * Tailwind CSS Custom Configuration
 * Custom colors, animations, and utility classes for Juan Denis Theme
 */

/* CSS Variables for Design System */
:root {
    --color-dark: #2C3930;
    --color-medium: #3F4F44;
    --color-accent: #A27B5C;
    --color-light: #DCD7C9;
}

/* Custom Keyframe Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 20px rgba(162, 123, 92, 0.3);
    }
    100% {
        box-shadow: 0 0 30px rgba(162, 123, 92, 0.6);
    }
}

/* Animation Utility Classes */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite alternate;
}

/* Background Color Utilities */
.bg-dark {
    background-color: var(--color-dark);
}

.bg-medium {
    background-color: var(--color-medium);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-light {
    background-color: var(--color-light);
}

/* Text Color Utilities */
.text-dark {
    color: var(--color-dark);
}

.text-medium {
    color: var(--color-medium);
}

.text-accent {
    color: var(--color-accent);
}

.text-light {
    color: var(--color-light);
}

/* Border Color Utilities */
.border-dark {
    border-color: var(--color-dark);
}

.border-medium {
    border-color: var(--color-medium);
}

.border-accent {
    border-color: var(--color-accent);
}

.border-light {
    border-color: var(--color-light);
}

/* Opacity Variants for Background Colors */
.bg-dark\/80 {
    background-color: rgba(44, 57, 48, 0.8);
}

.bg-dark\/10 {
    background-color: rgba(44, 57, 48, 0.1);
}

.bg-medium\/30 {
    background-color: rgba(63, 79, 68, 0.3);
}

.bg-medium\/10 {
    background-color: rgba(63, 79, 68, 0.1);
}

.bg-accent\/10 {
    background-color: rgba(162, 123, 92, 0.1);
}

.bg-accent\/90 {
    background-color: rgba(162, 123, 92, 0.9);
}

/* Opacity Variants for Text Colors */
.text-light\/80 {
    color: rgba(220, 215, 201, 0.8);
}

.text-dark\/80 {
    color: rgba(44, 57, 48, 0.8);
}

/* Border Opacity Variants */
.border-medium\/30 {
    border-color: rgba(63, 79, 68, 0.3);
}

.border-medium\/50 {
    border-color: rgba(63, 79, 68, 0.5);
}

/* Font Family Utilities */
.font-sans {
    font-family: 'Inter', system-ui, sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Additional Utility Classes for Design System */
.backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Hover State Utilities */
.hover\:bg-accent\/90:hover {
    background-color: rgba(162, 123, 92, 0.9);
}

.hover\:text-light:hover {
    color: var(--color-light);
}

/* Focus State Utilities */
.focus\:ring-accent:focus {
    --tw-ring-color: var(--color-accent);
}

/* Smooth Transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

/* Custom Shadows */
.shadow-glow {
    box-shadow: 0 0 20px rgba(162, 123, 92, 0.3);
}

.shadow-glow-lg {
    box-shadow: 0 0 30px rgba(162, 123, 92, 0.6);
}

/* Active Navigation Link Styling */
.active-nav-link {
    color: var(--color-light) !important;
}

.active-nav-link .absolute {
    width: 100% !important;
}

/* Mobile Menu Transitions */
#mobile-navigation {
    transition: all 0.3s ease-in-out;
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden;
}