/* Base styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a;
    color: #ffffff;
}

/* Login-specific gradients and cards */
.gradient-bg {
    background: linear-gradient(135deg, #8a2be2 0%, #4b0082 100%);
}

.card-shadow {
    background-color: #1a1a1a;
    border: 1px solid #2d2d2d;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}

/* Auth button styling */
.auth-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s;
    gap: 0.75rem;
}

.auth-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Loading spinner for auth */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* Input fields */
input {
  background: rgba(55, 65, 81, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.5);
  transition: all 0.2s ease;
}

input:focus {
  background: rgba(55, 65, 81, 1);
  border-color: rgb(168, 85, 247);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

/* Button hover states */
button:hover {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}