SharePoint 2010 custom CSS won't apply the theme colors

After playing with a custom CSS which wouldn't apply the colors defined in the theme, I came upon this post (http://blogs.msdn.com/b/sharepointdesigner/archive/2010/04/09/working-with-the-sharepoint-theming-engine.aspx) which laid out the criteria for a working themable CSS:

1. Properly formed CSS entries:
         /* [ReplaceColor(themeColor:"Dark2")] */ background-color:#ffffff;
2. Correctly located CSS file:
        /Style Library/1033/Themable/custom.css
       /Style Library/Themable/custom.css. 
       No other nesting will work.
3. Include CSS with a CSSRegistration control , not AlternateCSSUrl or CSSLink
4. Reapply the theme to calculate the themed CSS version

Simple visual guide to SharePoint 2010 themes

The most important colors are:

Dark 1
Light 1
Dark 2
Light 2

Here's a quick visual guide to how these colors affect the main page and navigation elements: