:root {
    --color-bg: #ffffff;
    --color-bg-offset: #f7f7f9;
    --color-text: #373a3c;
    --color-text-offset: #818a91;
    --color-border: #eceeef;
    --color-primary: #ff335f;
    --color-primary-offset: #ff1447;
    --color-secondary: #43a9a3;
}

@media(prefers-color-scheme: dark) {
    :root {
        --color-bg: #0e141b;
    --color-bg-offset: #252526;
    --color-text: #ffffff;
    --color-text-offset: #818a91;
    --color-border: #2d2d2d;
    --color-primary: #ff5277;
    --color-primary-offset: #ff2957;
    --color-secondary: #43a9a3;
    }
}


[data-theme='default'] {
    --color-bg: #ffffff;
    --color-bg-offset: #f7f7f9;
    --color-text: #373a3c;
    --color-text-offset: #818a91;
    --color-border: #eceeef;
    --color-primary: #ff335f;
    --color-primary-offset: #ff1447;
    --color-secondary: #43a9a3;
}

[data-theme='dark'] {
    --color-bg: #0e141b;
    --color-bg-offset: #252526;
    --color-text: #ffffff;
    --color-text-offset: #818a91;
    --color-border: #2d2d2d;
    --color-primary: #ff5277;
    --color-primary-offset: #ff2957;
    --color-secondary: #43a9a3;
}