:root {
    --bg-color: #f5f5f7;
    --text-color: #1d1d1f;
    --text-secondary: #6e6e73;
    --card-bg: #ffffff;
    --border-color: #d2d2d7;
    --hover-bg: #f0f0f3;
    --section-bg: #ffffff;
    --footer-bg: #f5f5f7;
    --primary-color: #0071e3;
    --secondary-color: #5ac8fa;
    --primary-shadow: 0 4px 12px rgba(0, 113, 227, 0.25);
    --primary-shadow-hover: 0 6px 16px rgba(0, 113, 227, 0.35);
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --avatar-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.dark-mode {
    --bg-color: #000000;
    --text-color: #f5f5f9;
    --text-secondary: #aeaeb2;
    --card-bg: #1c1c1e;
    --border-color: #3a3a3c;
    --hover-bg: #2c2c2e;
    --section-bg: #161618;
    --footer-bg: #111113;
    --primary-color: #0a84ff;
    --secondary-color: #5ac8fa;
    --primary-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
    --primary-shadow-hover: 0 6px 16px rgba(10, 132, 255, 0.4);
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
    --avatar-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) {
        --bg-color: #000000;
        --text-color: #f5f5f9;
        --text-secondary: #aeaeb2;
        --card-bg: #1c1c1e;
        --border-color: #3a3a3c;
        --hover-bg: #2c2c2e;
        --section-bg: #161618;
        --footer-bg: #111113;
        --primary-color: #0a84ff;
        --secondary-color: #5ac8fa;
        --primary-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
        --primary-shadow-hover: 0 6px 16px rgba(10, 132, 255, 0.4);
        --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
        --avatar-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
}