/* Base theme definitions */
:root {
    /* Light theme values */
    --light-theme-color: #000;
    --light-background-color: #ffffff;
    --light-text-color: #333333;
    --light-text-color-secondary: #555;
    --light-positive-color: #428600;
    --light-border-color: #dddddd;
    --light-btn-background: #4f78e2;
    --light-btn-active-color: #ffffff;
    --light-toggle-bg: #e0e0e0;
    --light-toggle-active-color: #333333;
    --light-toggle-inactive-color: #555555;
    --light-toggle-indicator-bg: #ffffff;
    --light-input-bg: #f9f9f9;
    --light-input-border-color: #ddd;
    --light-token-selected-bg: #edf3ff;
    --light-token-selected-border: #365edc;
    --light-token-selected-text: #2349bc;
    --light-tooltip-bg: rgba(79, 120, 226, 0.85);
    --light-tooltip-text-color: #ffffff;
    --light-chart-line-color: #b0c4f6;
    --light-chart-point-color: #4f78e2;
    --light-chart-label-color: #777;

    /* Dark theme values */
    --dark-theme-color: #fff;
    --dark-background-color: #121212;
    --dark-text-color: #f5f5f5;
    --dark-text-color-secondary: #aaa;
    --dark-positive-color: #82ad6b;
    --dark-border-color: #444444;
    --dark-btn-background: #61ca00;
    --dark-btn-active-color: #121212;
    --dark-toggle-bg: #333333;
    --dark-toggle-active-color: #ffffff;
    --dark-toggle-inactive-color: #cccccc;
    --dark-toggle-indicator-bg: #444444;
    --dark-input-bg: #333333;
    --dark-input-border-color: #555555;
    --dark-token-selected-bg: #172c50;
    --dark-token-selected-border: #82aaff;
    --dark-token-selected-text: #b3ccff;
    --dark-tooltip-bg: rgba(44, 44, 44, 0.9);
    --dark-tooltip-text-color: #f5f5f5;
    --dark-chart-line-color: #52678f;
    --dark-chart-point-color: #6f8bc2;
    --dark-chart-label-color: #888;

    /* Shared colors (same in both themes) */
    --negative-color: #ff4949;

    /* Default theme (light) */
    --theme-color: var(--light-theme-color);
    --background-color: var(--light-background-color);
    --text-color: var(--light-text-color);
    --text-color-secondary: var(--light-text-color-secondary);
    --positive-color: var(--light-positive-color);
    --border-color: var(--light-border-color);
    --btn-background: var(--light-btn-background);
    --btn-active-color: var(--light-btn-active-color);
    --toggle-bg: var(--light-toggle-bg);
    --toggle-active-color: var(--light-toggle-active-color);
    --toggle-inactive-color: var(--light-toggle-inactive-color);
    --toggle-indicator-bg: var(--light-toggle-indicator-bg);
    --input-bg: var(--light-input-bg);
    --input-border-color: var(--light-input-border-color);
    --token-selected-bg: var(--light-token-selected-bg);
    --token-selected-border: var(--light-token-selected-border);
    --token-selected-text: var(--light-token-selected-text);
    --tooltip-bg: var(--light-tooltip-bg);
    --tooltip-text-color: var(--light-tooltip-text-color);
    --chart-line-color: var(--light-chart-line-color);
    --chart-point-color: var(--light-chart-point-color);
    --chart-label-color: var(--light-chart-label-color);
}

/* System Dark Theme Preference */
@media (prefers-color-scheme: dark) {
    :root {
        --theme-color: var(--dark-theme-color);
        --background-color: var(--dark-background-color);
        --text-color: var(--dark-text-color);
        --text-color-secondary: var(--dark-text-color-secondary);
        --positive-color: var(--dark-positive-color);
        --border-color: var(--dark-border-color);
        --btn-background: var(--dark-btn-background);
        --btn-active-color: var(--dark-btn-active-color);
        --toggle-bg: var(--dark-toggle-bg);
        --toggle-active-color: var(--dark-toggle-active-color);
        --toggle-inactive-color: var(--dark-toggle-inactive-color);
        --toggle-indicator-bg: var(--dark-toggle-indicator-bg);
        --input-bg: var(--dark-input-bg);
        --input-border-color: var(--dark-input-border-color);
        --token-selected-bg: var(--dark-token-selected-bg);
        --token-selected-border: var(--dark-token-selected-border);
        --token-selected-text: var(--dark-token-selected-text);
        --tooltip-bg: var(--dark-tooltip-bg);
        --tooltip-text-color: var(--dark-tooltip-text-color);
        --chart-line-color: var(--dark-chart-line-color);
        --chart-point-color: var(--dark-chart-point-color);
        --chart-label-color: var(--dark-chart-label-color);
    }
}

/* Light Theme Override */
:root.light-theme {
    --theme-color: var(--light-theme-color);
    --background-color: var(--light-background-color);
    --text-color: var(--light-text-color);
    --text-color-secondary: var(--light-text-color-secondary);
    --positive-color: var(--light-positive-color);
    --border-color: var(--light-border-color);
    --btn-background: var(--light-btn-background);
    --btn-active-color: var(--light-btn-active-color);
    --toggle-bg: var(--light-toggle-bg);
    --toggle-active-color: var(--light-toggle-active-color);
    --toggle-inactive-color: var(--light-toggle-inactive-color);
    --toggle-indicator-bg: var(--light-toggle-indicator-bg);
    --input-bg: var(--light-input-bg);
    --input-border-color: var(--light-input-border-color);
    --token-selected-bg: var(--light-token-selected-bg);
    --token-selected-border: var(--light-token-selected-border);
    --token-selected-text: var(--light-token-selected-text);
    --tooltip-bg: var(--light-tooltip-bg);
    --tooltip-text-color: var(--light-tooltip-text-color);
    --chart-line-color: var(--light-chart-line-color);
    --chart-point-color: var(--light-chart-point-color);
    --chart-label-color: var(--light-chart-label-color);
}

/* Dark Theme Override */
:root.dark-theme {
    --theme-color: var(--dark-theme-color);
    --background-color: var(--dark-background-color);
    --text-color: var(--dark-text-color);
    --text-color-secondary: var(--dark-text-color-secondary);
    --positive-color: var(--dark-positive-color);
    --border-color: var(--dark-border-color);
    --btn-background: var(--dark-btn-background);
    --btn-active-color: var(--dark-btn-active-color);
    --toggle-bg: var(--dark-toggle-bg);
    --toggle-active-color: var(--dark-toggle-active-color);
    --toggle-inactive-color: var(--dark-toggle-inactive-color);
    --toggle-indicator-bg: var(--dark-toggle-indicator-bg);
    --input-bg: var(--dark-input-bg);
    --input-border-color: var(--dark-input-border-color);
    --token-selected-bg: var(--dark-token-selected-bg);
    --token-selected-border: var(--dark-token-selected-border);
    --token-selected-text: var(--dark-token-selected-text);
    --tooltip-bg: var(--dark-tooltip-bg);
    --tooltip-text-color: var(--dark-tooltip-text-color);
    --chart-line-color: var(--dark-chart-line-color);
    --chart-point-color: var(--dark-chart-point-color);
    --chart-label-color: var(--dark-chart-label-color);
}