/* Light Theme Styles for Authentication Pages (Login/Register) */
:root.light-theme {
    --primary: #8C52FF;
    --primary-dark: #6C3FE8;
    --secondary: #4E6AFF;
    --accent: #FF3C78;
    --dark: #f8f9fa;
    --light: #212529;
    --gray: #6c757d;
    --success: #00C896;
    --gradient-bg: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

.light-theme body,
.light-theme html {
    color: var(--light);
    background-color: var(--dark);
}

/* Background overlay for light theme */
.light-theme .overlay {
    background: linear-gradient(to bottom, rgba(248, 249, 250, 0.8), rgba(248, 249, 250, 0.95));
}

/* Logo and branding - keep gradient for visibility */
.light-theme .brand-name {
    background: var(--gradient-bg);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--text-shadow);
}

.light-theme .tagline {
    color: var(--light);
}

/* Login/Register card */
.light-theme .login-card,
.light-theme .register-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--light);
}

/* Headers */
.light-theme .login-title,
.light-theme .register-title {
    background: var(--gradient-bg);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--text-shadow);
}

.light-theme .login-subtitle,
.light-theme .register-subtitle {
    color: var(--light);
}

/* Form elements */
.light-theme .form-label {
    color: var(--light);
}

.light-theme .form-control {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--light);
}

.light-theme .form-control:focus {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(140, 82, 255, 0.2);
    color: var(--light);
}

.light-theme .form-control::placeholder {
    color: var(--gray);
}

/* Input icons */
.light-theme .input-icon {
    color: var(--gray);
}

/* Buttons */
.light-theme .btn-primary {
    background: var(--gradient-bg);
    border: none;
    color: white;
    box-shadow: 0 5px 15px rgba(140, 82, 255, 0.3);
}

.light-theme .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(140, 82, 255, 0.5);
    color: white;
}

/* Alerts */
.light-theme .alert-danger {
    background-color: rgba(255, 60, 120, 0.1);
    border-color: var(--accent);
    color: #842029;
}

/* Links */
.light-theme .action-link {
    color: var(--primary);
}

.light-theme .action-link:hover {
    color: var(--accent);
}

/* Vinyl record animation - keep original colors for visibility */
.light-theme .vinyl-record {
    background: #2a2a2a;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6),
                inset 0 0 40px rgba(0, 0, 0, 0.5),
                0 0 8px rgba(140, 82, 255, 0.9);
}

.light-theme .vinyl-record::before {
    background: repeating-radial-gradient(
        circle at center,
        rgba(60, 60, 60, 0.8) 0px,
        rgba(80, 80, 80, 0.8) 1px,
        rgba(70, 70, 70, 0.8) 2px,
        rgba(80, 80, 80, 0.8) 3px,
        rgba(60, 60, 60, 0.8) 4px
    );
}

.light-theme .vinyl-record::after {
    background: radial-gradient(
        circle at center,
        var(--primary) 0%,
        var(--secondary) 70%
    );
}

.light-theme .vinyl-hole {
    background: #000;
}

.light-theme .vinyl-reflection {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.15) 30%, 
        transparent 60%
    );
}

/* Form footer */
.light-theme .form-footer {
    color: var(--light);
}

/* Form actions links */
.light-theme .form-actions-links {
    color: var(--light);
}

/* Error list styling */
.light-theme .alert-danger ul {
    color: #842029;
}

.light-theme .alert-danger li {
    color: #842029;
}

/* Success messages */
.light-theme .alert-success {
    background-color: rgba(0, 200, 150, 0.1);
    border-color: var(--success);
    color: #0f5132;
}

/* Info messages */
.light-theme .alert-info {
    background-color: rgba(3, 169, 244, 0.1);
    border-color: var(--info);
    color: #0c63e4;
}

/* Warning messages */
.light-theme .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: var(--warning);
    color: #664d03;
}

/* Container adjustments */
.light-theme .login-container,
.light-theme .register-container {
    color: var(--light);
}

/* Page container */
.light-theme .login-page-container,
.light-theme .register-page-container {
    color: var(--light);
}

/* Logo container */
.light-theme .logo-container {
    color: var(--light);
}

/* Logo title wrapper */
.light-theme .logo-title-wrapper {
    color: var(--light);
}

/* Input group styling */
.light-theme .input-group {
    color: var(--light);
}

/* Form group styling */
.light-theme .form-group {
    color: var(--light);
}

/* Header styling */
.light-theme .login-header,
.light-theme .register-header {
    color: var(--light);
}

/* Text elements */
.light-theme p {
    color: var(--light);
}

.light-theme span {
    color: var(--light);
}

.light-theme div {
    color: inherit;
}

/* Strong text */
.light-theme strong {
    color: var(--light);
}

/* Small text */
.light-theme small {
    color: var(--gray);
}

/* List items */
.light-theme li {
    color: inherit;
}

.light-theme ul {
    color: inherit;
}

/* Ensure all text is visible */
.light-theme * {
    color: inherit;
}

/* Override any remaining dark text */
.light-theme .login-card *,
.light-theme .register-card * {
    color: inherit;
}

/* Make sure form elements inherit proper colors */
.light-theme .login-card .form-label,
.light-theme .register-card .form-label {
    color: var(--light);
}

.light-theme .login-card .form-control,
.light-theme .register-card .form-control {
    color: var(--light);
}

.light-theme .login-card .alert,
.light-theme .register-card .alert {
    color: inherit;
}