Tweak typographic scale

Add an additional size ($xxxxl) & adjust typography of headings
accordingly. Now the biggest heading grabs this size, while the next
heading skips a size and uses $xxl instead. Gives a little more
breathing room between at the <p>, <h4> and <h3> level.
Replace $secondary-color with $off-color