:root {
    /* -----------
        FONT
    ----------- */

    --root-font: 'Open Sans', sans-serif;
    --root-font-size: 14px;

    --monospace-font: 'Source Code Pro';
    --heading-font:   'Anton';
    --text-font:      'Open Sans';

    --font-small:  .9rem;
    --font-size-1: 1rem;
    --font-size-2: 1.2rem;
    --font-size-3: 1.44rem;
    --font-size-4: 1.728rem;
    --font-size-5: 2.074rem;
    --font-size-6: 2.488rem;

    --font-dark:  var(--grey-200);
    --font-light: var(--grey-850);

    --muted: var(--grey-500);

    /* ---------------------
       Generic Color 
    ---------------------- */

    --opaque-100: rgba(0,0,0,.1);
    --opaque-150: rgba(0,0,0,.15);
    --opaque-200: rgba(0,0,0,.2);
    --opaque-300: rgba(0,0,0,.3);
    --opaque-400: rgba(0,0,0,.4);
    --opaque-500: rgba(0,0,0,.5);
    --opaque-600: rgba(0,0,0,.6);
    --opaque-700: rgba(0,0,0,.7);
    --opaque-800: rgba(0,0,0,.8);
    --opaque-900: rgba(0,0,0,.9);
    --opaque-glass: rgba(255,255,255,.04);

    --white:    hsl(0, 0%, 100%);
    --black:    hsl(0, 0%, 0%);

    --grey-50:  hsl(0, 0%, 5%);
    --grey-100: hsl(0, 0%, 10%);
    --grey-150: hsl(0, 0%, 15%);
    --grey-200: hsl(0, 0%, 20%);
    --grey-250: hsl(0, 0%, 25%);
    --grey-300: hsl(0, 0%, 30%);
    --grey-350: hsl(0, 0%, 35%);
    --grey-400: hsl(0, 0%, 40%);
    --grey-450: hsl(0, 0%, 45%);
    --grey-500: hsl(0, 0%, 50%);
    --grey-550: hsl(0, 0%, 55%);
    --grey-600: hsl(0, 0%, 60%);
    --grey-650: hsl(0, 0%, 65%);
    --grey-700: hsl(0, 0%, 70%);
    --grey-750: hsl(0, 0%, 75%);
    --grey-800: hsl(0, 0%, 80%);
    --grey-850: hsl(0, 0%, 85%);
    --grey-900: hsl(0, 0%, 90%);
    --grey-950: hsl(0, 0%, 95%);

    /* ----------------
        ACCENT COLOR
    ---------------- */

    --hue:          220;
    --sat:          50%;

    --accent-50:  hsl(var(--hue), var(--sat),  5%);
    --accent-100: hsl(var(--hue), var(--sat), 10%);
    --accent-150: hsl(var(--hue), var(--sat), 15%);
    --accent-200: hsl(var(--hue), var(--sat), 20%);
    --accent-250: hsl(var(--hue), var(--sat), 25%);
    --accent-300: hsl(var(--hue), var(--sat), 30%);
    --accent-350: hsl(var(--hue), var(--sat), 35%);
    --accent-400: hsl(var(--hue), var(--sat), 40%);
    --accent-450: hsl(var(--hue), var(--sat), 45%);
    --accent-500: hsl(var(--hue), var(--sat), 50%);
    --accent-550: hsl(var(--hue), var(--sat), 55%);
    --accent-600: hsl(var(--hue), var(--sat), 60%);
    --accent-650: hsl(var(--hue), var(--sat), 65%);
    --accent-700: hsl(var(--hue), var(--sat), 70%);
    --accent-750: hsl(var(--hue), var(--sat), 75%);
    --accent-800: hsl(var(--hue), var(--sat), 80%);
    --accent-850: hsl(var(--hue), var(--sat), 85%);
    --accent-900: hsl(var(--hue), var(--sat), 90%);
    --accent-950: hsl(var(--hue), var(--sat), 95%);

    --accent:       var(--accent-300);

    /* ---------------------
       Complementary Color 
    ---------------------- */

    --hue-val:  calc(var(--hue) - 180);
    --hue-comp: mod(var(--hue-val), 360);

    --comp-300: hsl(var(--hue-comp), var(--sat), 30%);
    --comp-500: hsl(var(--hue-comp), var(--sat), 50%);
    --comp-700: hsl(var(--hue-comp), var(--sat), 70%);
    --comp:     var(--comp-500);

    /* ---------------------
       Status & State Color 
    ---------------------- */

    --error:        hsl(0, 70%, 50%);
    --error-strong: hsl(0, 95%, 50%);
    --error-light:  hsl(0, 80%, 80%);
    --error-dark:   hsl(0, 80%, 25%);

    --warning:        hsl(40, 70%, 50%);
    --warning-strong: hsl(40, 95%, 50%);
    --warning-light:  hsl(40, 80%, 80%);
    --warning-dark:   hsl(40, 80%, 25%);


    --success:        hsl(120, 70%, 50%);
    --success-strong: hsl(120, 95%, 50%);
    --success-light:  hsl(120, 80%, 80%);
    --success-dark:   hsl(120, 80%, 25%);

    --unknown:        hsl(260, 70%, 50%);
    --unknown-strong: hsl(260, 95%, 50%);
    --unknown-light:  hsl(260, 80%, 80%);
    --unknown-dark:   hsl(260, 80%, 25%);

    --info:        hsl(200, 70%, 50%);
    --info-strong: hsl(200, 95%, 50%);
    --info-light:  hsl(200, 80%, 80%);
    --info-dark:   hsl(200, 80%, 25%);

    --disabled: var(--grey-700);

    /* --------------------
        SIZING / OFFSETS
    -------------------- */

    --p1: .25rem;   --m1: var(--p1);    --g1: var(--p1);
    --p2: .5rem;    --m2: var(--p2);    --g2: var(--p2);
    --p3: .75rem;   --m3: var(--p3);    --g3: var(--p3);
    --p4: 1rem;     --m4: var(--p4);    --g4: var(--p4);
    --p5: 1.25rem;  --m5: var(--p5);    --g5: var(--p5);
    --p6: 1.5rem;   --m6: var(--p6);    --g6: var(--p6);

    /* --------------------
        RADIUS
    -------------------- */

    --rad-1: calc(var(--p1) / 2);
    --rad-2: calc(var(--p2) / 2);
    --rad-3: calc(var(--p3) / 2);
    --rad-4: calc(var(--p4) / 2);
    --rad-5: calc(var(--p5) / 2);
    --rad-6: calc(var(--p6) / 2);
    --rad-full:  50px;
}