:root {
    --dark-primary: #0d1321;
    --dark-secondary: #1d2d44;
    --blue-muted: #3e5c76;
    --blue-light: #748cab;
    --cream: #f0ebd8;
}


body {
    background: linear-gradient(135deg, var(--dark-primary), var(--dark-secondary));
    color: var(--cream);
    font-family: 'Roboto', sans-serif;
}


.login-card {
    width: 400px;
    border-radius: 15px;
    background-color: var(--cream);
    color: var(--dark-primary);
}


.login-card h3 {
    font-weight: bold;
}


.form-control {
    border-radius: 10px;
    border: 1px solid var(--blue-muted);
}


.btn-primary {
    background-color: var(--blue-muted);
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: var(--blue-light);
}


a {
    color: var(--blue-muted);
    text-decoration: none;
}

a:hover {
    color: var(--blue-light);
}

.navbar {
    background-color: var(--dark-primary);
    border-bottom: 2px solid var(--blue-muted);
    box-shadow: var(--shadow);
    padding: 1rem 0;
}

.navbar .nav-link {
    color: var(--cream);
    font-weight: 500;
    margin: 0 1rem;
    position: relative;
    transition: all 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--blue-light);
}

.navbar-brand {
    color: var(--cream);
    font-weight: 700;
    font-size: 1.4rem;  /* Changed from 1.5rem to match login */
    letter-spacing: 0.5px;
    margin-left: 1rem;
    transition: all 0.3s ease;
}

.navbar-brand:hover {
    color: var(--blue-light);
    transform: scale(1.02);
}