:root {
    --color-primary: #2c44b3;
    --color-primary-hover: #243894;
    --color-primary-soft: #5a6cc8;
    --color-primary-400: #7b8ad6;
    --color-primary-300: #aeb8e7;
    --color-primary-200: #cfd6f1;
    --color-primary-100: #e7ebf9;
    --color-primary-50: #f3f5fd;
    --color-primary-rgb: 44, 68, 179;
    --color-primary-border: var(--color-primary-200);
    --color-primary-surface: var(--color-primary-50);
    --color-primary-ring: rgba(var(--color-primary-rgb), 0.16);

    /* Compatibility aliases for existing styles */
    --main-color: var(--color-primary);
    --blue-700: var(--color-primary-hover);
    --blue-600: var(--color-primary);
    --blue-500: var(--color-primary-soft);
    --blue-300: var(--color-primary-300);
    --blue-200: var(--color-primary-200);
    --blue-100: var(--color-primary-100);
    --blue-50: var(--color-primary-50);
    --home-blue-600: var(--color-primary);
    --home-blue-500: var(--color-primary-soft);
    --home-blue-100: var(--color-primary-100);
    --home-blue-50: var(--color-primary-50);
}