:root {
    /* Override the main CSS variables used by the application */
    --primary: #0f3354;
    --primary-foreground: hsl(0 0% 98%);

    /* Additional color variants for compatibility */
    --color-primary: #0f3354;
    --color-primary-rgb: 15, 51, 84;
    --color-secondary: #03ccba;
    --color-secondary-rgb: 3, 204, 186;
    --color-accent: #dddddd;
    --color-accent-rgb: 221, 221, 221;

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