:root {
    --background-color: #f4f7fc;
    --card-background-color: #fff;
    --text-color: #333;
    --header-background-color: #fff;
    --header-text-color: #333;
    --button-background-color: #42a5f5; /* Lighter blue for light mode */
    --button-text-color: #fff;
}

[data-theme="dark"] {
    --background-color: #121212;
    --card-background-color: #1e1e1e;
    --text-color: #fff;
    --header-background-color: #1e1e1e;
    --header-text-color: #fff;
    --button-background-color: #1976d2; /* Current light mode blue for dark mode */
    --button-text-color: #fff;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.app-header {
    background-color: var(--header-background-color);
    color: var(--header-text-color);
}

.card {
    background-color: var(--card-background-color);
}

.btn {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
}

[data-theme="dark"] input:disabled {
    background-color: #424242;
    color: #bdbdbd;
    opacity: 1; /* Ensure the text is not faded */
}

[data-theme="dark"] .back-arrow {
    color: #fff;
}

[data-theme="dark"] a {
    color: #90caf9; /* A lighter blue for better contrast */
}