/* Dark Mode Support & UI Enhancements */

/* Add soft gradient to the background instead of plain white */
body {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
    min-height: 100vh;
}

/* Enhancing typography slightly */
h1, h2, h3, .logo {
    letter-spacing: -0.03em !important;
}

/* Card Improvements - softer shadows, better borders, smoother hover */
.home-explore-card,
.app-card,
.home-service-item,
.home-app-card,
.store-card,
.testimonial-card,
.trust-badge,
.inquiry-form,
.path-card--light {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.home-explore-card:hover,
.app-card:hover,
.home-service-item:hover,
.home-app-card:hover,
.store-card:hover,
.testimonial-card:hover,
.trust-badge:hover,
.path-card--light:hover {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

/* Button Improvements */
.btn {
    border-radius: 999px !important; /* Pill shape for buttons */
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.btn-primary {
    background: linear-gradient(135deg, #1d1d1f 0%, #434347 100%) !important;
    box-shadow: 0 4px 12px rgba(29, 29, 31, 0.15);
}

.btn-primary:hover {
    box-shadow: 0 8px 24px rgba(29, 29, 31, 0.25) !important;
    transform: translateY(-2px) scale(1.02);
}

.btn-secondary {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.btn-secondary:hover {
    background-color: #fcfcfd !important;
    border-color: rgba(0,0,0,0.2);
}

/* Dark Section Enhancements */
.home-book-card,
.path-card--dark {
    background: linear-gradient(135deg, #111112 0%, #252528 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Navigation Hover States */
.nav-links a::after {
    height: 2px !important;
    border-radius: 2px;
}

.lang-toggle {
    border: 1px solid rgba(0,0,0,0.05);
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.lang-toggle:hover {
    background-color: #f5f5f7 !important;
}

/* Text Selection */
::selection {
    background: rgba(0, 125, 250, 0.2);
    color: #1d1d1f;
}

/* Form focus states */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    box-shadow: 0 0 0 4px rgba(0, 125, 250, 0.1) !important;
    border-color: #007dfa !important;
}