:root {
    --bg-primary: #F0F8FF;
    --bg-secondary: #FFFFFF;
    --text-primary: #333333;
    --text-secondary: #666666;
    --accent: #87CEEB;
    --border-color: #87CEEB;
    --active-bg: var(--accent);
    --text-active: #FFFFFF;
    --icon-active: #FFFFFF;
    --shadow-color: rgba(135, 206, 235, 0.3);
}
body.light-mode {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}
body.light-mode .feather-icon {
    color: #4a5568;
}
body.light-mode .login-container {
    background-color: var(--bg-secondary);
    box-shadow: 0 0 10px var(--shadow-color);
}
body.light-mode .form-control {
    background-color: #F5F5F5;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
body.light-mode .login-button {
    background-color: var(--accent);
    color: var(--bg-secondary);
}
/* Better icon contrast for primary buttons in light mode */
body.light-mode .btn-primary .feather-icon {
    stroke: #FFFFFF;
}