/* Base (default) theme - Light Theme */
:root {
    --color-background: #ffffff;
    --color-text: #333333;
    --color-primary: #3498db;
    --color-button-background: var(--color-primary);
    --color-button-text: var(--color-background);
    --color-card-background: #f5f5f5;
    --color-card-border: #dddddd;
    --font-family: 'Arial', sans-serif;
    --font-size-body: 16px;
}

/* Dark Theme */
[data-theme="dark"] {
    --color-background: #333333;
    --color-text: #ffffff;
    --color-primary: #2980b9;
    --color-button-background: var(--color-primary);
    --color-button-text: var(--color-background);
    --color-card-background: #444444;
    --color-card-border: #666666;
}

/* Summer Theme */
[data-theme="summer"] {
    --color-background: #ffeb3b;
    --color-text: #0d47a1;
    --color-primary: #ff5722;
    --color-button-background: var(--color-primary);
    --color-button-text: var(--color-background);
    --color-card-background: #ffee58;
    --color-card-border: #fbc02d;
}

/* Winter Theme */
[data-theme="winter"] {
    --color-background: #e0f7fa;
    --color-text: #004d40;
    --color-primary: #009688;
    --color-button-background: var(--color-primary);
    --color-button-text: var(--color-background);
    --color-card-background: #b2ebf2;
    --color-card-border: #80deea;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    transition: all 0.3s ease;
}

button {
    background-color: var(--color-button-background);
    color: var(--color-button-text);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin: 10px;
    font-size: var(--font-size-body);
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Card component styling */
.card {
    background-color: var(--color-card-background);
    color: var(--color-text);
    border: 1px solid var(--color-card-border);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.card-content {
    font-size: var(--font-size-body);
}