:root {
    /* colors */
    --tp-colors-blue:       #2f82af;
    --tp-colors-teal-light: #84c9c2;
    --tp-colors-teal:       #68b6ae;
    --tp-colors-dark:       #3b3c3b;
    --tp-colors-white:      #ffffff;

    /* semantic aliases */
    --tp-colors-primary:   var(--tp-colors-blue);
    --tp-colors-secondary: var(--tp-colors-teal-light);

    /* spacing */
    --tp-space-xs: 8px;
    --tp-space-sm: 16px;
    --tp-space-md: 28px;
    --tp-space-lg: 40px;
    --tp-space-xl: 64px;
}