:root {
    --background-color: #e0f7fa; /* Light teal background */
    --container-background: white;
    --text-color: #333; /* Dark gray */
    --input-background: white;
    --input-border-color: #004d40; /* Dark teal border */
    --input-focus-border-color: #00796b; /* Medium teal */
    --unit-background: white;
    --unit-hover-background: #f0f0f0; /* Light gray */
    --unit-header-background: #00796b; /* Medium teal */
    --unit-header-hover-background: #004d40; /* Dark teal */
    --category-background: #e0f2f1; /* Light teal */
    --category-hover-background: #b2dfdb; /* Lighter teal */
    --file-header-background: #e0f2f1; /* Light teal */
    --file-header-hover-background: #b2dfdb; /* Lighter teal */
    --file-name-color: #004d40; /* Dark teal */
    --progress-bar-fill: #00796b; /* Medium teal */
    --select-background: white;
    --select-border-color: #004d40; /* Dark teal border */
    --select-focus-border-color: #00796b; /* Medium teal */
}

body.light-blue {
    --background-color: #e3f2fd; /* Light blue background */
    --container-background: white;
    --text-color: #333; /* Dark gray */
    --input-background: white;
    --input-border-color: #1e88e5; /* Blue border */
    --input-focus-border-color: #1565c0; /* Dark blue */
    --unit-background: white;
    --unit-hover-background: #f0f0f0; /* Light gray */
    --unit-header-background: #1e88e5; /* Blue */
    --unit-header-hover-background: #1565c0; /* Dark blue */
    --category-background: #e3f2fd; /* Light blue */
    --category-hover-background: #bbdefb; /* Lighter blue */
    --file-header-background: #e3f2fd; /* Light blue */
    --file-header-hover-background: #bbdefb; /* Lighter blue */
    --file-name-color: #1e88e5; /* Blue */
    --progress-bar-fill: #1e88e5; /* Blue */
    --select-background: white;
    --select-border-color: #1e88e5; /* Blue border */
    --select-focus-border-color: #1565c0; /* Dark blue */
}

body.dark {
    --background-color: #121212; /* Dark background */
    --container-background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    --text-color: #ffffff; /* White text */
    --input-background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    --input-border-color: #ccc; /* Light gray border */
    --input-focus-border-color: #007bff; /* Blue border */
    --unit-background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    --unit-hover-background: rgba(255, 255, 255, 0.2); /* Slightly darker */
    --unit-header-background: rgba(0, 123, 255, 0.8); /* Blue */
    --unit-header-hover-background: rgba(0, 86, 179, 0.8); /* Darker blue */
    --category-background: rgba(240, 240, 240, 0.1); /* Light gray */
    --category-hover-background: rgba(224, 224, 224, 0.1); /* Slightly darker gray */
    --file-header-background: rgba(240, 240, 240, 0.1); /* Light gray */
    --file-header-hover-background: rgba(224, 224, 224, 0.1); /* Slightly darker gray */
    --file-name-color: #ffffff; /* White */
    --progress-bar-fill: #007bff; /* Blue */
    --select-background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    --select-border-color: #ccc; /* Light gray border */
    --select-focus-border-color: #007bff; /* Blue border */
}