:root {
    --color-primary: #747ED1;
    --color-primary-dark: #5a64b8;
    --color-primary-light: color-mix(in srgb, #747ED1 70%, white);
    --color-secondary: #0891b2;
    --color-accent: #f59e0b;
    --color-background: #f9fafb;
    --color-text: #111827;
}

.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.text-primary { color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.hover\:bg-primary:hover { background-color: var(--color-primary) !important; }
.hover\:bg-primary-dark:hover { background-color: var(--color-primary-dark) !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.focus\:border-primary:focus { border-color: var(--color-primary) !important; }
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary) !important; }