:root {
    --color-primary: #8a8fff;
    --color-primary-hover: #7a7ff0;
    --color-accent: #db9eff;
    --color-gradient-start: #9197ff;
    --color-gradient-mid: #db9eff;
    --color-gradient-end: #ffb8f1;
    --color-dark: #111;
    --text-dark: #111;
    --text-light: #6b6f85;
    --bg-light: #f5f6ff;
    --border-color: #d9d8ef;
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --secondary-color: #3d3f5a;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-dark: #f1f1f6;
        --text-light: #b7b8c4;
        --bg-light: #15151d;
        --border-color: #2a2b3d;
    }
}