:root {
    /* Base colors */
    --primary-color: #4a6fa5;
    --secondary-color: #2c3e50;
    --accent-color: #4CAF50;
    --background-color: #ffffff;
    --text-color: #333333;
    
    /* Sidebar */
    --sidebar-bg: #d5d9e7;
    --sidebar-text: #2c3e50;
    --sidebar-link: #2c3e50;
    --sidebar-link-hover: #1565c0;
    --sidebar-link-hover-bg: #e3f2fd;
    
    /* Symptoms */
    --main-symptom-color: #530e1f;
    --sub-symptom-color: #0e4b1b;
    --sub-sub-symptom-color: #1b6a26;
    --sub-sub-symptom-deep-color: #883675;
    --sub-sub-sub-symptom-color: #a0522d;
    
    /* Buttons */
    --button-bg: #4CAF50;
    --button-text: #ffffff;
    --button-hover-bg: #3e8e41;
    
    /* Remedy gradation */
    --remedy-grade-1: #5f5858;
    --remedy-grade-2: #2511e7;
    --remedy-grade-3: #eb152b;
    --remedy-grade-4: #de25ca;
    
    /* Font settings */
    --heading-font: 'Merriweather', serif;
    --body-font: 'Open Sans', sans-serif;
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    
    /* Other UI elements */
    --border-color: #e0e0e0;
    --shadow-color: rgba(0,0,0,0.1);
    --highlight-color: #ffeb3b;
    --selection-color: #4CAF50;
}

/* Apply theme variables to elements */
body {
    font-family: var(--body-font);
    color: var(--text-color);
    background-color: var(--background-color);
}

.sidebar {
    background: var(--sidebar-bg);
}

.sidebar h2 {
    color: var(--sidebar-text);
}

.repertory-link {
    color: var(--sidebar-link);
}

.repertory-link:hover, .repertory-link.active {
    background: var(--sidebar-link-hover-bg);
    color: var(--sidebar-link-hover);
}

.main-symptom {
    color: var(--main-symptom-color);
}

.sub-symptom {
    color: var(--sub-symptom-color);
}

.sub-sub-symptom {
    color: var(--sub-sub-symptom-color);
}

.sub-sub-symptom-deep {
    color: var(--sub-sub-symptom-deep-color);
}

.sub-sub-sub-symptom {
    color: var(--sub-sub-sub-symptom-color);
}

.selected-symptoms-count {
    background: var(--button-bg);
    color: var(--button-text);
}

.selected-symptoms-count:hover {
    background: var(--button-hover-bg);
}