/* MehndiMuse Design System - Henna-inspired color palette */

:root {
    /* Base colors - warm cream background */
    --background: 30 40% 98%;
    --foreground: 20 25% 15%;
    /* Card and surface colors */
    --card: 30 50% 96%;
    --card-foreground: 20 25% 15%;
    --popover: 30 50% 96%;
    --popover-foreground: 20 25% 15%;
    /* Primary - Rich terracotta/henna orange */
    --primary: 15 75% 45%;
    --primary-foreground: 30 40% 98%;
    --primary-glow: 15 85% 55%;
    /* Secondary - Deep burnt orange */
    --secondary: 20 65% 35%;
    --secondary-foreground: 30 40% 98%;
    /* Muted - Soft cream tones */
    --muted: 30 35% 90%;
    --muted-foreground: 20 15% 45%;
    /* Accent - Golden henna */
    --accent: 40 80% 60%;
    --accent-foreground: 20 25% 15%;
    /* Destructive - Kept standard */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 30 40% 98%;
    /* Borders and inputs - warm tones */
    --border: 25 25% 85%;
    --input: 25 25% 85%;
    --ring: 15 75% 45%;
    --radius: 0.75rem;
    /* Custom gradients for henna-inspired design */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
    --gradient-secondary: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--primary)));
    --gradient-accent: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary-glow)));
    --gradient-hero: linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted)));
    /* Elegant shadows with henna tones */
    --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.2);
    /*--shadow-glow: 0 0 40px hsl(var(--primary-glow) / 0.3);*/
    --shadow-glow: inset 0 0 200px 50px hsl(15 85% 55% / 0.3);
    --shadow-soft: 0 4px 20px -4px hsl(var(--primary) / 0.1);
    /* Smooth transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.dark {
    /* Dark mode - Rich dark henna tones */
    --background: 20 25% 8%;
    --foreground: 30 40% 95%;
    --card: 20 25% 10%;
    --card-foreground: 30 40% 95%;
    --popover: 20 25% 10%;
    --popover-foreground: 30 40% 95%;
    --primary: 15 85% 55%;
    --primary-foreground: 20 25% 8%;
    --primary-glow: 15 95% 65%;
    --secondary: 20 45% 25%;
    --secondary-foreground: 30 40% 95%;
    --muted: 20 20% 15%;
    --muted-foreground: 30 20% 65%;
    --accent: 40 90% 70%;
    --accent-foreground: 20 25% 8%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 30 40% 95%;
    --border: 20 20% 20%;
    --input: 20 20% 20%;
    --ring: 15 85% 55%;
}

/* Configure Tailwind CSS variables */
.bg-background {
    background-color: hsl(var(--background));
}

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

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

.bg-card-foreground {
    background-color: hsl(var(--card-foreground));
}

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

.bg-popover-foreground {
    background-color: hsl(var(--popover-foreground));
}

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

.bg-primary-foreground {
    background-color: hsl(var(--primary-foreground));
}

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

.bg-secondary-foreground {
    background-color: hsl(var(--secondary-foreground));
}

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

.bg-muted-foreground {
    background-color: hsl(var(--muted-foreground));
}

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

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

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

.bg-destructive-foreground {
    background-color: hsl(var(--destructive-foreground));
}

.text-background {
    color: hsl(var(--background));
}

.text-foreground {
    color: hsl(var(--foreground));
}

.text-card {
    color: hsl(var(--card));
}

.text-card-foreground {
    color: hsl(var(--card-foreground));
}

.text-popover {
    color: hsl(var(--popover));
}

.text-popover-foreground {
    color: hsl(var(--popover-foreground));
}

.text-primary {
    color: hsl(var(--primary));
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.text-secondary {
    color: hsl(var(--secondary));
}

.text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
}

.text-muted {
    color: hsl(var(--muted));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

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

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

.text-destructive {
    color: hsl(var(--destructive));
}

.text-destructive-foreground {
    color: hsl(var(--destructive-foreground));
}

.border-background {
    border-color: hsl(var(--background));
}

.border-foreground {
    border-color: hsl(var(--foreground));
}

.border-card {
    border-color: hsl(var(--card));
}

.border-card-foreground {
    border-color: hsl(var(--card-foreground));
}

.border-popover {
    border-color: hsl(var(--popover));
}

.border-popover-foreground {
    border-color: hsl(var(--popover-foreground));
}

.border-primary {
    border-color: hsl(var(--primary));
}

.border-primary-foreground {
    border-color: hsl(var(--primary-foreground));
}

.border-secondary {
    border-color: hsl(var(--secondary));
}

.border-secondary-foreground {
    border-color: hsl(var(--secondary-foreground));
}

.border-muted {
    border-color: hsl(var(--muted));
}

.border-muted-foreground {
    border-color: hsl(var(--muted-foreground));
}

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

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

.border-destructive {
    border-color: hsl(var(--destructive));
}

.border-destructive-foreground {
    border-color: hsl(var(--destructive-foreground));
}

.border-input {
    border-color: hsl(var(--input));
}

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

/* Gradient backgrounds */
.bg-gradient-primary {
    background: var(--gradient-primary);
}

.bg-gradient-secondary {
    background: var(--gradient-secondary);
}

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

.bg-gradient-hero {
    background: var(--gradient-hero);
}

/* Shadows */
.shadow-elegant {
    box-shadow: var(--shadow-elegant);
}

.shadow-glow {
    box-shadow: var(--shadow-glow);
}

.shadow-soft {
    box-shadow: var(--shadow-soft);
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease-out;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Custom utility classes */
.henna-glow {
    transition: all 0.3s ease;
}

    .henna-glow:hover {
        box-shadow: 0 0 30px hsl(var(--primary-glow) / 0.3);
    }

.elegant-hover {
    transition: all 0.3s ease;
}

    .elegant-hover:hover {
        transform: scale(1.05);
        box-shadow: var(--shadow-elegant);
    }

.service-card-hover {
    transition: all 0.5s ease;
}

    .service-card-hover:hover {
        background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted) / 0.5));
    }

/* Portfolio filter active state */
.portfolio-filter.active {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
}

/* Responsive font sizing */
@media (max-width: 768px) {
    .text-4xl {
        font-size: 2rem;
    }

    .text-6xl {
        font-size: 3rem;
    }

    .text-3xl {
        font-size: 1.5rem;
    }

    .text-5xl {
        font-size: 2.5rem;
    }
}