/* css/base.css */

/* Basic Reset & Global Styles */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #0f002b, #2a0050, #4a005a); /* Deep gradient background */
    color: #e0e0e0;
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-font-smoothing: antialiased; /* Smoother font rendering */
    -moz-osx-font-smoothing: grayscale;
}

/* Utility for rounded corners */
.rounded-lg { border-radius: 0.75rem; }
.rounded-xl { border-radius: 1rem; }
.rounded-2xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* General Button Styles */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 0.75rem 2rem; /* py-3 px-8 */
    font-weight: 600; /* font-semibold */
    text-decoration: none;
    border-radius: 9999px; /* rounded-full */
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-align: center; /* Ensure text is centered */
    cursor: pointer; /* Indicate it's clickable */
}

.btn-primary {
    background: linear-gradient(45deg, #3b82f6, #2563eb); /* blue-600 to blue-700 gradient */
    color: #fff;
    font-size: 1.25rem; /* text-xl */
    padding: 1rem 2.5rem; /* py-4 px-10 */
    border: none; /* Remove default border */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Stronger shadow */
}

.btn-primary:hover {
    background: linear-gradient(45deg, #2563eb, #1d4ed8); /* Darker blue gradient on hover */
    transform: translateY(-3px) scale(1.02); /* Lift and slightly scale */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5); /* Even stronger shadow */
}

.btn-secondary {
    background: linear-gradient(45deg, #555, #333); /* Dark gray gradient */
    color: #fff;
    font-size: 1.125rem; /* text-lg */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle light border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(45deg, #777, #555); /* Lighter gray gradient on hover */
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    border-color: #93c5fd; /* Light blue border on hover */
}

/* Highlight text */
.highlight {
    color: #60a5fa; /* blue-400 */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    body {
        font-size: 0.95rem;
    }
    .btn-primary {
        font-size: 1.1rem;
        padding: 0.8rem 2rem;
    }
    .btn-secondary {
        font-size: 1rem;
        padding: 0.6rem 1.5rem;
    }
}