/* Define CSS variables at the start for easy customization */
:root {
    /* Background and Container */
    --background-color: #ffffff;
    --form-background: #ffffff;
    --form-width: 320px;
    --form-padding: 20px;
    --form-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    --form-margin: 10% auto;

    /* Inputs */
    --input-border-color: #5f5156;
    --input-padding: 10px;
    --input-border-radius: 5px;
    --input-background: #ffffff;
    --input-text-color: #333;

    /* Logo */
    --logo-width: auto;
    --logo-height: 84px;

    /* Button */
    --button-background-color: #5f5156;
    --button-text-color: #ffffff;
    --button-border-radius: 5px;
    --button-padding: 10px 20px;
    --button-border-color: #5f5156;

    /* Links */
    --link-color: #5f5156;
    --link-hover-color: #5f5156;

    /* Error Messages */
    --error-background-color: #ffebe8;
    --error-border-color: #c00;
    --error-text-color: #c00;

    /* Label */
    --label-text-color: #5f5156;
}

/* Full customization of the login page */

/* Customize the login page background */
body.login {
    background-color: var(--background-color);
}

/* Customize the login form container */
body.login #login {
    width: var(--form-width);
    padding: var(--form-padding);
    box-shadow: var(--form-shadow);
    margin: var(--form-margin);
    background: var(--form-background);
    border-radius: 10px;
}

/* Customize the login form input fields */
body.login #loginform input {
    border: 1px solid var(--input-border-color);
    padding: var(--input-padding);
    border-radius: var(--input-border-radius);
    background: var(--input-background);
    color: var(--input-text-color);
}

/* Customize input field focus state */
body.login #loginform input:focus {
    border-color: var(--button-background-color);
    box-shadow: 0 0 5px var(--button-background-color);
}

/* Customize the login form labels */
body.login #loginform label {
    color: var(--label-text-color);
    font-weight: bold;
}

/* Customize the login button with higher specificity */
body.login #login #loginform #wp-submit {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border: 1px solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    padding: var(--button-padding);
    cursor: pointer;
    transition: background-color 0.3s ease, filter 0.3s ease;
}

/* Hover state for login button with brightness adjustment */
body.login #login #loginform #wp-submit:hover {
    filter: brightness(1.2); /* Make the button 20% lighter on hover */
}


/* Customize the "Remember Me" checkbox */
body.login #loginform .forgetmenot label {
    color: var(--label-text-color);
}

/* Customize error messages */
body.login .message,
body.login .success,
body.login .error {
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* Success messages */
body.login .message {
    background-color: #e5f5e0;
    border: 1px solid #34a853;
    color: #34a853;
}

/* Error messages */
body.login .error {
    background-color: var(--error-background-color);
    border: 1px solid var(--error-border-color);
    color: var(--error-text-color);
}

/* Customize links (e.g., "Lost your password?", "Back to blog") */
body.login #nav a,
body.login #backtoblog a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover state for links */
body.login #nav a:hover,
body.login #backtoblog a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Customize "Lost your password?" link */
body.login #nav {
    margin-top: 15px;
}

/* Customize the "Back to blog" link */
body.login #backtoblog {
    margin-top: 15px;
}