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

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

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

    --font-xs: 0.6875rem;
    /* 11   px — section labels, copy */
    --font-s: 0.8125rem;
    /* 13   px — sub-nav, collapse btn */
    --font-sm: 0.875rem;
    /* 14   px — main nav items, body default */
    --font-md: 0.9688rem;
    /* 15.5 px — brand wordmark */
    --font-m: 1rem;
    /* 16   px */
    --font-l: 1.125rem;
    /* 18   px */
    --font-xl: 1.25rem;
    /* 20   px */
    --font-xxl: 1.5rem;
    /* 24   px */

    --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%);
    --grey-960: hsl(0, 0%, 96%);
    --grey-970: hsl(0, 0%, 97%);
    --grey-980: hsl(0, 0%, 98%);
    --grey-990: hsl(0, 0%, 99%);

    /* ----------------
        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;

    --w1: 8.33%;
    --w2: 16.66%;
    --w3: 25%;
    --w4: 33.33%;
    --w5: 41.66%;
    --w6: 50%;
    --w7: 58.33%;
    --w8: 66.66%;
    --w9: 75%;
    --w10: 83.33%;
    --w11: 91.66%;
    --w12: 100%;

    /* ----------------------
            COMPONENTS
    ----------------------- */

    --sidebar-w: 200px;
    --sidebar-w-collapsed: 64px;







}