:root {
    --color-primary: #1b6ca3;
    --color-primary-hover: #165b89;
    --color-primary-soft: #4a88b3;
    --color-primary-400: #72a8ca;
    --color-primary-300: #9ac1da;
    --color-primary-200: #c4dced;
    --color-primary-100: #e0edf6;
    --color-primary-50: #f1f7fb;
    --color-primary-rgb: 27, 108, 163;
    --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);
}