:root {

    --hue:          240;
    --sat:          20%;


    /* Colors */

    --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:       var(--accent-300);
    --accent-light: var(--accent-700);
    --accent-dark:  var(--accent-100);


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

    --error:         #934c4c;
    --error-strong:  #CC2222;

    --warn:          #cab276;
    --warn-strong:   #FF9900;
    --warning:       var(--warn);
    --warning-strong:var(--warn-strong);

    --success:       #a6c9a6;
    --success-strong:#22CC22;
    
    --unknown:       #550055;
    --unknown-strong:#990099;

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

    --border-accent: 1px solid var(--accent);
    --border-accent-200: 1px solid var(--accent-200);
    --border-accent-300: 1px solid var(--accent-300);
    --border-accent-500: 1px solid var(--accent-500);
    --border-accent-600: 1px solid var(--accent-600);
    --border-success: 1px solid var(--success);
    --border-warning: 1px solid var(--warning);
    --border-error: 1px solid var(--error);
    --border-unknown: 1px solid var(--unknown);

    --radius-xs: 4px;
    --radius-sm: 5px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 12px;
    --radius-pill: 14px;

    --transition-fast: all .1s;
    --transition-fade: opacity 350ms ease;
    --shadow-tooltip: 0 8px 24px rgba(0,0,0,.35);

    /* Backgrounds */

    --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%);

    --bg-lm:   var(--grey-950);
    --bg-lm-1: var(--grey-900);
    --bg-lm-2: var(--grey-850);
    --bg-lm-3: var(--grey-750);
    --bg-lm-4: var(--grey-700);
    --bg-lm-5: var(--grey-650);
    --bg-lm-6: var(--grey-600);

    /* Fonts */
    --icon-color: var(--accent-800);
    --font-color: var(--icon-color);

    /* Padding */

    --p1: .2rem;
    --p2: .5rem;
    --p3: 1rem;
    --p4: 1.5rem;
    --p5: 1.8rem;
    --p6: 2.5rem;

    --m1: var(--p1);
    --m2: var(--p2);
    --m3: var(--p3);
    --m4: var(--p4);

    --g1: var(--p1);
    --g2: var(--p2);
    --g3: var(--p3);
    --g4: var(--p4);

    /* Fonts */
    --root-font: 'Lato', sans-serif;
    --root-font-size: 14px;

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

    --font-small: .85rem;
    --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;



    --default-hover-color: var(--accent-150);
    --default-hover-border: 1px solid var(--default-hover-color);
}