/* Custom CSS for NameGenerators.in - Premium Stylesheet */

body {
    font-family: 'Outfit', sans-serif;
    color: #2D3748;
    background-color: #F7FAFC;
    overflow-x: hidden;
}

pre, code {
    font-family: 'JetBrains Mono', monospace;
}

/* Typography styles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Header & Navbar Customizations */
.navbar {
    transition: all 0.3s ease;
}

.navbar-brand {
    letter-spacing: -0.03em;
}

.nav-link {
    transition: color 0.2s ease;
}

.nav-link.active {
    color: #0d6efd !important;
}

.hover-light:hover {
    color: #f8f9fa !important;
}

/* Custom Cards */
.card-premium {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    background-color: #ffffff;
}

.card-premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

/* Hero Section */
.hero-gradient {
    background: radial-gradient(circle at 100% 100%, #f1f5fe 0%, #ffffff 100%);
    padding: 6rem 0;
}

/* Rating stars animations */
.rating-star-btn {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}

.rating-star-btn:hover {
    transform: scale(1.25);
}

/* Copy to Clipboard Notification bubble */
#copy-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1060;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Score Indicators */
.score-indicator {
    height: 6px;
    border-radius: 3px;
    background-color: #E2E8F0;
    overflow: hidden;
}

.score-fill {
    height: 100%;
    background-color: #48BB78;
    transition: width 0.6s ease;
}

.score-fill.warning {
    background-color: #ED8936;
}

.score-fill.danger {
    background-color: #E53E3E;
}

/* General Layout helpers */
.tracking-tight {
    letter-spacing: -0.03em;
}

.tracking-wide {
    letter-spacing: 0.05em;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .hero-gradient {
        padding: 4rem 0;
    }
}