:root {
    /* Override the main CSS variables used by the application */
    --primary: #3b82f6;
    --secondary: #64748b;
    --accent: #10b981;

    /* Additional color variants for compatibility */
    --color-primary: #3b82f6;
    --color-primary-rgb: 59, 130, 246;
    --color-secondary: #64748b;
    --color-secondary-rgb: 100, 116, 139;
    --color-accent: #10b981;
    --color-accent-rgb: 16, 185, 129;

    /* Tailwind-compatible variables */
    --color-primary-50: color-mix(in srgb, #3b82f6 10%, white);
    --color-primary-100: color-mix(in srgb, #3b82f6 20%, white);
    --color-primary-200: color-mix(in srgb, #3b82f6 30%, white);
    --color-primary-300: color-mix(in srgb, #3b82f6 40%, white);
    --color-primary-400: color-mix(in srgb, #3b82f6 60%, white);
    --color-primary-500: #3b82f6;
    --color-primary-600: color-mix(in srgb, #3b82f6 80%, black);
    --color-primary-700: color-mix(in srgb, #3b82f6 70%, black);
    --color-primary-800: color-mix(in srgb, #3b82f6 60%, black);
    --color-primary-900: color-mix(in srgb, #3b82f6 50%, black);
}