:root {
    --primary-color: #4CAF50;
    --primary-hover: #45a049;
    --primary-shadow: rgba(76, 175, 80, 0.3);
    --bg: #f5f7fa;
    --container-bg: #ffffff;
    --feature-bg: #ffffff;
    --text: #333333;
    --text-secondary: #666666;
    --border: #eeeeee;
    --shadow: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    --bg: #1a1a2e;
    --container-bg: #242526;
    --feature-bg: #2a2b2c;
    --text: #e4e6eb;
    --text-secondary: #b0b3b8;
    --border: #3a3b3c;
    --shadow: rgba(0, 0, 0, 0.3);
}

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

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}