:root {
    --bg-color: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-color-primary: #333333;
    --text-color-secondary: #555555;
    --text-color-muted: #777777;
    --border-color-primary: #aaaaaa;
    --border-color-secondary: #dddddd;
    --element-bg-color-2: #e9ecef;
    --accent: rgba(3, 116, 189, 1);

    --hero-bg: #ffffff;
    --hero-wordmark-filter: none;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #080808;
        --bg-secondary: #0f0f0f;
        --text-color-primary: hsla(40, 8%, 100%, 0.7);
        --text-color-secondary: hsla(40, 8%, 100%, 0.5);
        --text-color-muted: hsla(40, 8%, 100%, 0.3);
        --border-color-primary: hsla(40, 8%, 100%, 0.25);
        --border-color-secondary: hsla(40, 8%, 100%, 0.1);
        --element-bg-color-2: rgba(255, 255, 255, 0.06);
        --accent: #4a7bdf;

        --hero-bg: #080808;
        --hero-wordmark-filter: invert(1) brightness(1.05);
    }
}