/* themes.css */

/* Light Mode Variables */
:root {
    /* ... existing variables ... */
    --background-color: #ffffff;
    --text-color: #000000;
    --header-background: #f0f0f0;
    --control-background: #f0f0f0;
    --card-background: #ffffff;
    --border-color: #cccccc;
    --primary-color: #007BFF;
    --primary-color-hover: #0056b3;
    --slider-track-color: #ddd;
    --focus-box-shadow-color: rgba(0, 123, 255, 0.5);
    --box-shadow-color: rgba(0, 0, 0, 0.05);
    --box-shadow-hover-color: rgba(0, 0, 0, 0.15);
    --media-container-bg: #efefef;
    --text-muted-color: #777;
    --metrics-background: #f6f8fa;
    --metric-value-bg: #e9ecef;          /* Light gray background */
    --percent-change-bg: #d3d3d3;        /* Light gray background */
    --metric-text-color: #000000;        /* Black text */
    --percent-change-color: #000000;     /* Black text */
    --modal-overlay-background: rgba(0, 0, 0, 0.5);
    --close-button-color: #aaa;
    --close-button-hover-color: #000;
    --video-overlay-background: rgba(0, 0, 0, 0.8);
    --button-background-color: rgba(0, 0, 0, 0.6);
    --button-hover-background-color: rgba(0, 0, 0, 0.8);
    --microchip-button-bg: rgba(255, 255, 255, 0.8);
    --microchip-button-hover-bg: rgba(255, 255, 255, 1);
    /* Add more variables as needed */
}

/* Dark Mode Variables */
:root.dark-mode {
    /* ... existing variables ... */
    --background-color: #121212;
    --text-color: #ffffff;
    --header-background: #1f1f1f;
    --control-background: #2a2a2a;
    --card-background: #1e1e1e;
    --border-color: #444444;
    --primary-color: #BB86FC;
    --primary-color-hover: #3700B3;
    --slider-track-color: #555;
    --focus-box-shadow-color: rgba(187, 134, 252, 0.5);
    --box-shadow-color: rgba(0, 0, 0, 0.5);
    --box-shadow-hover-color: rgba(0, 0, 0, 0.7);
    --media-container-bg: #2a2a2a;
    --text-muted-color: #aaa;
    --metrics-background:#2a2a2a;
    --metric-value-bg: #ffffff;          /* White background for metrics */
    --percent-change-bg: #ffffff;        /* White background for percent change */
    --metric-text-color: #000000;        /* Black text */
    --percent-change-color: #000000;     /* Black text */
    --modal-overlay-background: rgba(0, 0, 0, 0.7);
    --close-button-color: #ccc;
    --close-button-hover-color: #fff;
    --video-overlay-background: rgba(0, 0, 0, 0.9);
    --button-background-color: rgba(255, 255, 255, 0.1);
    --button-hover-background-color: rgba(255, 255, 255, 0.2);
    --microchip-button-bg: rgba(50, 50, 50, 0.8);
    --microchip-button-hover-bg: rgba(50, 50, 50, 1);
    /* Add more variables as needed */
}