@layer tokens {
  :root {

    /* Font Family */
    --default-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Main Colors */
    --main-blue-darker:      #0D7BAD;
    --main-blue:             #0F91CB;
    --main-blue-tp-5:        #0F91CB7F;
    --main-blue-lighter:     #11A7E9;

    /* Monochrome Palette */
    --black:                 #0C0C0C;
    --black-logo:            #231F20;
    --black-lightest:        #333333;
    --grey-darkest:          #404040;
    --grey-darker:           #4D4D4D;
    --grey-dark:             #5A5A5A;
    --grey:                  #676767;
    --grey-light:            #747474;
    --grey-lighter:          #818181;
    --grey-lightest:         #8E8E8E;
    --grey-white:            #9B9B9B;
    --white-darkest:         #CCCCCC;
    --white-darker:          #D9D9D9;
    --white-dark:            #E6E6E6;
    --white:                 #F3F3F3;
    --whitest:               #FFFFFF;

    /* Monochrome Transparent */
    --black-tp-1:            #0C0C0C19;
    --black-tp-2:            #0C0C0C32;
    --black-tp-3:            #0C0C0C4D;
    --black-tp-5:            #0C0C0C7F;
    --white-tp-4:            #F3F3F365;
    --white-tp-5:            #F3F3F37F;

    /* Success/Fail */
    --success:               #238636;
    --warning:               #CC0000;
  }
}